css3 动画 火箭,CSS3 火箭发射动画 寓意创新起航

最新推荐文章于 2022-08-03 19:56:09 发布
最新推荐文章于 2022-08-03 19:56:09 发布
阅读量352 收藏 1
点赞数
文章标签： css3 动画 火箭

CSS

语言：

CSSSCSS

确定

@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,900);

* {

-moz-box-sizing: border-box;

box-sizing: border-box;

}

html,

body {

font-size: 16px;

height: 100%;

width: 100%;

}

body {

background: #34aadc;

}

h1,

p {

color: #fff;

font-family: "Roboto", sans-serif;

font-size: 4em;

font-weight: 900;

letter-spacing: -1px;

text-align: center;

}

h1 {

background: rgba(0, 0, 0, 0.1) url("http://ideas.techbrood.com/themes/techbrood/image/placeholder_170_128.png") no-repeat;

background-size: 100%;

background-position: 50% 50%;

border: 1px solid;

display: block;

height: auto;

margin: 1em auto 0.25em;

max-width: 25em;

padding-bottom: 0.25em;

text-indent: -9999px;

width: 100%;

}

@media (max-width: 500px) {

h1 {

margin: 0.25em auto;

}

}

@media (max-height: 500px) {

h1 {

margin: 0.25em auto;

}

}

p {

font-size: 2em;

font-weight: 100;

}

.bg {

background-image: -webkit-linear-gradient(315deg, rgba(52, 170, 220, 0.9) 0%, rgba(83, 109, 254, 0.9) 100%), url("https://farm8.staticflickr.com/7337/10007365255_6d0acb9c58_z.jpg");

background-image: linear-gradient(135deg, rgba(52, 170, 220, 0.9) 0%, rgba(83, 109, 254, 0.9) 100%), url("https://farm8.staticflickr.com/7337/10007365255_6d0acb9c58_z.jpg");

background-repeat: no-repeat;

background-position: center center;

background-attachment: fixed;

background-size: cover;

width: 100%;

height: 100%;

position: fixed;

z-index: -1;

}

.sceneWrap {

display: block;

height: 100%;

margin: 0 auto;

max-width: 400px;

max-height: 575px;

padding-top: 2em;

width: 100%;

position: relative;

}

@media (max-width: 500px) {

.sceneWrap {

max-height: 350px;

}

}

.jet-pack {

display: block;

font-size: 1rem;

left: 50%;

position: absolute;

text-align: center;

top: 70%;

-webkit-transform: translate(-50%, -50%) rotateZ(5deg);

transform: translate(-50%, -50%) rotateZ(5deg);

}

@media (max-width: 500px) {

.jet-pack {

font-size: 0.75rem;

}

}

@media (max-height: 387px) {

.jet-pack {

-webkit-transform: translate(-50%, 0%) rotateZ(5deg);

transform: translate(-50%, 0%) rotateZ(5deg);

}

}

.jet-pack:before {

background: #fff;

content: '';

display: inline-block;

height: 2.25em;

left: 50%;

position: absolute;

top: 50%;

-webkit-transform: translate(-50%, 25%);

-ms-transform: translate(-50%, 25%);

transform: translate(-50%, 25%);

width: 6em;

}

