div+css实现多彩纸风车气球转动动画效果代码-html代码-BFW代码库

div+css实现多彩纸风车气球转动动画效果代码

代码语言：html

所属分类：动画

代码描述：div+css实现多彩纸风车气球转动动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">






    <style>
        html {
        		    height: 100%;
        		}
        		body{
        			height: 100%;
        		    margin: 0;
        		    background-repeat: no-repeat;
        		    background-attachment: fixed;
        			overflow: hidden;
        			background-image: -moz-linear-gradient(top, rgba(102,182,252,0.5) 0%, rgba(255,255,255,1) 100%);
        			background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(102,182,252,0.5)), color-stop(100%,rgba(255,255,255,1)));
        			background-image: -webkit-linear-gradient(top, rgba(102,182,252,0.5) 0%,rgba(255,255,255,1) 100%);
        			background-image: -o-linear-gradient(top, rgba(102,182,252,0.5) 0%,rgba(255,255,255,1) 100%);
        			background-image: -ms-linear-gradient(top, rgba(102,182,252,0.5) 0%,rgba(255,255,255,1) 100%);
        			background-image: linear-gradient(to bottom, rgba(102,182,252,0.5) 0%,rgba(255,255,255,1) 100%);
        		}
        
        		/* Paper Wind Mill */
        		.wind-mill{
        			position: absolute;
        			overflow: hidden;
        			width: 327px;
        			height: 560px;
        		}
        		.petal-wrap{
        			width: 327px;
        			height: 327px;
        			position: absolute;
        			top: 0;
        			left: 0;
        			right: 0;
        			margin: auto;
        			overflow: hidden;
        		}
        		.petal{
        			position: absolute;
        			width: 5em;
        			height:10.2em;
        			position: absolute;
        			top: 10.2em;
        			left: 10.2em;
        			display: inline-block;			
        			overflow: hidden;	
        			-webkit-transform-origin: 0 0;	
        			-moz-transform-origin: 0 0;	
        			-ms-transform-origin: 0 0;	
        			transform-origin: 0 0;	
        		}
        		.petal:before{
        			content: '';
        			position: absolute;
        			width: 0;
        			height: 0;
        			border-width: 2.5em;
        			border-style: solid;
        			z-index: 1;
        			-webkit-transfrom: rotateZ(0deg) skew(45deg);
        			-moz-transfrom: rotateZ(0deg) skew(45deg);
        			-ms-transfrom: rotateZ(0deg) skew(45deg);
        			transfrom: rotateZ(0deg) skew(45deg);
        		}
        		.petal:after{
        			content: '';
        			position: absolute;
        			top: 1.2em;
        			left: -3.8em;
        			width: 0;
        			height: 0;
        			border-width: 3.8em;
        			border-style: solid;			
        			border-top-right-radius: 0.8em;
        			z-index: -1;
        			box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);			
 .........完整代码请登录后点击上方下载按钮下载查看