wordpress跟图片加上旋转效果

前言

久伴使用的是begin主题,首页网站介绍的头像是静态的看久了,感觉很普通,前几天久伴学习了transition过度效果,就简单的折腾了一下begin主题的头像,让其旋转起来了

效果

想体验更好就在本站首页找到关于网站,鼠标移动到头像位置即可体验

涉及知识点

transform:rotate(360deg) css转换旋转

transition(transform,ease-in-out,1s) css过度动画

第一个参数:表示带有transform的元素

第二个参数表示:过度动画效果

第三个参数表示:过度动画速度

其实也有第四个参数:也就是延迟过度时间,但是这里用不上

begin主题实现方案

在主题根目录打开style.css 搜索 .about-img img将transition: transform ease-in-out 1s; 加入进去
在将以下代码加入到begin style.css文件最后面

.about-img img:hover {
	transform: rotate(360deg); 
	 transition: transform ease-in-out 1s; 
}

注意

以上操作完成后,打开浏览器访问你的网站,然后按ctrl+F5强制刷新,这样效果才会展示出来