利用CSS3的transiton屬性，進(jìn)行控件的旋轉(zhuǎn)，并通過設(shè)置旋轉(zhuǎn)時間，實現(xiàn)特效。

效果連接：http://runjs.cn/detail/vkmy8obr

實例代碼：直接復(fù)制進(jìn)html執(zhí)行即可 無需引入其他文件

<style>.dh {width: 100px;height: 100px;position: relative;}.dh:before, .dh:after {content: "";width: 100px;height: 16px;border-radius: 8px;background-color: #000;position: absolute;transition: all 0.15s ease-in-out; /*設(shè)置旋轉(zhuǎn)持續(xù)時間*/-webkit-transition: all 0.15s ease-in-out;/*兼容性處理等同于上代碼*/}.dh:before {top: 0;box-shadow: 0 42px #000;}.dh:after {bottom: 0;}.dh:hover:before {top: 42px;box-shadow: none;transform: rotate(225deg);/*順時針旋轉(zhuǎn)225度*/-webkit-transition: rotate(225deg);/*兼容性處理等同于上代碼*/}.dh:hover:after {bottom: 42px;transform: rotate(135deg);/*順時針旋轉(zhuǎn)135度*/-webkit-transition: rotate(135deg);/*兼容性處理等同于上代碼*/}</style><div class="dh"> </div>

總結(jié)

以上是生活随笔為你收集整理的HTML5、CSS3实现旋转特效的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。