前言
久伴使用的是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.你游荡于互联网，也需要群体，加群一起互动交流，畅所欲言
扫描下方二维码即可加入交流讨论
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
感觉特效多了很影响速度，折腾过了还是感觉原始最初的好