大家可以看到我的博客上的开头动画了吧。其实他是用css做出来的。在这里给大家分享一下他的代码。无需用js和flash
首先是他的html代码
<section> <div class="stage"> <div class="nightOverlay"></div> <div class="skyline"></div> <div class="beans"></div> <div class="ground back"></div> <div class="ground mid"></div> <div class="ground front"></div> <div class="cloud large"></div> <div class="cloud small"></div> <div class="cloud medium"></div> <div class="balloon"></div> <div class="dowEventCenter"></div> <div class="planetarium"></div> <div class="friendshipShell"></div> <div class="glockenspiel"></div> <div class="rotation"> <div class="sun"></div> <div class="moon"></div> </div> </div> </section>
很简单的几行
接下来就是css代码了。基本都是用keyframes和animation做的,代码一看就懂
/*-------- 天空背景以及动画 --------*/ .stage { position: relative; overflow: hidden; height: 600px; background: #ddf5f7; -webkit-animation: skyset 110s infinite linear; -moz-animation: skyset 110s infinite linear; -o-animation: skyset 110s infinite linear; animation: skyset 110s infinite linear; } @-webkit-keyframes skyset { 0% { background: #ddf5f7; } 23% { background: #ddf5f7; } 25% { background: #350847; } 27% { background: #0f192c; } 50% { background: #0f192c; } 68% { background: #0f192c; } 75% { background: #f9c7b8; } 82% { background: #ddf5f7; } 100% { background: #ddf5f7; } } @-moz-keyframes skyset { 0% { background: #ddf5f7; } 23% { background: #ddf5f7; } 25% { background: #350847; } 27% { background: #0f192c; } 50% { background: #0f192c; } 68% { background: #0f192c; } 75% { background: #f9c7b8; } 82% { background: #ddf5f7; } 100% { background: #ddf5f7; } } @-o-keyframes skyset { 0% { background: #ddf5f7; } 23% { background: #ddf5f7; } 25% { background: #350847; } 27% { background: #0f192c; } 50% { background: #0f192c; } 68% { background: #0f192c; } 75% { background: #f9c7b8; } 82% { background: #ddf5f7; } 100% { background: #ddf5f7; } } @keyframes skyset { 0% { background: #ddf5f7; } 23% { background: #ddf5f7; } 25% { background: #350847; } 27% { background: #0f192c; } 50% { background: #0f192c; } 68% { background: #0f192c; } 75% { background: #f9c7b8; } 82% { background: #ddf5f7; } 100% { background: #ddf5f7; } } /*-------- 天黑场景遮罩层以及动画 --------*/ .nightOverlay { z-index: 9; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(15, 25, 44, 0.7); opacity: 0; -webkit-animation: set 110s infinite linear; -moz-animation: set 110s infinite linear; -o-animation: set 110s infinite linear; animation: set 110s infinite linear; } @-webkit-keyframes set { 0% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; } 50% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } 100% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; } } @-moz-keyframes set { 0% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; } 50% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } 100% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; } } @-o-keyframes set { 0% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; } 50% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } 100% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; } } @keyframes set { 0% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; } 50% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } 100% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; } } /*-------- 太阳自转以及动画 --------*/ .rotation { position: absolute; z-index: 1; left: 50%; top: 50%; margin: -350px 0 0 -350px; height: 700px; width: 700px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-animation: rotation 110s infinite linear; -moz-animation: rotation 110s infinite linear; -o-animation: rotation 110s infinite linear; animation: rotation 110s infinite linear; } @-webkit-keyframes rotation { 0% { -webkit-transform: rotate(45deg); } 100% { -webkit-transform: rotate(405deg); } } @-moz-keyframes rotation { 0% { -moz-transform: rotate(45deg); } 100% { -moz-transform: rotate(405deg); } } @-o-keyframes rotation { 0% { -o-transform: rotate(45deg); } 100% { -o-transform: rotate(405deg); } } @keyframes rotation { 0% { transform: rotate(45deg); } 100% { transform: rotate(405deg); } } .sun, .moon { position: absolute; height: 145px; width: 145px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; } .sun { top: 0; left: 0; background: yellow; } .moon { bottom: 0; right: 0; background: black; } /*-------- 云以及动画 --------*/ .cloud { position: absolute; } .cloud.small { z-index: 1; top: 5%; left: 15%; background: url(/static/img/bannerflash/cloudSmall.png) no-repeat no-repeat center; height: 50px; width: 89px; -webkit-animation: cloudSmall 165s infinite; -moz-animation: cloudSmall 165s infinite; -o-animation: cloudSmall 165s infinite; animation: cloudSmall 165s infinite; } .cloud.medium { z-index: 3; top: 25%; left: 30%; background: url(/static/img/bannerflash/cloudMedium.png) no-repeat no-repeat center; height: 92px; width: 159px; -webkit-animation: cloudMedium 80s infinite; -moz-animation: cloudMedium 80s infinite; -o-animation: cloudMedium 80s infinite; animation: cloudMedium 80s infinite; } .cloud.large { z-index: 2; top: 5%; right: 15%; background: url(/static/img/bannerflash/cloudLarge.png) no-repeat no-repeat center; height: 169px; width: 302px; -webkit-animation: cloudLarge 105s infinite; -moz-animation: cloudLarge 105s infinite; -o-animation: cloudLarge 105s infinite; animation: cloudLarge 105s infinite; } @-webkit-keyframes cloudSmall { 0% { left: -8%; } 100% { left: 108%; } } @-moz-keyframes cloudSmall { 0% { left: -5%; } 100% { left: 105%; } } @-o-keyframes cloudSmall { 0% { left: -5%; } 100% { left: 105%; } } @keyframes cloudSmall { 0% { left: -5%; } 100% { left: 105%; } } @-webkit-keyframes cloudMedium { 0% { left: -8%; } 100% { left: 108%; } } @-moz-keyframes cloudMedium { 0% { left: -8%; } 100% { left: 108%; } } @-o-keyframes cloudMedium { 0% { left: -8%; } 100% { left: 108%; } } @keyframes cloudMedium { 0% { left: -8%; } 100% { left: 108%; } } @-webkit-keyframes cloudLarge { 0% { right: -18%; } 100% { right: 118%; } } @-moz-keyframes cloudLarge { 0% { right: -18%; } 100% { right: 118%; } } @-o-keyframes cloudLarge { 0% { right: -18%; } 100% { right: 118%; } } @keyframes cloudLarge { 0% { right: -18%; } 100% { right: 118%; } } /*-------- 气球以及动画 --------*/ .balloon { position: absolute; z-index: 3; top: 5%; right: 20%; background: url(/static/img/bannerflash/balloon.png) no-repeat no-repeat center; height: 227px; width: 157px; -webkit-animation: balloon 30s infinite cubic-bezier(0.91, 0.01, 1, 0.89); -moz-animation: balloon 30s infinite cubic-bezier(0.1, 0.1, 0.95, 0.5); -o-animation: balloon 30s infinite cubic-bezier(0.1, 0.1, 0.95, 0.5); animation: balloon 30s infinite cubic-bezier(0.1, 0.1, 0.95, 0.5); } @-webkit-keyframes balloon { 0% { right: -20%; -webkit-transform: rotate(0deg); } 5% { right: -20%; -webkit-transform: rotate(0deg); } 25% { -webkit-transform: rotate(0deg); } 100% { right: 120%; -webkit-transform: rotate(-30deg); } } @-moz-keyframes balloon { 0% { right: -20%; -moz-transform: rotate(0deg); } 5% { right: -20%; -moz-transform: rotate(0deg); } 25% { -moz-transform: rotate(0deg); } 100% { right: 120%; -moz-transform: rotate(-30deg); } } @-o-keyframes balloon { 0% { right: -20%; -o-transform: rotate(0deg); } 5% { right: -20%; -o-transform: rotate(0deg); } 25% { -o-transform: rotate(0deg); } 100% { right: 120%; -o-transform: rotate(-30deg); } } @keyframes balloon { 0% { right: -20%; transform: rotate(0deg); } 5% { right: -20%; transform: rotate(0deg); } 25% { transform: rotate(0deg); } 100% { right: 120%; transform: rotate(-30deg); } } /*-------- 场景组件 --------*/ .skyline { position: absolute; z-index: 5; width: 100%; bottom: 26%; background: url(/static/img/bannerflash/skyline.png) repeat no-repeat; height: 147px; } .beans { position: absolute; z-index: 4; height: 201px; width: 88px; bottom: 30%; left: 50%; background: url(/static/img/bannerflash/beans.png) no-repeat no-repeat; } .ground { position: absolute; width: 100%; bottom: 0; } .ground.front { z-index: 30; background: url(/static/img/bannerflash/groundFront.png) repeat no-repeat center; height: 301px; } .ground.mid { z-index: 20; background: url(/static/img/bannerflash/groundMid.png) repeat no-repeat; height: 299px; } .ground.back { z-index: 10; background: url(/static/img/bannerflash/groundBack.png) repeat no-repeat center; height: 281px; } .dowEventCenter { position: absolute; z-index: 12; bottom: 20%; left: 5%; background: url(/static/img/bannerflash/dowEventCenter.png) no-repeat no-repeat center; height: 236px; width: 524px; } .planetarium { position: absolute; z-index: 12; bottom: 18%; right: 10%; background: url(/static/img/bannerflash/Planetarium.png) no-repeat no-repeat center; height: 285px; width: 347px; } .friendshipShell { position: absolute; z-index: 21; bottom: 18%; left: 20%; background: url(/static/img/bannerflash/friendshipShell.png) no-repeat no-repeat center; height: 370px; width: 231px; } .glockenspiel { position: absolute; z-index: 11; bottom: 26%; right: 50%; background: url(/static/img/bannerflash/Glockenspiel.png) no-repeat no-repeat center; height: 263px; width: 137px; }
版权声明:本文为博主原创文章,未经博主允许不得转载。