.jet-pack:after {

background-image: -webkit-linear-gradient(#4380d7 0%, rgba(67, 128, 215, 0.9) 50%, rgba(83, 109, 254, 0) 100%);

background-image: linear-gradient(#4380d7 0%, rgba(67, 128, 215, 0.9) 50%, rgba(83, 109, 254, 0) 100%);

border-radius: 15%;

content: '';

display: inline-block;

height: 8em;

left: 50%;

position: absolute;

top: 50%;

-webkit-transform: translate(-50%, 20%);

-ms-transform: translate(-50%, 20%);

transform: translate(-50%, 20%);

width: 5.65em;

}

@media (max-width: 500px) {

.jet-pack:after {

background: #4289d5;

}

}

.jet-body {

background: #fff;

border-top-right-radius: 60% 50%;

border-top-left-radius: 60% 50%;

border-bottom-left-radius: 60% 50%;

border-bottom-right-radius: 60% 50%;

display: inline-block;

height: 8.5em;

position: relative;

width: 3.25em;

z-index: 3;

}

.jet-body:after {

border-left: 0.65em solid transparent;

border-right: 0.65em solid transparent;

border-top: 1.75em solid #acc7ed;

content: "";

display: inline-block;

height: 0.5em;

left: 50%;

position: absolute;

top: 9em;

-webkit-transform: translate(-50%, 0);

-ms-transform: translate(-50%, 0);

transform: translate(-50%, 0);

z-index: 6;

-webkit-animation: flame-animation 0.2s linear infinite;

animation: flame-animation 0.2s linear infinite;

}

.jet-body:before {

border-left: 0.5em solid transparent;

border-right: 0.5em solid transparent;

border-bottom: 1.1em solid #fff;

content: "";

display: inline-block;

left: 50%;

position: absolute;

top: 8em;

-webkit-transform: translate(-50%, 0);

-ms-transform: translate(-50%, 0);

transform: translate(-50%, 0);

width: 0.2em;

z-index: 10;

}

.jet-wing-top-circle {

background: #4380d7;

border-radius: 50%;

box-shadow: inset -0.14em -0.2em 0.25em rgba(255, 255, 255, 0.24), inset -0.4em -0.2em 0.25em rgba(255, 255, 255, 0.4), inset -0.4em -0.2em 1em rgba(52, 170, 220, 0.5);

display: block;

height: 1.7em;

left: 50%;

position: absolute;

top: 2.5em;

-webkit-transform: translate(-50%, 0);

-ms-transform: translate(-50%, 0);

transform: translate(-50%, 0);

width: 1.7em;

}

.jet-wing-top-circle:before,

.jet-wing-top-circle:after {

border-bottom: 0.3em solid transparent;

border-top: 1.5em solid transparent;

border-right: 1.8em solid #fff;

content: "";

height: 0;

left: -1.9em;

position: absolute;

top: 0.9em;

-webkit-transform: rotate(-8deg);

-ms-transform: rotate(-8deg);

transform: rotate(-8deg);

width: 0;

}

.jet-wing-top-circle:after {

border-bottom: 0.3em solid transparent;

border-top: 1.5em solid transparent;

border-left: 1.8em solid #fff;

border-right: 0;

left: auto;

right: -1.9em;

-webkit-transform: rotate(8deg);

-ms-transform: rotate(8deg);

transform: rotate(8deg);

}

.smoke {

background: #fff;

border-left: 1px solid #75c5e7;

border-right: 1px solid #75c5e7;

bottom: -75%;

height: 6em;

left: 50%;

position: absolute;

-webkit-transform: translate(-50%, 0);

-ms-transform: translate(-50%, 0);

transform: translate(-50%, 0);

width: 1em;

z-index: 2;

}

.smoke:before,

.smoke:after {

background: #fff;

border-left: 1px solid rgba(52, 170, 220, 0.05);

border-right: 1px solid rgba(52, 170, 220, 0.02);

content: '';

height: 6em;

left: 50%;

position: absolute;

width: 0.2em;

}

.smoke:after {

left: auto;

right: 50%;

}

.smoke-bubble,

.smoke-bubble:before,

.smoke-bubble:after {

background: #fff;

border-radius: 50%;

bottom: -1em;

display: block;

height: 3em;

left: -1em;

position: absolute;

width: 3em;

-webkit-animation: smoke-animation 0.3s linear infinite alternate-reverse;

animation: smoke-animation 0.3s linear infinite alternate-reverse;

}

.smoke-bubble:after {

bottom: -0.25em;

content: '';

height: 2.5em;

width: 2.5em;

-webkit-animation-delay: 0.1s;

animation-delay: 0.1s;

}

.smoke-bubble:before {

bottom: -0.25em;

content: '';

height: 2.15em;

left: auto;

right: -0.5em;

width: 2.15em;

-webkit-animation-delay: 0.5s;

animation-delay: 0.5s;

}

.needle {

border-left: 0.5em solid transparent;

border-right: 0.5em solid transparent;

border-bottom: 3.1em solid #fff;

height: 0;

left: 50%;

position: absolute;

top: -10.25em;

-webkit-transform: translate(-50%, 0);

-ms-transform: translate(-50%, 0);

transform: translate(-50%, 0);

width: 0;

z-index: -1;

}

.needle:after {

border: 1px solid rgba(255, 255, 255, 0.3);

border-radius: 50%;

box-shadow: inset 0 -0.0625em -0.125em #fff, inset 0 -0.9375em 0.3125em rgba(255, 255, 255, 0.9), inset 0 -1.25em 0.625em rgba(52, 170, 220, 0.5);

content: "";

height: 14em;

left: 50%;

position: absolute;

top: 100%;

-webkit-transform: translate(-50%, 28%);

-ms-transform: translate(-50%, 28%);

transform: translate(-50%, 28%);

width: 14em;

-webkit-animation: up-down-animation 0.15s linear infinite alternate-reverse;

animation: up-down-animation 0.15s linear infinite alternate-reverse;

}

.flag {

background: rgba(255, 255, 255, 0.9);

border-radius: 50%;

height: 2em;

left: -0.05em;

position: absolute;

top: 5em;

-webkit-transform: rotateZ(-25deg);

transform: rotateZ(-25deg);

width: 2em;

-webkit-animation: round-animation 2s linear infinite alternate-reverse;

animation: round-animation 2s linear infinite alternate-reverse;

}

.flag:before,

.flag:after {

background: rgba(255, 255, 255, 0.9);

border-radius: 50%;

content: "";

height: 1.5em;

position: absolute;

right: 2em;

top: -0.5em;

width: 1.5em;

}

.flag:after {

right: 0;

top: -0.5em;

}

@-webkit-keyframes load-animation {

0% {

opacity: 0;

-webkit-transform: scale(0.75, 0.75);

transform: scale(0.75, 0.75);

}

100% {

opacity: 1;

-webkit-transform: scale(1, 1);

transform: scale(1, 1);

}

}

@keyframes load-animation {

0% {

opacity: 0;

-ms-transform: scale(0.75, 0.75);

-webkit-transform: scale(0.75, 0.75);

transform: scale(0.75, 0.75);

}

100% {

opacity: 1;

-ms-transform: scale(1, 1);

-webkit-transform: scale(1, 1);

transform: scale(1, 1);

}

}

@-webkit-keyframes flame-animation {

100% {

border-top-width: 1.9em;

border-left-width: 0.5em;

border-left-width: 0.5em;

}

}

@keyframes flame-animation {

100% {

border-top-width: 1.9em;

border-left-width: 0.5em;

border-left-width: 0.5em;

}

}

@-webkit-keyframes smoke-animation {

0% {

-webkit-transform: scale(0.95, 0.95);

transform: scale(0.95, 0.95);

}

100% {

-webkit-transform: scale(1, 1);

transform: scale(1, 1);

}

}

@keyframes smoke-animation {

0% {

-ms-transform: scale(0.95, 0.95);

-webkit-transform: scale(0.95, 0.95);

transform: scale(0.95, 0.95);

}

100% {

-ms-transform: scale(1, 1);

-webkit-transform: scale(1, 1);

transform: scale(1, 1);

}

}

@-webkit-keyframes round-animation {

0% {

left: 1em;

opacity: 0;

top: 5em;

-webkit-transform: scale(0.95, 0.95);

transform: scale(0.95, 0.95);

}

25% {

left: -0.5em;

opacity: 1;

top: 5em;

-webkit-transform: scale(1, 1);

transform: scale(1, 1);

}

75% {

left: 1em;

opacity: 0;

top: 5em;

-webkit-transform: scale(0.95, 0.95);

transform: scale(0.95, 0.95);

}

100% {

left: -0.5;

opacity: 1;

top: 5em;

-webkit-transform: scale(1, 1);

transform: scale(1, 1);

}

}

@keyframes round-animation {

0% {

left: 1em;

opacity: 0;

top: 5em;

-ms-transform: scale(0.95, 0.95);

-webkit-transform: scale(0.95, 0.95);

transform: scale(0.95, 0.95);

}

25% {

left: -0.5em;

opacity: 1;

top: 5em;

-ms-transform: scale(1, 1);

-webkit-transform: scale(1, 1);

transform: scale(1, 1);

}

75% {

left: 1em;

opacity: 0;

top: 5em;

-ms-transform: scale(0.95, 0.95);

-webkit-transform: scale(0.95, 0.95);

transform: scale(0.95, 0.95);

}

100% {

left: -0.5;

opacity: 1;

top: 5em;

-ms-transform: scale(1, 1);

-webkit-transform: scale(1, 1);

transform: scale(1, 1);

}

}

@-webkit-keyframes up-down-animation {

0% {

box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.95), inset 0 -15px 5px rgba(255, 255, 255, 0.9), inset 0 -20px 10px rgba(52, 170, 220, 0.5);

}

100% {

box-shadow: inset 0 -1px 2px #fff, inset 0 -17px 5px rgba(255, 255, 255, 0.95), inset 0 -22px 12px rgba(52, 170, 220, 0.6);

}

}

@keyframes up-down-animation {

0% {

box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.95), inset 0 -15px 5px rgba(255, 255, 255, 0.9), inset 0 -20px 10px rgba(52, 170, 220, 0.5);

}

100% {

box-shadow: inset 0 -1px 2px #fff, inset 0 -17px 5px rgba(255, 255, 255, 0.95), inset 0 -22px 12px rgba(52, 170, 220, 0.6);

}

}

