css实现万圣节动画效果代码-html代码-BFW代码库

代码语言：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-lef.........完整代码请登录后点击上方下载按钮下载查看