火箭月亮html5游戏,HTML5 svg和CSS3炫酷火箭升空动画特效
这是一款HTML5 svg和CSS3炫酷火箭升空动画特效。该特效的火箭使用SVG来实现,并通过CSS3动画来实现火箭的动画特效。
使用方法
HTML结构
CSS样式
body {
background-color: #1f2740;
text-align: center;
margin: 20px auto;
}
svg {
margin: 20px 20px 10px;
width: 300px;
}
a {
color: #f8f3dc;
font-family: monospace;
}
#approved {
clip-path: circle(at center);
border: 4px solid #f8f3dc;
border-radius: 50%;
animation: rocketShake .1s linear alternate infinite;
}
#approved .st0 {
fill: #13192d;
}
#approved .st1, #approved .st3 {
fill: #f8f3dc;
}
#approved .st3 {
stroke: #13192d;
stroke-width: 4;
stroke-miterlimit: 10;
}
#approved .st4 {
fill: #69b3b2;
}
#approved .rocket {
animation: rocketMove 5s linear alternate infinite;
}
#approved .st1 {
transform: translateY(-100%);
animation: starsMove 6s infinite;
}
#approved .st1:nth-of-type(5) {
animation-delay: 3.5s;
animation-duration: 8s;
}
#approved .st1:nth-of-type(4) {
animation-delay: 2s;
animation-duration: 3s;
}
#approved .st1:nth-of-type(3) {
animation-delay: .2s;
animation-duration: 6s;
}
#approved .st1:nth-of-type(2) {
animation-delay: 4s;
}
#approved .st4 {
transform: scale(0);
opacity: 0;
animation: smoke 2s 1s infinite;
transform-origin: center;
transform-box: fill-box;
}
#approved .st4:nth-child(9) {
animation-delay: .8s;
animation-duration: 1.5s;
}
@keyframes starsMove {
to {
transform: translateY(100%);
}
}
@keyframes smoke {
30% {
transform: scale(2);
opacity: 1;
}
31% {
opacity: 0.5;
}
}
@keyframes rocketShake {
from {
transform: rotate(-0.5deg);
}
to {
transform: rotate(0.5deg);
}
}
@keyframes rocketMove {
50% {
transform: translateY(-15%);
}
70% {
transform: translateY(0);
}
80% {
transform: translateY(2%);
}
}
火箭月亮html5游戏,HTML5 svg和CSS3炫酷火箭升空动画特效相关推荐
- 纯CSS3炫酷3D星空动画特效
效果: 源码: <!DOCTYPE html> <html lang="zh"> <head><meta charset="UT ...
- php星空背景动态,纯CSS3炫酷3D星空动画特效
简要教程 这是一款使用纯CSS3制作的炫酷3D星空动画特效.该特效中,以飞船向前快速移动为视角,所有的星星都快速的变大并向后移动,效果非常逼真. 使用方法 HTML结构 该3D星空特效只使用一个 元素 ...
- jQuery+CSS3炫酷机械键盘js特效
下载地址 jQuery+CSS3炫酷机械键盘特效,点击键盘按键会出现凹进去的效果,css模拟真实的键盘特效. dd:
- html网站点击特效,HTML5 svg和CSS3炫酷鼠标点击按钮特效
这是一组效果非常炫酷的HTML5 svg和CSS3鼠标点击按钮特效.这组鼠标点击特效共有22种效果,大多数是在伪元素上使用CSS3 animations来制作动画效果.非常适合于移动手机APP上的按钮 ...
- jQuery和SVG炫酷弹射纸飞机动画特效
http://demo.htmleaf.com/1506/201506261811/index.html jQuery和css3自动轮换的用户评论留言 炫酷纯CSS3纸飞机动画特效
- php+js+背景特效,基于canvas+html5炫酷星空背景动画特效
[温馨提示]源码包解压密码:www.youhutong.com 效果图: 描述说明: Warp drive是一个轻量级的jQuery插件.可以帮助您创建一个很酷的交互式星空背景特效,这个星空背景特效可 ...
- html圆形图片切换,jQuery和CSS3炫酷圆形图片切换特效
这是一款效果非常酷的jQuery和CSS3圆形图片切换特效.该圆形图片特效可以使用animate.css来制作图片的进入动画和离开动画.可以任意设置多张图片进行来回翻转.旋转切换,效果堪称一流. 使用 ...
- python3d相册源代码_js和CSS3炫酷3D相册展示
js和CSS3炫酷3D相册展示 *{margin:0;padding:0;} body{background:url(img/bg.jpg);width:100%;height:100%;overfl ...
- css3炫彩边框渐变色动画js特效
下载地址 一款css3炫彩边框渐变色动画特效,炫彩的边框颜色渐变动画,让边框不再单调,生动有趣,可灵活使用在网页中 dd:
最新文章
- 路由器是如何实现数据包的传送?—Vecloud微云
- 声学漫谈之七:扬声器等效电路与参数
- 面试题——4种数组去重的方法
- Javascript基础知识笔记四
- nginx php重定向,nginx如何重定向信息
- axure内联框架和动态面板_Axure中内联框架的使用与设置图文教程(第12)
- Restorator软件使exe文件都不能打开,exe不支持此接口
- 本人CSDN资源重传、0积分获取的方法以及重要声明(长期有效)
- c语言ascii码表6,C语言附录ASCII码表
- 使用MarkDown来写一份漂亮简约的简历
- 大学学计算机7代i5够吗,学生党必看:装机Intel酷睿7代中最应该选CPU是它们
- 【精品】MySQL 自定义函数
- 小米8android p慢,给力 小米8青春版获得Android P更新
- 用Modules优雅地管理你的环境变量
- 04_frp内网穿透实例
- Vijos P1836 HYS与七夕节大作战
- 安卓设备门禁识别开发_基于Android和RFID的门禁管理系统
- 绝对隐私:华为公司员工待遇全面揭秘(转)
- 【模拟集成电路】宽摆幅压控振荡器(VCO)设计
- 校园IP网络广播案例-石家庄法商中等专业学校鹿泉校区校园IP广播系统应用
热门文章
- Python学习笔记——Numpy数组的移动滑窗,使用as_strided实现
- 常见的预设分栏包括_word常见分栏问题小结
- Blender Game Engine (BGE) 是 Blender 3D内置游戏引擎
- 设有火车票1000张,创建10个线程模拟10个售票点,每个售票点100毫秒售出一张票。请模拟并打印出售票过程。
- 大楚云控 - 一款优秀的批量群控系统 介绍
- 南方精良系统-不完全版
- filter()筛选过滤
- 英语与计算机整合课,浅谈计算机与英语教学的有效整合
- ajax在jQuery的应用,Ajax在jQuery中的应用($.ajax()方法)
- 浪潮8路服务器型号,浪潮推出自主设计8路服务器