用css3做一个模拟火箭飞行的简单动画。 |
您所在的位置：网站首页 › 小火箭简单折法 › 用css3做一个模拟火箭飞行的简单动画。 |
用css3做一个模拟火箭飞行的简单动画。
|
用css3做一个模拟火箭飞行的简单动画，图片我特意上传到了图床，你也可以试试。 效果大概是这样： 需要的知识点： 知道css的transform，transition，animation属性和定义动画的@keyframes。 Document * { padding: 0; margin: 0; } #rocket { position: absolute; /* 小火箭的长宽分别是250px、220px，用绝对定位将它移动到屏幕下部中间 */ left: 50%; margin-left: -125px; top: 300px; animation: move 0.7s linear 0s infinite alternate; } /* 给小火箭定义左右移动的动画 */ @keyframes move { from { /* 从左上角移动到右下角 */ transform: translate(-30px, -30px); } to { transform: translate(30px, 30px); } } .line { position: absolute; width: 180px; height: 1.5px; background-color: blue; top:300px; left: 500px; /* 开始时隐藏线条 */ opacity: 0; animation: forlines 1s ease 0s infinite alternate; } /* 给其他线条设置不同的位置和动画延时 */ .line2{ top:370px; left: 520px; animation: forlines 1s ease 0.3s infinite alternate; } .line3{ top:320px; left: 670px; animation: forlines 1s ease 0.5s infinite alternate; } .line4{ top:350px; left: 720px; animation: forlines 1s ease 0.1s infinite alternate; } /* 给线条设置上下移动和透明度变换的动画 */ @keyframes forlines { 0%{ /* 将它旋转45度后，此时坐标轴同样会旋转45度旋转后将他上下移动 */ transform: rotate(-45deg) translateX(300px); opacity: 0; } 50%{ opacity: 1; } 100%{ transform: rotate(-45deg) translateX(-300px); opacity: 0; } } |
【本文地址】