标签：动画 star scene 火箭 transform animation let 飞行
火箭飞行动画制作
html
<div class="scene">
<div class="rocket">
<img width="100" src="./rocket.png" alt="rocket">
</div>
</div>
- html代码比较简洁
- 只需写出通用的黑色场景
- 建立火箭rocket标签
- 插入火箭图片，默认图片大小100即可
css
body{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.scene {
position: relative;
width: 100%;
height: 100vh;
background: #000;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.scene .rocket {
position: relative;
animation: animate 0.2s ease infinite;
}
@keyframes animate{
0%{
transform: translateY(-2px);
}
50%{
transform: translateY(2px);
}
}
/* 分割线 下面是i标签的样式 需要js创建出对应动态i标签，渲染出下雨的特效，使之让火箭在雨中飞速穿梭效果*/
.scene i {
position: absolute;
top: -200px;
background: rgba(255,255,255,0.5);
animation: animates linear infinite;
}
@keyframes animates{
from{
transform: translateY(0);
}
to{
transform: translateY(200vh);
}
}
.rocket::before {
content: '';
position: absolute;
bottom: -200px;
left: 50%;
transform: translateX(-50%);
width: 10px;
height: 200px;
background: linear-gradient(#00d0ff,transparent);
filter: blur(5px);
}
- 首先初始化body样式
- 给场景scene宽高占据全屏，并设置黑色背景，使用flex布局使其火箭垂直水平居中
- 火箭样式加入css3新特性动画标签animation
- 并使之上下跳动
- 再对创建对i标签进行雨滴样式改造
- 使用定位，动画效果，铺满全屏
- 最后加入火箭喷气效果，filter是滤镜效果，给出模糊感，看的更接近现实
介绍下animation语法
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
| 值 | 说明 |
|---|---|
| animation-name | 指定要绑定到选择器的关键帧的名称 |
| animation-duration | 动画指定需要多少秒或毫秒完成 |
| animation-timing-function | 设置动画将如何完成一个周期 |
| animation-delay | 设置动画在启动前的延迟间隔。 |
| animation-iteration-count | 定义动画的播放次数。 |
| animation-direction | 指定是否应该轮流反向播放动画。 |
| animation-fill-mode | 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。 |
| animation-play-state | 指定动画是否正在运行或已暂停。 |
| initial | 设置属性为其默认值。 阅读关于 initial的介绍。 |
| inherit | 从父元素继承属性。 阅读关于 initinherital的介绍。 |
CSS3 transform 和 filter（滤镜） 属性
<script type="text/javascript">
function start () {
let count = 50;
let i = 0;
let scene = document.querySelector('.scene');
while (i < count){
let star = document.createElement('i');
let w = Math.floor(Math.random() * window.innerWidth);
let h = Math.random() * 100;
let duartion = Math.random() * 1;
star.style.width = 1 + 'px';
star.style.height = 50 + h + 'px';
star.style.left = w + 'px';
star.style.animationDuration = duartion + 's';
scene.appendChild(star);
i++;
}
}
start();
</script>
- 定义两个变量count 和 i
- 通过DOM操作获得场景scene标签都元素属性
- 通过while循环对比i和count大小，可以控制i标签的数量，快慢，从而可以更好展示火箭飞行效果
- 创建出i元素的节点
- 再使用向上取整，随机函数获取，获取i标签的随机高，随机下落时间和随机下落位置，宽度固定1px即可
- 最后把star子节点插入到scene下，i++循环，调用函数启动
标签：动画,star,scene,火箭,transform,animation,let,飞行 来源： https://blog.csdn.net/hkw20/article/details/118459107
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。