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