今天已經禮拜三了,周天小穎家的佩佩就要結婚啦,小穎要去當伴娘了,哈哈哈哈哈哈,想想都覺得樂開了花,不過之前她給我說讓我當她伴娘時,我說我要減肥,不然她那么瘦弱,我站旁邊就感覺像一個圓滾滾的小皮球,小穎太胖了,唉主要是管不住嘴啊,太愛吃了,這樣下去真的不好不好不好,遲早有一天會把稱壓壞了的,哈哈哈哈不開玩笑啦。
下面呢我們來看看到底畫了個怎樣的大風車呢,嘻嘻,其實這也不是小穎自己想出來的,是借鑒別人畫的,小穎自己也敲了下,稍微做了些改動哈哈哈哈。
![]()
|
大風車吱呀吱喲喲地轉 這里的風景呀真好看 天好看地好看 還有一起快樂的小伙伴 大風車轉啊轉悠悠 快樂的伙伴手牽着手 牽着你的手 牽着我的手 今天的小伙伴 明天的好朋友 好朋友 大風車吱呀吱喲喲地轉 這里的風景呀真好看 天好看地好看 還有一起快樂的小伙伴 大風車轉啊轉悠悠 快樂的伙伴手牽着手 牽着你的手 牽着我的手 今天的小伙伴 明天的好朋友 好朋友 |
有沒有想起兒時的看動畫片的場景啊,記得小時候每次動畫片開始之前都會放這首《大風車》歌曲,哈哈哈,有興趣的親們可以去下載聽聽回一下兒時的美好,那這個到底是怎么實現的呢?在上代碼之前大家先去普及下css3中:animation、background: linear-gradient()、transparent屬性。
重點來啦!!!!!當當當當!
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css畫大風車</title> <style type="text/css"> .wrap { width: 320px; height: 320px; position: absolute; animation: rotate 2s linear infinite; /* animation: name duration timing-function delay iteration-count direction; rotate name 動畫名字 2s duration 規定完成動畫所花費的時間,以秒或毫秒計。 linear timing-function 規定動畫的速度曲線,動畫從頭到尾的速度是相同的。 infinite iteration-count 規定動畫應該播放的次數,規定動畫應該無限次播放。*/ } .box1, .box2, .box3, .box4 { width: 160px; height: 160px; position: absolute; } .box1 { left: 80px; background: linear-gradient(to right, #00ced1 50%, transparent 50%); border-radius: 80px 0 0 80px; } .box2 { right: 0; background: linear-gradient(to bottom, #ff4500 50%, transparent 50%); border-radius: 80px 80px 0 0; top: 80px; } .box3 { left: 80px; background: linear-gradient(to left, #ffc0cb 50%, transparent 50%); border-radius: 0 80px 80px 0; top: 160px; } .box4 { top: 80px; background: linear-gradient(to top, #d4dc14 50%, transparent 50%); border-radius: 0 0 80px 80px; } .gunzi { width: 20px; height: 260px; background: black; position: absolute; z-index: -1; top: 168px; left: 160px; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } </style> </head> <body> <div class='Windmill-centent'> <div class="wrap"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> </div> <div class="gunzi"></div> </div> </body> </html>