知更鸟主题给评论头像添加旋转变圆特效

宜家网
宜家网
宜家网
778
文章
57
评论
2019年4月28日14:59:53 3

知更鸟主题给评论头像添加旋转变圆特效
知更鸟主题原来的特效在鼠标经过的时候是并不会变成圆的,也没有如图显示的绿色阴影效果。
在原来的基础如你所见,是在Style.css文件添加了以下几行代码实现的。
知更鸟主题给评论头像添加旋转变圆特效知更鸟主题给评论头像添加旋转变圆特效
第一步,首先在Style.css中添加以下代码

  1. /**头像旋转的效果**/
  2. .avatar{
  3.    -webkit-transition:0.4s;
  4.    -webkit-transition:-webkit-transform 0.4s ease-out;
  5.    transition:transform 0.4s ease-out;
  6.    -moz-transition:-moz-transform 0.4s ease-out;
  7. }
  8. .avatar:hover{
  9.    transform:rotateZ(360deg);
  10.    -webkit-transform:rotateZ(360deg);
  11.    -moz-transform:rotateZ(360deg);
  12. }

第二步,在Style.css中查找以下代码并用新代码直接覆盖。
旧代码:

  1. .vcard .avatar {
  2.     float: left;
  3.     width: 64px;
  4.     height: 64px;
  5.     margin: 7px 10px 0 0;
  6.     padding: 3px;
  7.     border-radius: 5px;
  8.     border: 1px solid #ddd;
  9.     transition: all 0.8s ease 0s;
  10. }

用以下新代码直接替换。

  1. .vcard .avatar {
  2.     box-shadow:0px 0px 1px;
  3.     float: left;
  4.     width: 40px;
  5.     height: 40px;
  6.     margin: 6px 10px 0 0;
  7.     padding: 2px;
  8.     border: 1px solid #ddd;
  9.     transition: all 0.8s ease 0s;
  10.     -webkit-transition: all 0.8s ease 0s;
  11.     -moz-transition: all 0.8s ease 0s;
  12.     -o-transition: all 0.8s ease 0s;
  13.     -ms-transition: 0.8s;
  14. }
  15. .vcard:hover .avatar {
  16.     box-shadow:0px 0px 10px #0c0;
  17.     transform: rotate(720deg);
  18.     -webkit-transform: rotate(720deg);
  19.     -moz-transform: rotate(720deg);
  20.     -o-transform: rotate(720deg);
  21.     -ms-transform: rotate(720deg);
  22.     border-radius:40px!important;
  23.     filter:alpha(opacity=100)!important;
  24.     opacity:1!important;
  25. }
继续阅读
宜家网
  • 本文由 发表于 2019年4月28日14:59:53
  • 转载请务必保留本文链接:https://www.yjro.com/21830.html
wordpress的Canvas实现进度环返回顶部按钮 wp美化

wordpress的Canvas实现进度环返回顶部按钮

今天在一个网站上扒下了一个进度环返回顶部的按钮,感觉很有意思,比知更鸟自带的高大上的多,所以分享出来。 图片: 1.js代码 将以下代码保存到jindu.php文件中,然后上传到主题的js文件夹中: ...
为WordPress主题添加”网页加载中”特效 wp美化

为WordPress主题添加”网页加载中”特效

为了加强浏览者的体验,不在等待页面加载时感到枯燥,从而关闭网页,很多网站都会制作一个“网页正在加载中”的提示效果或显示加载进程,加载完成后提示消失,大部分都应用在网站的首页,今天我教大家把这一特效添加...
网站已安全运行X天X小时X分X秒 wp美化

网站已安全运行X天X小时X分X秒

(转自诗梦博客感谢分享)截止至现在本站已安全运行784天,还是和以前一样,就是人变懒了,代码都是以前的东西,css只是变颜色的可有可无,js自己找地方丢或一起放主题页脚文件即可,不懂留言~好久没发文章...
匿名

发表评论

匿名网友 填写信息

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

评论:3   其中:访客  3   博主  0
    • 弥雅 弥雅 1

      弥雅博客启用了新域名,麻烦顺便把友链那我博客的链接和名称更换一下吧!
      名称:弥雅博客
      链接:https://www.miyaboke.com

        • 企鹅博客 企鹅博客

          @ 弥雅 好的

        • 大爷快来玩 大爷快来玩 1

          现在不用写那么复杂了哇,