前言
久伴使用的是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强制刷新,这样效果才会展示出来
加群入久伴博客官方微信群
加入久伴官方微信群有啥优势?
1.文章内部资源由于时间久远可能失效,加群,群内可以第一时间反馈
2.网站中教程不一定适用任何人,加群可以第一时间咨询并解决您得疑惑
3.你游荡于互联网,也需要群体,加群一起互动交流,畅所欲言
扫描下方二维码即可加入交流讨论

感觉特效多了很影响速度,折腾过了还是感觉原始最初的好