css实现万圣节动画效果代码
代码语言：html
所属分类：动画
代码描述：css实现万圣节动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body{
margin:0;
color:#444;
background-color:#413478;
font:300 18px/18px Roboto, sans-serif;
}
*,:after,:before{box-sizing:border-box}
.pull-left{float:left}
.pull-right{float:right}
.clearfix:after,.clearfix:before{content:'';display:table}
.clearfix:after{clear:both;display:block}
.wrap *:before,.wrap *:after{content:'';position:absolute}
.wrap{
top:50%;
left:50%;
width:420px;
height:420px;
position:fixed;
margin-top:-210px;
margin-left:-210px;
border-radius:50%;
-webkit-transform:scale(.8);
transform:scale(.8);
background-color:#6652bd;
}
.wrap .bottom:before{
right:40px;
height:90px;
width:300px;
bottom:24px;
position:absolute;
background-color:#56459e;
border-radius:90px 90px 0 0;
}
.wrap .bottom:after{
left:50%;
bottom:0;
z-index:2;
width:560px;
height:28px;
border-radius:28px;
margin-left:-280px;
background-color:#362f52;
}
[class*="star-"]{position:absolute;width:8px;height:8px;background-color:#56459e;border-radius:50%;filter:blur(.55px);-webkit-filter:blur(.55px)}
[class*="star-"]:before,[class*="star-"]:after{left:50%;top:50%;margin-top:-1px;margin-left:-8px;height:2px;width:16px;border-top:1px solid #56459e}
[class*="star-"]:after{-webkit-transform:rotate(90deg);transform:rotate(90deg)}
.star-a{left:100px;top:85px;-webkit-transform:scale(.8);transform:scale(.8)}
.star-b{left:14px;bottom:175px;-webkit-transform:scale(.7);transform:scale(.7)}
.star-c{left:178px;top:25px;-webkit-transform:scale(.65);transform:scale(.65)}
.star-d{left:120px;bottom:135px;-webkit-transform:scale(.9);transform:scale(.9)}
.star-e{left:128px;top:135px;-webkit-transform:scale(.5);transform:scale(.5)}
.star-f{right:88px;top:170px;-webkit-transform:scale(.75);transform:scale(.75)}
.star-g{right:90px;top:80px;-webkit-transform:scale(.65);transform:scale(.65)}
.tree{
top:70px;
left:285px;
width:20px;
height:20px;
margin-left:-10px;
position:absolute;
-webkit-transform:rotate(4deg);
transform:rotate(4deg);
}
.tree *{position:absolute}
.tree:after,.tree *:after,.tree:before,.tree *:before{height:0;width:0;border:0 solid transparent}
.tree [class*=dtl-]>i{
width:28px;
height:4px;
border-top:4px solid #56459e;
}
.tree [class*=dtl-]>i:after,.tree [class*=dtl-]>i:before{
width:4px;
right:22px;
height:30px;
border-left:4px solid #56459e;
}
.tree:before{
width:40px;
border-bottom:315px solid #56459e;
border-left-width:8px;
border-right-width:8px;
}
.tree .dtl-a:before{
top:-107px;
right:47px;
border-left-width:10px;
border-right-width:10px;
-webkit-transform:rotate(-75deg);
transform:rotate(-75deg);
border-bottom:180px solid #56459e;
}
.tree .dtl-b:before{
right:0;
top:-90px;
width:16px;
border-left-width:1px;
border-right-width:1px;
border-bottom:80px solid #56459e;
}
.tree .dtl-b:after{
right:35px;
top:-133px;
width:15px;
border-left-width:3px;
border-right-width:3px;
-webkit-transform:rotate(-75deg);
transform:rotate(-75deg);
border-bottom:80px solid #56459e;
}
.tree .dtl-c:before{
top:-198px;
right:85px;
border-left-width:6px;
border-right-width:6px;
-webkit-transform:rotate(-15deg);
transform:rotate(-15deg);
border-bottom:100px solid #56459e;
}
.tree .dtl-c:after{
right:95px;
top:-150px;
width:12px;
border-left-width:1x;
border-right-width:1px;
-webkit-transform:rotate(-85deg);
transform:rotate(-85deg);
border-bottom:30px solid #56459e;
}
.tree .dtl-d:before{
right:115px;
top:-142px;
width:11px;
border-left-width:1px;
border-right-width:1px;
-webkit-transform:rotate(-145deg);
transform:rotate(-145deg);
border-bottom:35px solid #56459e;
}
.tree .dtl-d:after{
top:-148px;
right:148px;
border-left-width:5px;
border-right-width:5px;
-webkit-transform:rotate(-70deg);
transform:rotate(-70deg);
border-bottom:50px solid #56459e;
}
.tree .dtl-e:before{
right:115px;
top:-135px;
width:28px;
border:initial;
-webkit-transform:rotate(-120deg);
transform:rotate(-120deg);
border-bottom:4px solid #56459e;
}
.tree .dtl-f:before{
right:45px;
top:-144px;
width:40px;
height:25px;
border:initial;
-webkit-transform:skew(-18deg);
transform:skew(-18deg);
border-right:4px solid #56459e;
border-bottom:4px solid #56459e;
}
.tree .dtl-f:after{
right:22px;
top:-130px;
width:25px;
border:initial;
-webkit-transform:rotate(190deg);
transform:rotate(190deg);
border-bottom:4px solid #56459e;
}
.tree .dtl-g:before{
right:80px;
top:-28px;
width:60px;
height:20px;
border:initial;
-webkit-transform:skew(25deg) rotate(-30deg);
transform:skew(25deg) rotate(-30deg);
border-left:4px solid #56459e;
border-bottom:4px solid #56459e;
}
.tree .dtl-h:before,.tree .dtl-k:before{
right:-100px;
top:-32px;
width:100px;
border:initial;
-webkit-transform:rotate(-55deg);
transform:rotate(-55deg);
border-bottom:4px solid #56459e;
}
.tree .dtl-h:after,.tree .dtl-k:after{
right:-70px;
top:-60px;
width:35px;
border:initial;
-webkit-transform:rotate(-120deg);
transform:rotate(-120deg);
border-bottom:4px solid #56459e;
}
.tree .dtl-i:before{
top:75px;
width:18px;
right:20px;
border-left-width:2px;
border-right-width:2px;
-webkit-transform:rotate(-75deg);
transform:rotate(-75deg);
border-bottom:80px solid #56459e;
}
.tree .dtl-i:after{
top:98px;
width:18px;
right:58px;
border-left-width:1px;
border-right-width:1px;
-webkit-transform:rotate(198deg);
transform:rotate(198deg);
border-bottom:40px solid #56459e;
}
.tree .dtl-j:before{
top:77px;
right:98px;
border-left-width:8px;
border-right-width:8px;
-webkit-transform:rotate(-75deg);
transform:rotate(-75deg);
border-bottom:88px solid #56459e;
}
.tree .dtl-j .dtl-1{
top:118px;
width:2px;
right:105px;
height:77px;
border-top:none;
border-left:2px solid #56459e;
}
.tree .dtl-j .dtl-1:before{
top:-56px;
right:-8px;
border-left-color:transparent;
border-left-width:6px;
border-right-width:6px;
-webkit-transform:rotate(-8deg);
transform:rotate(-8deg);
border-bottom:60px solid #56459e;
}
.tree .dtl-j .dtl-1:after{
top:75px;
width:30px;
right:-13px;
height:40px;
border-radius:50%;
border:2px solid #56459e;
}
.tree .dtl-j .dtl-2{
top:90px;
right:100px;
-webkit-transform:rotate(20deg);
transform:rotate(20deg);
}
.tree .dtl-j .dtl-2:before{top:-24px;height:24px;-webkit-transform:rotate(-30deg);transform:rotate(-30deg);right:28px}
.tree .dtl-j .dtl-2:after{top:-4px;height:24px;-webkit-transform:rotate(35deg);transform:rotate(35deg);right:30px}
.tree .dtl-k{top:145px;right:90px;-webkit-transform:rotate(-15deg);transform:rotate(-15deg)}
.tree .dtl-k:before{right:-88px;top:-40px;width:60px}
.tree .dtl-l:before{
top:-30px;
width:18px;
right:-80px;
border-left-width:1px;
border-right-width:1px;
-webkit-transform:rotate(38deg);
transform:rotate(38deg);
border-bottom:150px solid #56459e;
}
.tree .dtl-l:after{
top:-70px;
width:18px;
right:-180px;
border-left-width:3px;
border-right-width:3px;
-webkit-transform:rotate(91deg);
transform:rotate(91deg);
border-bottom:120px solid #56459e;
}
.tree .dtl-m:before,.tree .dtl-m:after{
top:-95px;
right:-180px;
border-left-width:6px;
border-right-width:6px;
-webkit-transform:rotate(3deg);
transform:rotate(3deg);
border-bottom:80px solid #56459e;
}
.tree .dtl-m:after{
top:-82px;
right:-248px;
-webkit-transform:rotate(20deg);
transform:rotate(20deg);
}
.tree .dtl-m>i{top:-50px;right:-174px}
.tree .dtl-n>i{top:-40px;right:-265px}
.tree .dtl-m .dtl-1:before{top:-32px;right:28px;-webkit-transform:rotate(-15deg);transform:rotate(-15deg)}
.tree .dtl-m .dtl-1:after{top:-54px;-webkit-transform:rotate(45deg);transform:rotate(45deg)}
.tree .dtl-m .dtl-2:before{top:-62px;right:44px;height:40px;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}
.tree .dtl-m .dtl-2:after{top:-50px;right:55px;height:18px;-webkit-transform:rotate(70deg);transform:rotate(70deg)}
.tree .dtl-n:before{
top:-18px;
right:-222px;
border-left-width:6px;
border-right-width:6px;
-webkit-transform:rotate(140deg);
transform:rotate(140deg);
border-bottom:80px solid #56459e;
}
.tree .dtl-n .dtl-1:before{top:-44px;right:-17px;height:50px;-webkit-transform:rotate(45deg);transform:rotate(45deg)}
.tree .dtl-n .dtl-1:after{top:-30px;right:-32px;-webkit-transform:rotate(-80deg);transform:rotate(-80deg)}
.tree .dtl-o:before{
top:48px;
height:4px;
width:65px;
right:-142px;
border-top:4px solid #56459e;
-webkit-transform:rotate(25deg);
transform:rotate(25deg);
}
.tree .dtl-o .dtl-1{top:72px;right:-138px;width:40px;-webkit-transform:rotate(-80deg);transform:rotate(-80deg)}
.tree .dtl-o .dtl-1:before{top:-28px;right:20px;-webkit-transform:rotate(-35deg);transform:rotate(-35deg)}
.tree .dtl-o .dtl-1:after{top:10px;right:-2px;-webkit-transform:rotate(-28deg);transform:rotate(-28deg)}
.wrap svg{width:100%;overflow:initial;position:relative;left:-10px;top:-10px}
.wrap svg text{font-size:32px;text-transform:uppercase;font-family:monospace,sans-serif;fill:#5d4aac}
.wrap .text>i{color:#5d4aac;font-style:normal;font-size:33px;font-family:monospace,sans-serif;text-transform:uppercase;position:absolute;text-shadow:1px 2px rgba(0,0,0,.65)}
.wrap .text>i:nth-child(1){-webkit-transform:translate(-29px,182px) rotate(-85deg);transform:translate(-29px,182px) rotate(-85deg)}
.wrap .text>i:nth-child(2){-webkit-transform:translate(-27px,164px) rotate(-84deg);transform:translate(-27px,164px) rotate(-84deg)}
.wrap .text>i:nth-child(3){-webkit-transform:translate(-24px,145px) rotate(-79deg);transform:translate(-24px,145px) rotate(-79deg)}
.wrap .text>i:nth-child(4){-webkit-transform:translate(-20px,127px) rotate(-73deg);transform:translate(-20px,127px) rotate(-73deg)}
.wrap .text>i:nth-child(5){-webkit-transform:translate(-14px,110px) rotate(-68deg);transform:translate(-14px,110px) rotate(-68deg)}
.wrap .text>i:nth-child(6){-webkit-transform:translate(-6px,93px) rotate(-66deg);transform:translate(-6px,93px) rotate(-66deg)}
.wrap .text>i:nth-child(7){-webkit-transform:translate(3px,77px) rotate(-58deg);transform:translate(3px,77px) rotate(-58deg)}
.wrap .text>i:nth-child(8){-webkit-transform:translate(13px,62px) rotate(-55deg);transform:translate(13px,62px) rotate(-55deg)}
.wrap .text>i:nth-child(9){-webkit-transform:translate(24px,47px) rotate(-50deg);transform:translate(24px,47px) rotate(-50deg)}
.wrap .text>i:nth-child(10){-webkit-transform:translate(37px,33px) rotate(-43deg);transform:translate(37px,33px) rotate(-43deg)}
.wrap .text>i:nth-child(11){-webkit-transform:translate(51px,21px) rotate(-43deg);transform:translate(51px,21px) rotate(-43deg)}
.wrap .text>i:nth-child(12){-webkit-transform:translate(65px,10px) rotate(-35deg);transform:translate(65px,10px) rotate(-35deg)}
.wrap .text>i:nth-child(13){-webkit-transform:translate(81px,0) rotate(-32deg);transform:translate(81px,0) rotate(-32deg)}
.wrap .text>i:nth-child(14){-webkit-transform:translate(98px,-8px) rotate(-27deg);transform:translate(98px,-8px) rotate(-27deg)}
.wrap .text>i:nth-child(15){-webkit-transform:translate(114px,-16px) rotate(-22deg);transform:translate(114px,-16px) rotate(-22deg)}
.ghost{
width:70px;
height:90px;
position:absolute;
background-color:#fee5e6;
border-radius:70px 70px 0 0;
-webkit-transform:translate(262px,-73px) scale(1) rotate(-64deg);
transform:translate(262px,-73px) scale(1) rotate(-64deg);opacity:.75;
}
.ghost:after,.ghost:before{width:7px;height:10px;background-color:#c29e97;border-radius:50%}
.ghost:after{top:24px;left:48px}
.ghost:before{top:24px;left:30px}
.ghost>i{position:inherit}
.ghost .ghom{top:50px;left:37px;width:14px;height:7px;border-radius:7px 7px 0 0;background-color:#c29e97;-webkit-transform-origin:bottom;transform-origin:bottom}
.ghost .ghot{top:88px;left:0;width:20px;height:44px;border-radius:0 0 20px 20px;background-color:#fee5e6;box-shadow:25px -14px 0 #fee5e6,50px -24px 0 #fee5e6}
.ghost .ghot:before,.ghost .ghot:after{top:-1px;width:7px;height:7px;border-radius:50%;box-shadow:0 4px #fee5e6 inset}
.ghost .ghot:before{left:19px}
.ghost .ghot:after{left:44px}
.ghost .ghod{width:10px;height:10px;border-radius:50%;background-color:#c29e97;position:absolute;bottom:-36px;left:5px}
.pumpkin{
width:90px;
height:60px;
position:absolute;
border-radius:60px;
-webkit-transform-origin:bottom;
transform-origin:bottom;
background-color:#f36518;
box-shadow:-3px 3px #ff820f inset;
}
.pumpkin:before{
width:0;
height:0;
left:50%;
top:-10px;
margin-left:-5px;
border:5px solid transparent;
border-top:10px solid #ff7d10;
}
.pumpkin:after{
left:50%;
bottom:0;
width:30px;
height:64px;
margin-left:-15px;
background-color:#ff7d10;
border-radius:30px 30px 18px 18px;
}
.pumpkin .face{
width:0;
top:18px;
height:0;
left:50%;
z-index:1;
margin-left:-4px;
position:absolute;
border:4px solid transparent;
border-bottom:8px solid #ab2b2b;
}
.pumpkin .face:after,.pumpkin .face:before{width:12px;height:6px;border-radius:0 0 12px 12px;background-color:#ab2b2b}
.pumpkin .face:before{left:-22px;-webkit-transform:rotate(28deg);transform:rotate(28deg)}
.pumpkin .face:after{right:-22px;-webkit-transform:rotate(-28deg);transform:rotate(-28deg)}
.pumpkin .mouth{
left:50%;
z-index:1;
bottom:8px;
width:44px;
height:15px;
margin-left:-22px;
position:absolute;
box-shadow:0 6px #ab2b2b inset;
border-radius:15px 15px 0 0;
}
.pumpkin .mouth:before{
top:5px;
left:50%;
height:5px;
width:38px;
margin-left:-19px;
background-color:#ab2b2b;
border-radius:2px 2px 0 0;
}
.mouth .teeth{
left:19px;
bottom:4px;
width:6px;
height:4px;
position:absolute;
background-color:#ff820f;
}
.mouth .teeth:after,.mouth .teeth:before{width:inherit;height:inherit;background-color:inherit;top:-7px}
.mouth .teeth:after{right:-6px}
.mouth .teeth:before{right:7px}
.mouth .detail:before{
left:2px;
width:5px;
height:5px;
background-color:#f36518;
}
.mouth .detail:after{
top:9px;
width:4px;
left:36px;
height:2px;
border-radius:1px 1px 0 0;
background-color:#f36518;
}
.pumpkin.pa{top:130px;left:22px}
.pumpkin.pb{bottom:28px;left:52px;z-index:0}
.pumpkin.pc{bottom:28px;right:2px;z-index:2}
.pumpkin.pd{bottom:28px;right:-70px;z-index:1;-webkit-transform:scale(1.4);transform:scale(1.4)}
.pillar{
left:16px;
bottom:28px;
overflow:hidden;
text-align:center;
position:absolute;
}
.pillar>i{display:block;margin:auto;background-color:#fee5e6;box-shadow:33px 0 #e3beb8 inset}
.pillar .pila{width:100px;height:30px}
.pillar .pilb{width:78px;height:152px;box-shadow:33px 2px #e3beb8 inset}
.pillar .pilc{width:90px;height:8px;}
.pillar .pild{width:100px;height:12px}
.pillar [class*="pils-"],.pillar [class*="pils-"]:before,.pillar [class*="pils-"]:after{background-color:#e3beb8;position:absolute}
.pillar .pils-a{width:8px;height:8px;top:0;left:38px;top:8px}
.pillar .pils-a:before{width:inherit;height:inherit;left:20px;top:8px}
.pillar .pils-a:after{width:13px;height:13px;left:40px;top:0}
.pillar .pils-b{width:11px;height:11px;top:40px;left:72px}
.pillar .pils-b:before{width:6px;height:6px;top:24px;left:-12px}
.pillar .pils-b:after{width:12px;height:12px;top:48px;left:-5px}
.pillar .pils-c:before{width:10px;height:10px;top:-75px;left:55px}
.pillar .pils-c:after{width:15px;height:15px;top:-55px;left:65px}
.pillar .spider{
top:20px;
left:22px;
width:10px;
height:10px;
box-shadow:none;
position:absolute;
border-radius:50%;
background-color:#5f1f4d;
}
.pillar .spider:after{
left:50%;
width:6px;
height:6px;
bottom:-3px;
margin-left:-3px;
border-radius:50%;
border:1px solid #e3beb8;
background-color:inherit;
}
.spider [class*="leg-"]{width:2px;height:2px;left:50%;margin-left:-1px;top:50%}
.spider [class*="leg-"]:before,.spider [class*="leg-"]:after{border:1px solid transparent;border-top:1px solid #5f1f4d;border-radius:50%}
.spider .leg-a:after,.spider .leg-a:before{width:11px;height:11px}
.spider .leg-a:after{right:-9px;-webkit-transform:rotate(-20deg);transform:rotate(-20deg)}
.spider .leg-a:before{left:-9px;-webkit-transform:rotate(20deg);transform:rotate(20deg)}
.spider .leg-b:after,.spider .leg-b:before{width:18px;height:18px;top:4px}
.spider .leg-b:after{right:-10px;-webkit-transform:rotate(12deg);transform:rotate(12deg)}
.spider .leg-b:before{left:-10px;-webkit-transform:rotate(-12deg);transform:rotate(-12deg)}
.spider .leg-c:after,.spider .leg-c:before{width:20px;height:20px;top:6px}
.spider .leg-c:after{right:-6px;-webkit-transform:rotate(30deg);transform:rotate(30deg)}
.spider .leg-c:before{left:-6px;-webkit-transform:rotate(-30deg);transform:rotate(-30deg)}
.stone{background-color:#c29e97;position:absolute;bottom:1px;right:-40px;box-shadow:-32px 0 inset #fee5e6;overflow:hidden}
.stone.sa{width:180px;height:235px;border-radius:180px 180px 0 0}
.stone.sb{right:55px;width:150px;height:175px;border-radius:40px 40px 0 0}
.stone .txt{width:75px;height:42px;background-color:#e3beb8;left:18px;top:33px;position:absolute}
.stone .txt:after{width:60px;height:4px;background-color:#c29e97;border-radius:4px;left:8px;top:10px;box-shadow:0 10px #c29e97,0 20px #c29e97}
.stone .mrk{width:48px;height:48px;position:absolute;border:5px solid #e3beb8;border-radius:50%;top:45px;left:50px}
.stone .mrk>i{width:10px;height:10px;top:50%;left:50%;margin-top:-5px;margin-left:-5px;position:inherit;background-color:#e3beb8;border-radius:50%;box-shadow:0 0 0 3px #e3beb8}
.stone .mrk>i:before,.stone .mrk>i:after{border:0 solid transparent}
.stone .mrk>i:nth-child(1):before,.stone .mrk>i:nth-child(1):after{width:10px;height:0;border-left-width:3px;border-right-width:3px}
.stone .mrk>i:nth-child(1):before{top:-10px;border-top:10px solid #e3beb8}
.stone .mrk>i:nth-child(1):after{top:10px;border-bottom:10px solid #e3beb8}
.stone .mrk>i:nth-child(2):before,.stone .mrk>i:nth-child(2):after{width:0;height:10px;border-top-width:3px;border-bottom-width:3px}
.stone .mrk>i:nth-child(2):before{left:-10px;border-left:10px solid #e3beb8}
.stone .mrk>i:nth-child(2):after{left:10px;border-right:10px solid #e3beb8}
.stone [class*="sto"],.stone [class*="sto"]:before,.stone [class*="sto"]:after{position:absolute;background-color:#e3beb8}
.stone.sa .stoa{width:12px;height:12px;top:5px;left:42px;background-color:#6652bd;border-radius:50%}
.stone.sa .stoa:after{width:12px;height:12px;top:10px;left:38px}
.stone.sa .stoa:before{width:9px;height:9px;top:35px;left:-6px}
.stone.sa .stob{width:12px;height:12px;top:44px;left:132px;border-radius:50%;background-color:#fee5e6}
.stone.sa .stob:before,.stone.sa .stob:after{left:10px;width:inherit;height:inherit;border-radius:inherit;background-color:inherit}
.stone.sa .stob:before{top:72px}
.stone.sa .stob:after{top:95px}
.stone.sa .stoc{width:10px;height:10px;top:70px;left:124px}
.stone.sa .stoc:before,.stone.sa .stoc:after{width:inherit;height:inherit}
.stone.sa .stoc:before{left:-24px;top:48px}
.stone.sa .stoc:after{left:-6px;top:84px}
.stone.sb .stoa{width:7px;height:7px;top:12px;left:28px}
.stone.sb .stoa:before{width:6px;height:6px;top:36px;left:-24px}
.stone.sb .stoa:after{width:5px;height:5px;top:-4px;left:50px}
.stone.sb .stob{width:7px;height:7px;top:95px;left:90px}
.stone.sb .stob:before{width:5px;height:5px;top:16px;left:-18px}
.stone.sb .stob:after{width:6px;height:6px;top:35px;left:-6px}
.stone.sb .stoc{width:8px;height:8px;top:77px;left:-4p.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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