前言
久伴使用的是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强制刷新,这样效果才会展示出来
感觉特效多了很影响速度，折腾过了还是感觉原始最初的好