css3控制图片先旋转120度,再旋转120度,然后就停止旋转

css3控制图片先旋转120度,再旋转120度,然后就停止旋转.

qq_花开花谢_0
浏览 1257回答 2
2回答

撒科打诨

可以尝试使用 @keyframes 自定义动画 + animation 来做到。

慕后森

<!DOCTYPE html><html><head>&nbsp; <meta charset="UTF-8">&nbsp; <title>Document</title>&nbsp; <script src="jquery.min.js"></script>&nbsp; <style>&nbsp; &nbsp; div{&nbsp; &nbsp; &nbsp; height: 100px;&nbsp; &nbsp; &nbsp; width: 100px;&nbsp; &nbsp; &nbsp; background-color: red;&nbsp; &nbsp; }&nbsp; &nbsp; @keyframes animation {&nbsp; &nbsp; &nbsp; 40% {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transform: rotate(120deg);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; 60% {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transform: rotate(120deg);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; 100% {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transform: rotate(240deg);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; .animation {&nbsp; &nbsp; animation: animation 2s ease;&nbsp; &nbsp; animation-fill-mode : forwards;/*保持结束位置*/&nbsp; }&nbsp; </style></head><body>&nbsp; <div class="animation">&nbsp; </div></body></html>
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

CSS3