欢迎访问
这里是荆棘的私人博客
螓首蛾眉
纯CSS给图片加个旋转动画

参考:https://blog.csdn.net/zyddj123/article/details/81489364

一些废话

本来有个买了6年的域名jsun969.cn,但是没法备案就一直闲置,网页用了HTML5UP的模板,自己稍微修改了一下,开了个主页,看起来也不错

https://upyun.myheod.cn/2020/04/Snipaste_2020-04-23_09-25-14.png
网页背景调用了Bing日图但是服务器非常土豆,很可能没法显示

演示

如题,这是旋转动画的demo

https://upyun.myheod.cn/2020/04/demo.gif
鼠标触发

代码

用了hover,直接上代码

img.turnAround:hover{
	transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-ms-transform: rotate(360deg);
}

但是不能让他直接旋转,得有个动画过程,所以

-webkit-transition: all 1.5s ease-in-out;
-moz-transition: all 1.5s ease-in-out;
-o-transition: all 1.5s ease-in-out;
-ms-transition: all 1.5s ease-in-out;

然后,鼠标移开要转回来,那么全部代码就是

img.turnAround:hover{
	transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-ms-transform: rotate(360deg);
}
img.turnAround{
	transform: rotate(-360deg);
	-webkit-transition: all 1.5s ease-in-out;
	-moz-transition: all 1.5s ease-in-out;
	-o-transition: all 1.5s ease-in-out;
	-ms-transition: all 1.5s ease-in-out;
	-webkit-transform: rotate(-360deg);
	-moz-transform: rotate(-360deg);
	-o-transform: rotate(-360deg);
	-ms-transform: rotate(-360deg);
}

最后,给图片加上这个turnAround的class就完事了

<img src="xxx" class="turnAround" alt="xxx" />

赞赏
首页      建站      纯CSS给图片加个旋转动画

发表评论

textsms
account_circle
email

螓首蛾眉

纯CSS给图片加个旋转动画
 参考:https://blog.csdn.net/zyddj123/article/details/81489364 一些废话 本来有个买了6年的域名jsun969.cn,但是没法备案就一直闲置,网页用了HTML5UP的模板,自己稍微修改了一…
扫描二维码继续阅读
2020-04-23