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); -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