生活随笔
收集整理的這篇文章主要介紹了
鸭子表练习
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
CSS有關旋轉的練習
只做出了針表旋轉的效果
效果圖
代碼
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document
</title><style>.clock{width: 500px;height:500px;border-radius: 50%;position:relative;background-image: url(lib/img/duck.jpg);background-size: contain;}.clock > div{position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;}.hour-wrapper{width: 60%;height:60%;animation: run 43200s steps(12) infinite;}.hour{width: 5px;height: 50%;background-color: black;margin: 0 auto;}.min-wrapper{width: 75%;height:75%;animation: run 3600s steps(60) infinite;}.min{width: 3px;height: 50%;background-color: black;margin: 0 auto;}.sec-wrapper{width: 90%;height:90%;animation: run 60s steps(60) infinite;}.sec{width: 1px;height: 50%;background-color: red;margin: 0 auto;}@keyframes run {from{transform: rotateZ(0);}to{transform: rotateZ(360deg);}}</style>
</head>
<body><div class="clock"><div class="hour-wrapper"><div class="hour"></div></div><div class="min-wrapper"><div class="min"></div></div><div class="sec-wrapper"><div class="sec"></div></div></div>
</body>
</html>
素材
總結
以上是生活随笔為你收集整理的鸭子表练习的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
