今天看到一个国外的网站有这么个效果,很好奇如何实现的,研究了一番,将效果实现了,很酷,不用任何图片
http://abemedia.co.uk/content-management-systems-cms
<style type="text/css"> @-webkit-keyframes rotate1 { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(20deg); } } </style> <div style="height: 1000px; background-color: #23869D; overflow: hidden;"> <div style="padding-top:2180px; margin:-2000px 0 0 -2000px; width:4000px; height: 4000px;-webkit-animation-name: rotate1; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear;box-sizing: border-box;"> <div style="border-width:180px 2000px;box-sizing: border-box; margin:-360px 0 0 0; -webkit-transform: rotate(20deg); width: 0; height: 0; border-style:solid; border-color:transparent rgba(255,255,255,.1);"></div> <div style="border-width:180px 2000px;box-sizing: border-box; margin:-360px 0 0 0; -webkit-transform: rotate(40deg); width: 0; height: 0; border-style:solid; border-color:transparent rgba(255,255,255,.1);"></div> <div style="border-width:180px 2000px;box-sizing: border-box; margin:-360px 0 0 0; -webkit-transform: rotate(60deg); width: 0; height: 0; border-style:solid; border-color:transparent rgba(255,255,255,.1);"></div> <div style="border-width:180px 2000px;box-sizing: border-box; margin:-360px 0 0 0; -webkit-transform: rotate(80deg); width: 0; height: 0; border-style:solid; border-color:transparent rgba(255,255,255,.1);"></div> <div style="border-width:180px 2000px;box-sizing: border-box; margin:-360px 0 0 0; -webkit-transform: rotate(100deg); width: 0; height: 0; border-style:solid; border-color:transparent rgba(255,255,255,.1);"></div> <div style="border-width:180px 2000px;box-sizing: border-box; margin:-360px 0 0 0; -webkit-transform: rotate(120deg); width: 0; height: 0; border-style:solid; border-color:transparent rgba(255,255,255,.1);"></div> <div style="border-width:180px 2000px;box-sizing: border-box; margin:-360px 0 0 0; -webkit-transform: rotate(140deg); width: 0; height: 0; border-style:solid; border-color:transparent rgba(255,255,255,.1);"></div> <div style="border-width:180px 2000px;box-sizing: border-box; margin:-360px 0 0 0; -webkit-transform: rotate(160deg); width: 0; height: 0; border-style:solid; border-color:transparent rgba(255,255,255,.1);"></div> <div style="border-width:180px 2000px;box-sizing: border-box; margin:-360px 0 0 0; -webkit-transform: rotate(180deg); width: 0; height: 0; border-style:solid; border-color:transparent rgba(255,255,255,.1);"></div> </div> </div>
时间: 2024-09-21 22:09:12