css3 烟 蚊香_CSS3 冒烟的管道 | 烟囱
CSS
语言：
CSSSCSS
确定
body {
background-color: #30406b;
}
#wrap {
margin-top: 300px;
margin-left: 40%;
z-index: 1;
}
#circle-bg {
z-index: -2;
margin-top: -75px;
margin-left: 75px;
width: 200px;
height: 200px;
background: #c7cbd0;
border-radius: 50%;
position: absolute;
box-shadow: -20px 0 0 0 #9098a1 inset;
}
#ground {
z-index: -4;
position: absolute;
margin-top: 75px;
margin-left: -120px;
border-bottom: 200px solid #c7cbd0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
height: 0;
width: 300px;
}
#ground-front {
position: absolute;
margin-top: 275px;
margin-left: -120px;
width: 500px;
height: 20px;
background: #9098a1;
}
.steam {
position: absolute;
height: 100px;
width: 100px;
border-radius: 50%;
background-color: #fff;
margin-top: -75px;
margin-left: 75px;
z-index: 0;
opacity: 0;
z-index: 1;
}
#steam-one {
-webkit-animation: steam-one 4s ease-out infinite;
animation: steam-one 4s ease-out infinite;
}
#steam-three {
-webkit-animation: steam-one 4s ease-out 1s infinite;
animation: steam-one 4s ease-out 1s infinite;
}
@-webkit-keyframes steam-one {
0% {
transform: translateY(0) translateX(0) scale(0.25);
opacity: 0.2;
}
100% {
transform: translateY(-200px) translateX(-20px) scale(1);
opacity: 0;
}
}
@keyframes steam-one {
0% {
transform: translateY(0) translateX(0) scale(0.25);
opacity: 0.2;
}
100% {
transform: translateY(-200px) translateX(-20px) scale(1);
opacity: 0;
}
}
#steam-two {
-webkit-animation: steam-two 4s ease-out 0.5s infinite;
animation: steam-two 4s ease-out 0.5s infinite;
}
#steam-four {
-webkit-animation: steam-two 4s ease-out 1.5s infinite;
animation: steam-two 4s ease-out 1.5s infinite;
}
@-webkit-keyframes steam-two {
0% {
transform: translateY(0) translateX(0) scale(0.25);
opacity: 0.2;
}
100% {
transform: translateY(-200px) translateX(20px) scale(1);
opacity: 0;
}
}
@keyframes steam-two {
0% {
transform: translateY(0) translateX(0) scale(0.25);
opacity: 0.2;
}
100% {
transform: translateY(-200px) translateX(20px) scale(1);
opacity: 0;
}
}
.tank {
position: relative;
margin: 85px;
}
.tank .middle {
width: 120px;
height: 180px;
background-color: #444;
position: absolute;
}
.tank .into {
width: 80px;
height: 30px;
background-color: #444;
-moz-border-radius: 60px / 25px;
-webkit-border-radius: 60px / 25px;
border-radius: 60px / 25px;
position: absolute;
top: -15px;
left: 20px;
}
.tank .top {
width: 120px;
height: 50px;
background-color: #666;
-moz-border-radius: 60px / 25px;
-webkit-border-radius: 60px / 25px;
border-radius: 60px / 25px;
position: absolute;
top: -25px;
}
.tank .bottom {
width: 120px;
height: 50px;
background-color: #444;
-moz-border-radius: 60px / 25px;
-webkit-border-radius: 60px / 25px;
border-radius: 60px / 25px;
position: absolute;
top: 155px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.75)
}
.little-steam {
position: absolute;
height: 60px;
width: 60px;
border-radius: 50%;
background-color: #fff;
margin-top: 5px;
margin-left: 35px;
z-index: 0;
opacity: 0;
z-index: 1;
}
#little-steam-one {
-webkit-animation: little-steam-one 6s ease-out infinite;
animation: little-steam-one 6s ease-out infinite;
}
#little-steam-three {
-webkit-animation: little-steam-one 6s ease-out 1s infinite;
animation: little-steam-one 6s ease-out 1s infinite;
}
@-webkit-keyframes little-steam-one {
0% {
transform: translateY(0) translateX(0) scale(0.1);
opacity: 0.2;
}
100% {
transform: translateY(-175px) translateX(-10px) scale(1);
opacity: 0;
}
}
@keyframes little-steam-one {
0% {
transform: translateY(0) translateX(0) scale(0.1);
opacity: 0.2;
}
100% {
transform: translateY(-175px) translateX(-20px) scale(1);
opacity: 0;
}
}
#little-steam-two {
-webkit-animation: little-steam-two 6s ease-out 0.5s infinite;
animation: little-steam-two 6s ease-out 0.5s infinite;
}
#little-steam-four {
-webkit-animation: little-steam-two 6s ease-out 1.5s infinite;
animation: little-steam-two 6s ease-out 1.5s infinite;
}
@-webkit-keyframes little-steam-two {
0% {
transform: translateY(0) translateX(0) scale(0.15);
opacity: 0.2;
}
100% {
transform: translateY(-175px) translateX(20px) scale(1);
opacity: 0;
}
}
@keyframes little-steam-two {
0% {
transform: translateY(0) translateX(0) scale(0.15);
opacity: 0.2;
}
100% {
transform: translateY(-175px) translateX(20px) scale(1);
opacity: 0;
}
}
.little-tank {
z-index: -1;
position: relative;
margin: 30px;
}
.little-tank .little-middle {
width: 120px;
height: 120px;
background-color: #445;
position: absolute;
top: 35px;
}
.little-tank .little-into {
width: 80px;
height: 30px;
background-color: #445;
-moz-border-radius: 60px / 25px;
-webkit-border-radius: 60px / 25px;
border-radius: 60px / 25px;
position: absolute;
top: 20px;
left: 20px;
}
.little-tank .little-top {
width: 120px;
height: 50px;
background-color: #667;
-moz-border-radius: 60px / 25px;
-webkit-border-radius: 60px / 25px;
border-radius: 60px / 25px;
position: absolute;
top: 10px;
}
.little-tank .little-bottom {
width: 120px;
height: 50px;
background-color: #445;
-moz-border-radius: 60px / 25px;
-webkit-border-radius: 60px / 25px;
border-radius: 60px / 25px;
position: absolute;
top: 130px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.75)
}
css3 烟 蚊香_CSS3 冒烟的管道 | 烟囱相关推荐
- css3 烟 蚊香_css3+js实现烟花绽放的动画效果（代码示例）
本篇文章给大家介绍通过js+css3的transforms属性和keyframes属性来实现烟花绽放的动画效果的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 首先我们来看看效 ...
- css3 烟 蚊香_CSS3实现烟花特效 --web前端
java cookie 工具类 package com.xxx.xxx.xxx.xxx; import java.net.URLDecoder; import java.net.URLEncoder; ...
- css3 烟 蚊香_如何使用纯CSS实现蚊香燃烧的效果（附源码）
本篇文章给大家带来的内容是关于如何使用纯CSS实现传统蚊香燃烧的效果(附源码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览 源代码下载 每日前端实战系列的全部源代码请从 ...
- css3 烟 蚊香_前端每日实战：48# 视频演示如何用纯 CSS 创作一盘传统蚊香
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. 可交互视频教程 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码. 请用 chrome, s ...
- css3 烟 蚊香_如何用纯 CSS 创作一盘传统蚊香
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. 可交互视频教程 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码. 请用 chrome, s ...
- css3 烟 蚊香_HTML5前端特效库 css3 按钮粒子烟花特效源码
效果图 各位长友大家上午好! 今天给大家带来的是 css3 按钮粒子烟花特效源码! 大家可以按照自己的意愿进行修改! 需要文档版本源码,可以加我的HTML5前端交流群111645711 好了,废话不多 ...
- css3价格斜切_CSS3倾斜skew()方法_CSS3教程_绿叶学习网
9.5 倾斜skew()方法 作者(helicopter) 赞(22) 浏览(26434) 说明:原创教程,禁止转载 一.skew()方法 在CSS3中,我们可以使用skew()方法将元素倾斜显示. ...
- css3遮罩层_CSS3鼠标hover图片超酷遮罩层动画特效
这是一款CSS3鼠标hover图片超酷遮罩层动画特效.该特效中,当鼠标悬停在图片上面的时候,左右两个遮罩层会向中间收缩,最后合成一个完整的遮罩层.效果截图如下: HTML代码 Williamson ...
- css3橙色球形_CSS3橙色的星球绕轨道公转动画_html/css_WEB-ITnose -
适用浏览器:360.FireFox.Chrome.Opera.傲游.搜狗.世界之窗等新版浏览器. 来源:何问起 原文 特效 转自:http://hovertree.com/h/bjaf/css3xin ...
- css3波浪纹路_css3线条波浪动画效果
这是一款使用CSS3 animation动画和png图片制作的css3线条波浪动画效果.该特效中,使用了3张波浪线条的png图片,以及少量的CSS代码,制作出逼真的线条波浪动画效果. 使用方法 HTM ...
最新文章
- native react 常用指令_React-Native 常用命令
- Android 中的安全机制
- 【直播资料下载】Python 系列直播——深入Python与日志服务，玩转大规模数据分析处理实战第二讲...
- Eureka Server
- Linux定期执行xshell脚本（入门）
- 理解基本包装类型Number,String,Boolean
- android开发那些事儿（一）
- android okhttp+解析json( okhttp 工具类）
- c51语言编程实验报告,C51单片机实验报告程序.doc
- 计算机不打印怎么回事,打印机无法打印怎么办解决方案
- win10u盘被写保护怎么解除_win10系统U盘提示磁盘被写保护的解决办法
- php 根据身份证计算年龄
- 阿里云国际版账号登录不上去，账号被风控怎么办？
- Oracle怎样创建共享文件夹,OracleVirtualBox虚拟机如何实现文件夹共享
- 《辛雷学习方法》读书笔记——第三章 身体
- 直流电机驱动电路中L298与电机间二极管的作用
- OBS录屏如何设置录制窗口大小？
- 2022年特色小镇行业研究报告
- loadrunner之virtual user generator的使用
- 帝云CMS-免费可商用的万能PHP建站程序
热门文章
- 鸿蒙系统的正式推送范围,华为鸿蒙系统或6月正式推送升级，手机版已开始小范围推送...
- @value取不到值_Bamboo window上环境变量 HOMEDRIVE 及 HOMEPATH 获取不到的问题
- BIO、NIO、AIO的简单个人理解，同步异步和阻塞非阻塞的简单理解
- ajajx请求php能设置cookie,为什么在AJAX请求返回后浏览器没有设置cookie？
- WPF Bitmap转成Imagesource的性能优化
- 虚拟化技术在企业中的实际应用
- 以太坊上海协议之——达成Cosmos网络实现以太坊扩容协议
- Opera 首个 “重生” 版本亮相：启用全新用户界面
- java程序调用xfire发布的webService服务（二）
- [c++] polymorphism without virtual function