wordpress跟图片加上旋转效果

久伴
久伴
久伴
645
文章
535
评论
2020年6月26日12:10:27 1 107 515字阅读1分43秒

前言

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

效果

wordpress跟图片加上旋转效果 想体验更好就在本站首页找到关于网站,鼠标移动到头像位置即可体验

涉及知识点

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强制刷新,这样效果才会展示出来

久伴
opcache 带网站走向0.00x秒 wordpress教程

opcache 带网站走向0.00x秒

一个站点长时间的运营后,内容不断加大速度逐渐下降所以今天交大家怎么玩opcache 带网站走向0.00x秒, 找到“opcache”安装后找到,配置文件 搜索内容:opcache找到以下代码 opca...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

评论:1   其中:访客  1   博主  0
    • Ourboke联盟 Ourboke联盟 3

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