纯css实现烟雾动画效果
代码语言：html
所属分类：动画
代码描述：纯css实现烟雾动画效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap'>
<style>
body {
background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
height: 100vh;
overflow: hidden;
display: -webkit-box;
display: flex;
font-family: 'Permanent Marker', cursive;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
-webkit-perspective: 600px;
perspective: 600px;
}
div {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.title {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 1;
font-size: 3rem;
mix-blend-mode: difference;
color: #f5c864;
}
.title::before {
content: 'smokey';
position: absolute;
}
.camera.-y {
-webkit-animation: rotateY 10s linear infinite;
animation: rotateY 10s linear infinite;
}
.box {
position: relative;
width: 250px;
height: 450px;
-webkit-transform: translateY(-100px);
transform: translateY(-100px);
}
.shooting {
position: absolute;
width: 5px;
height: 50%;
-webkit-animation: shoot 9s linear infinite;
animation: shoot 9s linear infinite;
}
.graphic {
position: absolute;
width: 100%;
height: 100%;
border-radius: 99px;
background: #fff;
background: -webkit-gradient(linear, left bottom, left top, from(rgba(140, 150, 200, 0)), to(#28e6fa));
background: linear-gradient(0deg, rgba(140, 150, 200, 0), #28e6fa);
-webkit-filter: blur(10px) contrast(99);
filter: blur(10px) contrast(99);
}
.depth {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
.depth:nth-child(1) {
-webkit-transform: rotateY(150deg) translateZ(-97px);
transform: rotateY(150deg) translateZ(-97px);
}
.depth:nth-child(1) .shooting {
left: 32%;
-webkit-animation-delay: -8361ms;
animation-delay: -8361ms;
}
.depth:nth-child(2) {
-webkit-transform: rotateY(268deg) translateZ(16px);
transform: rotateY(268deg) translateZ(16px);
}
.depth:nth-child(2) .shooting {
left: 65%;
-webkit-animation-delay: -4069ms;
animation-delay: -4069ms;
}
.depth:nth-child(3) {
-webkit-transform: rotateY(275deg) translateZ(-65px);
transform: rotateY(275deg) translateZ(-65px);
}
.depth:nth-child(3) .shooting {
left: 43%;
-webkit-animation-delay: -8541ms;
animation-delay: -8541ms;
}
.depth:nth-child(4) {
-webkit-transform: rotateY(12deg) translateZ(-54px);
transform: rotateY(12deg) translateZ(-54px);
}
.depth:nth-child(4) .shooting {
left: 46%;
-webkit-animation-delay: -2950ms;
animation-delay: -2950ms;
}
.depth:nth-child(5) {
-webkit-transform: rotateY(357deg) translateZ(41px);
transform: rotateY(357deg) translateZ(41px);
}
.depth:nth-child(5) .shooting {
left: 34%;
-webkit-animation-delay: -2819ms;
animation-delay: -2819ms;
}
.depth:nth-child(6) {
-webkit-transform: rotateY(97deg) translateZ(-82px);
transform: rotateY(97deg) translateZ(-82px);
}
.depth:nth-child(6) .shooting {
left: 60%;
-webkit-animation-delay: -6343ms;
animation-delay: -6343ms;
}
.depth:nth-child(7) {
-webkit-transform: rotateY(318deg) translateZ(-89px);
transform: rotateY(318deg) translateZ(-89px);
}
.depth:nth-child(7) .shooting {
left: 67%;
-webkit-animation-delay: -9946ms;
animation-delay: -9946ms;
}
.depth:nth-child(8) {
-webkit-transform: rotateY(328deg) translateZ(48px);
transform: rotateY(328deg) translateZ(48px);
}
.depth:nth-child(8) .shooting {
left: 66%;
-webkit-animation-delay: -3306ms;
animation-delay: -3306ms;
}
.depth:nth-child(9) {
-webkit-transform: rotateY(129deg) translateZ(36px);
transform: rotateY(129deg) translateZ(36px);
}
.depth:nth-child(9) .shooting {
left: 59%;
-webkit-animation-delay: -5646ms;
animation-delay: -5646ms;
}
.depth:nth-child(10) {
-webkit-transform: rotateY(175deg) translateZ(62px);
transform: rotateY(175deg) translateZ(62px);
}
.depth:nth-child(10) .shooting {
left: 33%;
-webkit-animation-delay: -3879ms;
animation-delay: -3879ms;
}
.depth:nth-child(11) {
-webkit-transform: rotateY(117deg) translateZ(43px);
transform: rotateY(117deg) translateZ(43px);
}
.depth:nth-child(11) .shooting {
left: 61%;
-webkit-animation-delay: -6959ms;
animation-delay: -6959ms;
}
.depth:nth-child(12) {
-webkit-transform: rotateY(23deg) translateZ(-34px);
transform: rotateY(23deg) translateZ(-34px);
}
.depth:nth-child(12) .shooting {
left: 52%;
-webkit-animation-delay: -7965ms;
animation-delay: -7965ms;
}
.depth:nth-child(13) {
-webkit-transform: rotateY(176deg) translateZ(-37px);
transform: rotateY(176deg) translateZ(-37px);
}
.depth:nth-child(13) .shooting {
left: 69%;
-webkit-animation-delay: -3107ms;
animation-delay: -3107ms;
}
.depth:nth-child(14) {
-webkit-transform: rotateY(207deg) translateZ(7px);
transform: rotateY(207deg) translateZ(7px);
}
.depth:nth-child(14) .shooting {
left: 54%;
-webkit-animation-delay: -6092ms;
animation-delay: -6092ms;
}
.depth:nth-child(15) {
-webkit-transform: rotateY(230deg) translateZ(-74px);
transform: rotateY(230deg) translateZ(-74px);
}
.depth:nth-child(15) .shooting {
left: 33%;
-webkit-animation-delay: -9752ms;
animation-delay: -9752ms;
}
.depth:nth-child(16) {
-webkit-transform: rotateY(78deg) translateZ(7px);
transform: rotateY(78deg) translateZ(7px);
}
.depth:nth-child(16) .shooting {
left: 37%;
-webkit-animation-delay: -749ms;
animation-delay: -749ms;
}
.depth:nth-child(17) {
-webkit-transform: rotateY(120deg) translateZ(65px);
transform: rotateY(120deg) translateZ(65px);
}
.depth:nth-child(17) .shooting {
left: 42%;
-webkit-animation-delay: -4089ms;
animation-delay: -4089ms;
}
.depth:nth-child(18) {
-webkit-transform: rotateY(205deg) translateZ(71px);
transform: rotateY(205deg) translateZ(71px);
}
.depth:nth-child(18) .shooting {
left: 50%;
-webkit-animation-delay: -623ms;
animation-delay: -623ms;
}
.depth:nth-child(19) {
-webkit-transform: rotateY(8deg) translateZ(-86px);
transform: rotateY(8deg) translateZ(-86px);
}
.depth:nth-child(19) .shooting {
left: 54%;
-webkit-animation-delay: -668ms;
animation-delay: -668ms;
}
.depth:nth-child(20) {
-webkit-transform: rotateY(302deg) translateZ(6px);
transform: rotateY(302deg) translateZ(6px);
}
.depth:nth-child(20) .shooting {
left: 44%;
-webkit-animation-delay: -2293ms;
animation-delay: -2293ms;
}
.depth:nth-child(21) {
-webkit-transform: rotateY(248deg) translateZ(-31px);
transform: rotateY(248deg) translateZ(-31px);
}
.depth:nth-child(21) .shooting {
left: 59%;
-webkit-animation-delay: -3455ms;
animation-delay: -3455ms;
}
.depth:nth-child(22) {
-webkit-transform: rotateY(199deg) translateZ(-45px);
transform: rotateY(199deg) translateZ(-45px);
}
.depth:nth-child(22) .shooting {
left: 57%;
-webkit-animation-delay: -7945ms;
animation-delay: -7945ms;
}
.depth:nth-child(23) {
-webkit-transform: rotateY(118deg) translateZ(89px);
transform: rotateY(118deg) translateZ(89px);
}
.depth:nth-child(23) .shooting {
left: 33%;
-webkit-animation-delay: -8204ms;
animation-delay: -8204ms;
}
.depth:nth-child(24) {
-webkit-transform: rotateY(136deg) translateZ(33px);
transform: rotateY(136deg) translateZ(33px);
}
.depth:nth-child(24) .shooting {
left: 31%;
-webkit-animation-delay: -1818ms;
animation-delay: -1818ms;
}
.depth:nth-child(25) {
-webkit-transform: rotateY(109deg) translateZ(-63px);
transform: rotateY(109deg) translateZ(-63px);
}
.depth:nth-child(25) .shooting {
left: 64%;
-webkit-animation-delay: -3503ms;
animation-delay: -3503ms;
}
.depth:nth-child(26) {
-webkit-transform: rotateY(50deg) translateZ(-3px);
transform: rotateY(50deg) translateZ(-3px);
}
.depth:nth-child(26) .shooting {
left: 69%;
-webkit-animation-delay: -275ms;
animation-delay: -275ms;
}
.depth:nth-child(27) {
-webkit-transform: rotateY(184deg) translateZ(-90px);
transform: rotateY(184deg) translateZ(-90px);
}
.depth:nth-child(27) .shooting {
left: 46%;
-webkit-animation-delay: -721ms;
animation-delay: -721ms;
}
.depth:nth-child(28) {
-webkit-transform: rotateY(1deg) translateZ(14px);
transform: rotateY(1deg) translateZ(14px);
}
.depth:nth-child(28) .shooting {
left: 35%;
-webkit-animation-delay: -5982ms;
animation-delay: -5982ms;
}
.depth:nth-child(29) {
-webkit-transform: rotateY(212deg) translateZ(12px);
transform: rotateY(212deg) translateZ(12px);
}
.depth:nth-child(29) .shooting {
left: 65%;
-webkit-animation-delay: -5507ms;
animation-delay: -5507ms;
}
.depth:nth-child(30) {
-webkit-transform: rotateY(41deg) translateZ(-31px);
transform: rotateY(41deg) translateZ(-31px);
}
.depth:nth-child(30) .shooting {
left: 54%;
-webkit-animation-delay: -3645ms;
animation-delay: -3645ms;
}
.depth:nth-child(31) {
-webkit-transform: rotateY(31deg) translateZ(-81px);
transform: rotateY(31deg) translateZ(-81px);
}
.depth:nth-child(31) .shooting {
left: 40%;
-webkit-animation-delay: -6020ms;
animation-delay: -6020ms;
}
.depth:nth-child(32) {
-webkit-transform: rotateY(261deg) translateZ(-10px);
transform: rotateY(261deg) translateZ(-10px);
}
.depth:nth-child(32) .shooting {
left: 49%;
-webkit-animation-delay: -9061ms;
animation-delay: -9061ms;
}
.depth:nth-child(33) {
-webkit-transform: rotateY(357deg) translateZ(24px);
transform: rotateY(357deg) translateZ(24px);
}
.depth:nth-child(33) .shooting {
left: 41%;
-webkit-animation-delay: -2285ms;
animation-delay: -2285ms;
}
.depth:nth-child(34) {
-webkit-transform: rotateY(27deg) translateZ(-70px);
transform: rotateY(27deg) translateZ(-70px);
}
.depth:nth-child(34) .shooting {
left: 40%;
-webkit-animation-delay: -8912ms;
animation-delay: -8912ms;
}
.depth:nth-child(35) {
-webkit-transform: rotateY(282deg) translateZ(37px);
transform: rotateY(282deg) translateZ(37px);
}
.depth:nth-child(35) .shooting {
left: 33%;
-webkit-animation-delay: -9941ms;
animation-delay: -9941ms;
}
.depth:nth-child(36) {
-webkit-transform: rotateY(313deg) translateZ(-69px);
transform: rotateY(313deg) translateZ(-69px);
}
.depth:nth-child(36) .shooting {
left: 46%;
-webkit-animation-delay: -5700ms;
animation-delay: -5700ms;
}
.depth:nth-child(37) {
-webkit-transform: rotateY(306deg) translateZ(57px);
transform: rotateY(306deg) translateZ(57px);
}
.depth:nth-child(37) .shooting {
left: 52%;
-webkit-animation-delay: -5699ms;
animation-delay: -5699ms;
}
.depth:nth-child(38) {
-webkit-transform: rotateY(266deg) translateZ(29px);
transform: rotateY(266deg) translateZ(29px);
}
.depth:nth-child(38) .shooting {
left: 33%;
-webkit-animation-delay: -7988ms;
animation-delay: -7988ms;
}
.depth:nth-child(39) {
-webkit-transform: rotateY(54deg) translateZ(-18px);
transform: rotateY(54deg) translateZ(-18px);
}
.depth:nth-child(39) .shooting {
left: 37%;
-webkit-animation-delay: -5444ms;
animation-delay: -5444ms;
}
.depth:nth-child(40) {
-webkit-transform: rotateY(195deg) translateZ(-78px);
transform: rotateY(195deg) translateZ(-78px);
}
.depth:nth-child(40) .shooting {
left: 35%;
-webkit-animation-delay: -1968ms;
animation-delay: -1968ms;
}
.depth:nth-child(41) {
-webkit-transform: rotateY(145deg) translateZ(57px);
transform: rotateY(145deg) translateZ(57px);
}
.depth:nth-child(41) .shooting {
left: 53%;
-webkit-animation-delay: -8657ms;
animation-delay: -8657ms;
}
.depth:nth-child(42) {
-webkit-transform: rotateY(345deg) translateZ(87px);
transform: rotateY(345deg) translateZ(87px);
}
.depth:nth-child(42) .shooting {
left: 52%;
-webkit-animation-delay: -6781ms;
animation-delay: -6781ms;
}
.depth:nth-child(43) {
-webkit-transform: rotateY(358deg) translateZ(-94px);
transform: rotateY(358deg) translateZ(-94px);
}
.depth:nth-child(43) .shooting {
left: 40%;
-webkit-animation-delay: -6937ms;
animation-delay: -6937ms;
}
.depth:nth-child(44) {
-webkit-transform: rotateY(348deg) translateZ(-92px);
transform: rotateY(348deg) translateZ(-92px);
}
.depth:nth-child(44) .shooting {
left: 42%;
-webkit-animation-delay: -2599ms;
animation-delay: -2599ms;
}
.depth:nth-child(45) {
-webkit-transform: rotateY(10deg) translateZ(-78px);
transform: rotateY(10deg) translateZ(-78px);
}
.depth:nth-child(45) .shooting {
left: 55%;
-webkit-animation-delay: -8148ms;
animation-delay: -8148ms;
}
.depth:nth-child(46) {
-webkit-transform: rotateY(144deg) translateZ(12px);
transform: rotateY(144deg) translateZ(12px);
}
.depth:nth-child(46) .shooting {
left: 56%;
-webkit-animation-delay: -8099ms;
animation-delay: -8099ms;
}
.depth:nth-child(47) {
-webkit-transform: rotateY(91deg) translateZ(21px);
transform: rotateY(91deg) translateZ(21px);
}
.depth:nth-child(47) .shooting {
left: 69%;
-webkit-animation-delay: -4710ms;
animation-delay: -4710ms;
}
.depth:nth-child(48) {
-webkit-transform: rotateY(3deg) translateZ(-32px);
transform: rotateY(3deg) translateZ(-32px);
}
.depth:nth-child(48) .shooting {
left: 34%;
-webkit-animation-delay: -1827ms;
animation-delay: -1827ms;
}
.depth:nth-child(49) {
-webkit-transform: rotateY(349deg) translateZ(47px);
transform: rotateY(349deg) translateZ(47px);
}
.depth:nth-child(49) .shooting {
left: 37%;
-webkit-animation-delay: -1744ms;
animation-delay: -1744ms;
}
.depth:nth-child(50) {
-webkit-transform: rotateY(96deg) translateZ(88px);
transform: rotateY(96deg) translateZ(88px);
}
.depth:nth-child(50) .shooting {
left: 37%;
-webkit-animation-delay: -7503ms;
animation-delay: -7503ms;
}
.depth:nth-child(51) {
-webkit-transform: rotateY(201deg) translateZ(35px);
transform: rotateY(201deg) translateZ(35px);
}
.depth:nth-child(51) .shooting {
left: 39%;
-webkit-animation-delay: -9630ms;
animation-delay: -9630ms;
}
.depth:nth-child(52) {
-webkit-transform: rotateY(349deg) translateZ(74px);
transform: rotateY(349deg) translateZ(74px);
}
.depth:nth-child(52) .shooting {
left: 68%;
-webkit-animation-delay: -8337ms;
animation-delay: -8337ms;
}
.depth:nth-child(53) {
-webkit-transform: rotateY(20deg) translateZ(-9px);
transform: rotateY(20deg) translateZ(-9px);
}
.depth:nth-child(53) .shooting {
left: 52%;
-webkit-animation-delay: -3001ms;
animation-delay: -3001ms;
}
.depth:nth-child(54) {
-webkit-transform: rotateY(212deg) translateZ(-83px);
transform: rotateY(212deg) translateZ(-83px);
}
.depth:nth-child(54) .shooting {
left: 42%;
-webkit-animation-delay: -9009ms;
animation-delay: -9009ms;
}
.depth:nth-child(55) {
-webkit-transform: rotateY(22deg) translateZ(3px);
transform: rotateY(22deg) translateZ(3px);
}
.depth:nth-child(55) .shooting {
left: 42%;
-webkit-animation-delay: -9367ms;
animation-delay: -9367ms;
}
.depth:nth-child(56) {
-webkit-transform: rotateY(298deg) translateZ(58px);
transform: rotateY(298deg) translateZ(58px);
}
.depth:nth-child(56) .shooting {
left: 47%;
-webkit-animation-delay: -1676ms;
animation-delay: -1676ms;
}
.depth:nth-child(57) {
-webkit-transform: rotateY(286deg) translateZ(30px);
transform: rotateY(286deg) translateZ(30px);
}
.depth:nth-child(57) .shooting {
left: 46%;
-webkit-animation-delay: -9194ms;
animation-delay: -9194ms;
}
.depth:nth-child(58) {
-webkit-transform: rotateY(115deg) translateZ(-63px);
transform: rotateY(115deg) translateZ(-63px);
}
.depth:nth-child(58) .shooting {
left: 58%;
-webkit-animation-delay: -7447ms;
animation-delay: -7447ms;
}
.depth:nth-child(59) {
-webkit-tr.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0