| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>test</title> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| /* | |
| 風車 | |
| */ | |
| .windmill { | |
| width: 200px; | |
| height: 400px; | |
| margin-top: -20px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| transform: scale(0.5); | |
| } | |
| .windmill_mill { | |
| width: 200px; | |
| height: 200px; | |
| position: relative; | |
| } | |
| @keyframes zhuang { | |
| from { | |
| transform: rotate(0deg); | |
| } | |
| to { | |
| transform: rotate(-360deg); | |
| } | |
| } | |
| .windmill_mill div:nth-child(1) { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| border: 55px solid transparent; | |
| border-bottom-color: red; | |
| border-left-color: red; | |
| border-bottom-left-radius: 50%; | |
| } | |
| .windmill_mill div:nth-child(2) { | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| border: 55px solid transparent; | |
| border-top-color: green; | |
| border-left-color: green; | |
| border-top-left-radius: 50%; | |
| } | |
| .windmill_mill div:nth-child(3) { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| border: 55px solid transparent; | |
| border-bottom-color: blue; | |
| border-right-color: blue; | |
| border-bottom-right-radius: 50%; | |
| } | |
| .windmill_mill div:nth-child(4) { | |
| position: absolute; | |
| bottom: 0; | |
| right: 0; | |
| border: 55px solid transparent; | |
| border-top-color: yellow; | |
| border-right-color: yellow; | |
| border-top-right-radius: 50%; | |
| } | |
| .windmill_mill div:nth-child(5) { | |
| position: absolute; | |
| bottom: 86px; | |
| right: 86px; | |
| border: 14px solid pink; | |
| border-radius: 50%; | |
| } | |
| .windmill_stock { | |
| width: 8px; | |
| height: 300px; | |
| background-color: black; | |
| position: absolute; | |
| top: 25%; | |
| margin-top: -4px; | |
| left: 50%; | |
| margin-left: -4px; | |
| } | |
| /* | |
| 輪播 | |
| */ | |
| .tab { | |
| width: 800px; | |
| height: 300px; | |
| margin: 50px auto; | |
| /*background-color: black;*/ | |
| overflow: hidden; | |
| } | |
| .tab:hover ul{ | |
| animation:paused; | |
| } | |
| .tab ul { | |
| list-style: none; | |
| width: 1800px; | |
| animation: move 5s linear infinite; | |
| position: relative; | |
| } | |
| .tab ul:hover li{ | |
| width: 150px; | |
| z-index: 999; | |
| } | |
| @keyframes move { | |
| from { | |
| left: 0; | |
| } | |
| to { | |
| left: -1000px; | |
| } | |
| } | |
| .tab ul li { | |
| width: 200px; | |
| height: 300px; | |
| float: left; | |
| z-index: 0; | |
| } | |
| .tab ul li:hover{ | |
| width: 400px; | |
| } | |
| .tab ul li:hover .windmill_mill{ | |
| animation: zhuang 0.5s linear infinite; | |
| } | |
| .tab ul li:nth-child(1) { | |
| background-color: #ffc3b6; | |
| } | |
| .tab ul li:nth-child(2) { | |
| background-color: #d7ffac; | |
| } | |
| .tab ul li:nth-child(3) { | |
| background-color: #b4d4ff; | |
| } | |
| .tab ul li:nth-child(4) { | |
| background-color: #ffc2ff; | |
| } | |
| .tab ul li:nth-child(5) { | |
| background-color: #fffec8; | |
| } | |
| .tab ul li:nth-child(6) { | |
| background-color: #ffc3b6; | |
| } | |
| .tab ul li:nth-child(7) { | |
| background-color: #d7ffac; | |
| } | |
| .tab ul li:nth-child(8) { | |
| background-color: #b4d4ff; | |
| } | |
| .tab ul li:nth-child(9) { | |
| background-color: #ffc2ff; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="tab"> | |
| <ul> | |
| <li><div class="windmill"> | |
| <div class="windmill_stock"></div> | |
| <div class="windmill_mill"> | |
| <div></div> | |
| <div></div> | |
| <div></div> | |
| <div></div> | |
| <div></div> | |
| </div> | |
| </div></li> | |
| <li></li> | |
| <li></li> | |
| <li></li> | |
| <li></li> | |
| <li></li> | |
| <li></li> | |
| <li></li> | |
| <li></li> | |
| </ul> | |
| </div> | |
| <div class="windmill"> | |
| <div class="windmill_stock"></div> | |
| <div class="windmill_mill"> | |
| <div></div> | |
| <div></div> | |
| <div></div> | |
| <div></div> | |
| <div></div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
3
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章