CSS3 实现飘动的云朵动画css3中transform属性实现的4种功能详解CSS3.0(Cascading Style Sheet) 层叠级联样式表纯CSS3实现div按照顺序出入效果CSS3实现列表无限滚动/轮播效果css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效CSS3实现的侧滑菜单CSS3实现的3D隧道效果用CSS3画一个爱心css3 实现文字闪烁效果的三种方式示例代码六种css3实现的边框过渡效果

 html, body { margin: 0; height: 100% } .sky { height: 480px; background: #007fd5; position: relative; overflow: hidden; -webkit-animation: sky_background 50s ease-out infinite; -moz-animation: sky_background 50s ease-out infinite; -o-animation: sky_background 50s ease-out infinite; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0) } .moon { background: url("http://i.imgur.com/wFXd68N.png"); position: absolute; left: 0; height: 300%; width: 300%; -webkit-animation: moon 50s linear infinite; -moz-animation: moon 50s linear infinite; -o-animation: moon 50s linear infinite; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0) } .clouds_one { background: url("http://www.scri8e.com/stars/PNG_Clouds/zc06.png?filename=./zc06.png&w0=800&h0s=289&imgType=3&h1=50&w1=140"); position: absolute; left: 0; top: 0; height: 100%; width: 300%; -webkit-animation: cloud_one 50s linear infinite; -moz-animation: cloud_one 50s linear infinite; -o-animation: cloud_one 50s linear infinite; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0) } .clouds_two { background: url("http://freepngimages.com/wp-content/uploads/2016/02/clouds-transparent-background-2.png"); position: absolute; left: 0; top: 0; height: 100%; width: 300%; -webkit-animation: cloud_two 75s linear infinite; -moz-animation: cloud_two 75s linear infinite; -o-animation: cloud_two 75s linear infinite; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0) } .clouds_three { background: url("http://montanaflynn.me/lab/css-clouds/images/cloud_three.png"); position: absolute; left: 0; top: 0; height: 100%; width: 300%; -webkit-animation: cloud_three 100s linear infinite; -moz-animation: cloud_three 100s linear infinite; -o-animation: cloud_three 100s linear infinite; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0) } @-webkit-keyframes sky_background { 0% { background: #007fd5; color: #007fd5 } 50% { background: #000; color: #a3d9ff } 100% { background: #007fd5; color: #007fd5 } } @-webkit-keyframes moon { 0% { opacity: 0; left: -200% -moz-transform: scale(0.5); -webkit-transform: scale(0.5); } 50% { opacity: 1; -moz-transform: scale(1); left: 0% bottom: 250px; -webkit-transform: scale(1); } 100% { opacity: 0; bottom: 500px; -moz-transform: scale(0.5); -webkit-transform: scale(0.5); } } @-webkit-keyframes cloud_one { 0% { left: 0 } 100% { left: -200% } } @-webkit-keyframes cloud_two { 0% { left: 0 } 100% { left: -200% } } @-webkit-keyframes cloud_three { 0% { left: 0 } 100% { left: -200% } } @-moz-keyframes sky_background { 0% { background: #007fd5; color: #007fd5 } 50% { background: #000; color: #a3d9ff } 100% { background: #007fd5; color: #007fd5 } } @-moz-keyframes moon { 0% { opacity: 0; left: -200% -moz-transform: scale(0.5); -webkit-transform: scale(0.5); } 50% { opacity: 1; -moz-transform: scale(1); left: 0% bottom: 250px; -webkit-transform: scale(1); } 100% { opacity: 0; bottom: 500px; -moz-transform: scale(0.5); -webkit-transform: scale(0.5); } } @-moz-keyframes cloud_one { 0% { left: 0 } 100% { left: -200% } } @-moz-keyframes cloud_two { 0% { left: 0 } 100% { left: -200% } } @-moz-keyframes cloud_three { 0% { left: 0 } 100% { left: -200% } }