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

网友评论0