首頁| 新聞| 娛樂| 游戲| 科普| 文學| 編程| 系統| 數據庫| 建站| 學院| 產品| 網管| 維修| 辦公| 熱點
發一個很久以前的作品,當開始得知CSS3可以做動畫時,就很想玩玩,于是就做了個充滿童年回憶的大風車。
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><html xmlns=”http://www.w3.org/1999/xhtml”><head><meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ /><title>css3 大風車</title><style>*{margin:0; padding:0}.windmill{ padding:10px; width:400px; height:400px; position:relative;animation-name:moveWindmill;animation-duration:4s;animation-timing-function:linearanimation-delay:0;animation-iteration-count:infinite;animation-play-state:running;/* Firefox: */-moz-animation-name:moveWindmill;-moz-animation-duration:4s;-moz-animation-timing-function:linear;-moz-animation-delay:0;-moz-animation-iteration-count:infinite;-moz-animation-play-state:running;-webkit-animation-name:moveWindmill;-webkit-animation-duration:4s;-webkit-animation-timing-function:linear;-webkit-animation-delay:0;-webkit-animation-iteration-count:infinite;-webkit-animation-play-state:running;-ms-animation-name:moveWindmill;-ms-animation-duration:4s;-ms-animation-timing-function:linear;-ms-animation-delay:0;-ms-animation-iteration-count:infinite;-ms-animation-play-state:running;}.windmill div{ position:absolute; width:100px; height:50px;left:50%; top:50%; border-radius:0 0 50px 50px ; -moz-transform-origin:0% 0%;-webkit-transform-origin:0% 0%;-ms-transform-origin:0% 0%;}.windmill .red{ background-color:red; background: -moz-radial-gradient(right, circle,red , #000); background: -webkit-radial-gradient(right, circle,red , #000);}.windmill .yellow{transform:rotate(90deg); -ms-transform:rotate(90deg); -moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); background-color:yellow; background: -moz-radial-gradient(right, circle,yellow , #000); background: -webkit-radial-gradient(right, circle,yellow , #000); background: -ms-radial-gradient(right, circle,yellow , #000);}.windmill .blue{transform:rotate(180deg);-ms-transform:rotate(180deg); -moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); background-color:blue; background: -moz-radial-gradient(right, circle,blue , #000); background: -webkit-radial-gradient(right, circle,blue , #000); }.windmill .green{transform:rotate(270deg); -ms-transform:rotate(270deg);-moz-transform:rotate(270deg);-webkit-transform:rotate(270deg); background-color:green; background:radial-gradient(right, circle,green , #000);background: -moz-radial-gradient(right, circle,green , #000); background: -webkit-radial-gradient(right, circle,green , #000); background: -ms-radial-gradient(right, circle,green , #000); }
練就火眼金睛 十一種常見電腦
打印機共享提示“操作無法完成
如何查找有故障的配件
回眸一笑百魅生,六宮粉黛無顏色
歲月靜美,剪一影煙雨江南
蕪湖有個“松鼠小鎮”
小滿:小得盈滿,一切剛剛好!
一串串晶瑩剔透的葡萄,像一顆顆寶石掛在藤
正宗老北京脆皮烤鴨
人逢知己千杯少,喝酒搞笑圖集
搞笑試卷,學生惡搞答題
新聞熱點
疑難解答
圖片精選
DIV+CSS通用樣式布局實例代碼
input file(input文件域)的美化
首屆世界CSS設計大賽結果揭曉
網友關注