吴域
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
用css3实现一个会飞的小火箭案例
qq_42181069的博客
05-21 2027
1、css3中我们常用到的一个属性是transform，也就是我们常常所用的缩放，平移，旋转等2D动画，接下来就用这几个变换个给大家做一个小案例，效果图如下：2、html代码：<body> <img src="../img/rocket.png" alt=""> </body>3、css代码：<style> html, bod...
纯css3模拟土星五号火箭发射3d动画
ICode联盟
06-24 253
下载地址纯css3模拟土星五号火箭发射3d动画，逼真的火箭升空css3动画。dd:
火箭月亮html5游戏,HTML5 svg和CSS3炫酷火箭升空动画特效
weixin_30119911的博客
05-31 321
这是一款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:...
用css3做一个模拟火箭飞行的简单动画。
weixin_44717047的博客
04-16 867
用css3做一个模拟火箭飞行的简单动画。
纯css3火箭准备升空js特效
ICode联盟
07-08 235
下载地址纯css3火箭准备升空特效，带动画效果的火箭升空代码。dd:
css3 svg卡通火箭发射升空动画特效
06-11
css3基于svg绘制的一款卡通火箭发射升空动画特效，在一个圆内的火箭飞行动画场景，背景还有星星。
CSS3 SVG卡通火箭横向飞行动画特效
06-11
这个“CSS3 SVG卡通火箭横向飞行动画特效”就是一种创新的实现方式，它结合了CSS3和SVG（可缩放矢量图形）的技术，为网页增添生动有趣的视觉元素。 **CSS3：现代网页样式之魂** CSS3是CSS（层叠样式表）的最新版本...
CSS3 SVG火箭横线元素动画特效特效代码
03-20
**CSS3 SVG火箭横线元素动画特效详解** 在现代网页设计中，动态视觉效果是吸引用户注意力和提升用户体验的重要手段。CSS3与SVG（可缩放矢量图形）的结合，为开发者提供了丰富的动画和图形设计能力。本篇将深入探讨...
宇宙空间粒子CSS3动画特效
07-24
宇宙空间粒子CSS3动画特效是一种基于CSS3技术的创新视觉效果，它利用了CSS3的动画属性和特性来创建出仿佛置身于星辰大海般的粒子流动景象。这种特效为网页设计增添了深度和动态感，使用户在浏览网页时能感受到一种...
css3 svg火箭飞行动画特效特效代码
03-20
在本文中，我们将深入探讨如何使用CSS3和SVG创建火箭飞行动画特效。CSS3（层叠样式表第三版）是Web设计中的一个重要工具，它提供了丰富的样式控制和动态效果，而SVG（可缩放矢量图形）则是一种用于创建高质量图形的...
火箭倒计时发射CSS3特效
06-24
火箭倒计时发射CSS3特效是一款基于HTML5+CSS3实现的火箭三二一倒计时发射动画特效。
纯CSS3制作飞舞的火箭动画特效代码
03-20
使用方法： 1、将style.css中的样式复制到你的样式表中 2、将body中的代码部分拷贝到你需要的地方即可
HTML5射箭小游戏源码
06-06
对学习canvas编程很有好处，很好的射箭游戏源码，很好玩
我用CSS画了个火箭送嫦娥妹妹回家
Mq_sir的博客
09-18 393
我用CSS画了个火箭送嫦娥妹妹回家 就在8月17号我国神州十二号载人飞船顺利回家。又恰逢中秋佳节，真是值得庆祝的一天。我这灵机一动，就想着开火箭送嫦娥妹妹回家，哈哈~ 先来看看简陋的作品。 接下来看看怎么实现 一、元素 <body> <div class="moon"></div> <div class="rocket"> <div class="left"></div> <div
css动画实战---火箭在宇宙穿梭
一粒程序米
07-13 274
动画用法 animation: zd .4s linear 0s infinite alternate; @keyframes zd { from { transform: translateX(-20px) translateY(-20px); } to { transform: translateX(20px) translateY(20px); .
css小项目编写1-----火箭动态实现
最新发布
money_monkey的博客
08-03 480
火箭特效
CSS模仿无线路由器发射信号动画
qq_28223305的博客
11-23 1593
先上图 下面是代码 无标题文档 .box{width: 595px;height: 357px; border:1px solid; position:relative} .box div{ background:url(summary-wifi-icon.png) no-repeat 50% 50%;opacity:0; width: 595px; positio
【缅怀钱老】学习实现炫酷漂亮的火箭发射效果
战场小包的博客
11-01 659
缅怀钱学森钱老先生逝世十二周年。 学习实现火箭发射效果：包括火箭主体部分绘制、火箭发射部分。 内含源码。
css实现动画效果（B站回顶小火箭是如何实现hover特效的？+实现平泽唯摆手表情包
前端小白学习中...
12-10 1377
今天在打开B站学习时发现按钮回顶的特效很有意思，于是来搞个事情（众所周知，B站是个学习网站 就是用蓝色方框标注的，随便搜点啥往下划划就能看见安安静静呆在角落的小火箭????。 回顶效果比较常见，但是hover之后能够看到小火箭蓄势待发的样子，就很有意思 我就对这个的实现有点好奇，于是就打开了控制台开始摸鱼????（学习 上图的是hover小火箭的状态，可以看到两个样式 rocket-con 和 fly，而在fly中又可以看到有个animation，那么形势就比较明了了 在打开图片链接看看，展
CSS3动画与JavaScript跨域实操指南
本PPT深入探讨了CSS3动画和JavaScript跨域的相关知识，适合软件工程专业的学生和开发人员参考。它由zxh计算机科学与工程学院在2016年8月24日分享，旨在提升对这两个领域的理解。 CSS3动画部分首先介绍了动画的基础...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值