用css3做一个模拟火箭飞行的简单动画。

用css3做一个模拟火箭飞行的简单动画，图片我特意上传到了图床，你也可以试试。

效果大概是这样：

需要的知识点：
知道css的transform，transition，animation属性和定义动画的@keyframes。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {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;}}</style>
</head><body><img id="rocket" src="https://gitee.com/zyxbj/image-warehouse/raw/master/pics/huojian.png" /><!-- 给小火箭周围添加蓝色的线条 --><div class="line line1"></div><div class="line line2"></div><div class="line line3"></div><div class="line line4"></div>
</body></html>

用css3做一个模拟火箭飞行的简单动画。相关推荐

[css] 使用css3做一个魔方旋转的效果
[css] 使用css3做一个魔方旋转的效果总的来说,用了一些 3D 效果的样式,如 translate3d,rotate3d,perspective,transform-style: preser ...
html动画翻书特效,css3 做一个类似于翻书特效的3D动画
我们来看下做一个css3 3D动画需要哪些东西.前面我们已经使用transition和transform做了一些简单的操作. 设置3D场景做3D动画,我们首先要设置3D场景.3D场景我们通常用per ...
教你用CSS3做一个旋转的宇宙星球
教你用CSS3做一个旋转的宇宙星球可能略有瑕疵,无非就是先画一个圆圈,把小球定位到上面,然后再让圆圈旋转即可直接上效果图代码 <!DOCTYPE html><html lang ...
html语言制作带样式的表格,html制作一个复杂表格 html5/CSS3做一个表格
table td{width: 100px;padding: 5px;}DataDataDataDataDataDataDataDataDataDataDataDataDataDataData 用HT ...
css3 做一个会动的菜单 menu 按钮动画效果
css3 做一个会动的菜单 menu 按钮动画效果需要做一个会的动画按钮效果,小前端部知道如何实现,我看了一眼需要的效果,给他写了一个简单的 demo. 设计师给了俩图片,一个是三这样的菜单图标 ...
【web前端特效源码】使用HTML5+CSS3制作一个会促销广告滚动字幕3D动画效果~~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3制作一个会促销广告滚动字幕3D动画效果~~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!DOCTYPE ...
css3 做一个漂亮的分割线
原文出处: http://blog.csdn.net/majormayer/article/details/50996444 在网页中我们经常会用到分割线,但是原始的分割线并不太美观,我们可以用css ...
利用java知识做一个模拟qq登入模拟界面
qq模拟登入界面一.设计概述 1.使用java所学知识,做一个qq登入模拟界面,如图所示. QQ登录界面整体可以看做一个容器窗口,使用JFrame容器来实现,从登录界面的布局效果和显示内容可以看出, ...
CSS3 做一个旋转的立体3D正方形动效核心【前端就业课第二阶段】CSS 零基础到实战（07）
若是大一学子或者是真心想学习刚入门的小伙伴可以私聊我,若你是真心学习可以送你书籍,指导你学习,给予你目标方向的学习路线,无套路,博客为证. 一.transform-origin transform-o ...

用css3做一个模拟火箭飞行的简单动画。

用css3做一个模拟火箭飞行的简单动画。相关推荐

最新文章

热门文章