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

代码语言:html

所属分类:动画

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

代码标签: 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);			
        			-webkit-transform: rotate(45deg);
        			-moz-transform: rotate(45deg);
        			-ms-transform: rotate(45deg);
        			transform: rotate(45deg);
        		}
        		.orange:before{ border-color: #E94E1B #E94E1B transparent transparent; }
        		.orange:after{ border-color: #FFED00 #FFED00 transparent transparent; }
        		.blue{ 
        			-webkit-transform: rotate(90deg);
        			-moz-transform: rotate(90deg);
        			-ms-transform: rotate(90deg);
        			transform: rotate(90deg);
        		}		
        		.blue:before{ border-color: #2DAAE1 #2DAAE1 transparent transparent; }
        		.blue:after{ border-color: #A1DAF7 #A1DAF7 transparent transparent; }
        		.green{ 
        			-webkit-transform: rotate(180deg);
        			-moz-transform: rotate(180deg);
        			-ms-transform: rotate(180deg);
        			transform: rotate(180deg);
        		}
        		.green:before{ border-color: #2FAC66 #2FAC66 transparent transparent; }
        		.green:after{ border-color: #96C11F #96C11F transparent transparent; }
        		.yellow{ 
        			-webkit-transform: rotate(270deg);
        			-moz-transform: rotate(270deg);
        			-ms-transform: rotate(270deg);
        			transform: rotate(270deg);
        		}
        		.yellow:before{ border-color: #E50046 #E50046 transparent transparent; }
        		.yellow:after{ border-color: #F0869D #F0869D transparent transparent; }
        		.stand{
        			position: absolute;
        			top: 240px;
        			left: 0;
        			right: 0;
        			margin: 0 auto;
        			z-index: -5;
        			width: 10px;
        			height: 320px;
        			background-size: 50px 50px;
        			background-color: #c16;
        			background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
        			                  transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
        			                  transparent 75%, transparent);
        			background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
        			                  transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
        			                  transparent 75%, transparent);
        			background-image: linear-gradient(135deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
        			                  transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
        			                  transparent 75%, transparent);			
        		}
        		/*-- Paper Wind Mill --*/
        
        		/* Balloon */
        		.balloon-outer-wrap {
        			-webkit-animation: balloon-motion 5s linear infinite alternate-reverse;
        			-moz-animation: balloon-motion 5s linear infinite alternate-reverse;
        			-ms-animation: balloon-motion 5s linear infinite alternate-reverse;
        			animation: balloon-motion 5s linear infinite alternate-reverse;
        		}
        		.balloon-outer-wrap.one {
        			-webkit-animation-delay: 0.8s;
        		}
        		.balloon{
        			position: absolute;
        			border-radius: 30em 30em 30em 0em;
        			border-width: 100px 100px 100px 100px;
        			border-style: solid;
        			border-color: transparent;
        			background-color: #EE417F;
        
        			-webkit-transform: rotate(-45deg);	
        			-moz-transform: rotate(-45deg);	
        			-ms-transform: rotate(-45deg);	
        			transform: rotate(-45deg);
        
        		}
        		.balloon-carrier{
        			position: absolute;
        			top: 290px;
        			left: 72px;
        			width: 3.5em;
        			height: 5em;
        			background-color: #2884B8;
        		}
        		.balloon-carrier:before, .balloon-carrier:after{
        			content: '';
        			top: 0;			
        			position: absolute;
        			border-style: solid;
        			border-width: 5em 2em 0em 2.5em;
        			border-color: #2884B8 rgba(0, 0, 0, 0);
        		}
        		.balloon-carrier:before{
        			left: -40px;
        		}
        		.balloon-carrier:after{
        			right: -33px;
        		}		
        		.balloon-thread{
        			position: absolute;
        			top: 100px;
        			left: -5px;
        			width: 210px;
        			height: 10px;
        			background-color: #2884B8;
        		}
        		.balloon-thread:before, .balloon-thread:after{
        			content: '';
        			position: absolute;			
        			height: 210px;
        			width: 2px;
        			background-color: #2884B8;			
        		}
        		 .balloon-thread:before, .balloon-thread:after{
        		 	content: '';
        		 }
        		 .balloon-thread:before{
        		 	top: -5px;
        			left: 40px;
        			-webkit-transform: rotate(-20deg);
        			-moz-transform: rotate(-20deg);
        			-ms-transform: rotate(-20deg);
        			transform: rotate(-20deg);
        		 }
        		 .balloon-thread:after{
        		 	top: -5px;
        			right: 40px;
        			-webkit-transform: rotate(20deg);
        			-moz-transform: rotate(20deg);
        			-ms-transform: rotate(20deg);
        			transform: rotate(20deg);
        		 }
        		/*-- Balloon --*/
        
        		@-webkit-keyframes flow{
        			0% { background-color: #2DAAE1; }
        			25% { background-color: #E94E1B; }
        			50% { background-color: #2FAC66; }
        			75% { background-color: #E50046; }
        			100% { background-colo.........完整代码请登录后点击上方下载按钮下载查看

网友评论0