EMLOG评论头像变圆圈并转动代码 - 微夏博客网 - 致力于网络优秀资源的分享、交流!

  • 首页
  • PHP
  • EMLOG评论头像变圆圈并转动代码

EMLOG评论头像变圆圈并转动代码

由 ℡若兮相言 于 2015-12-4 20:50 Friday 发表,已有1333人观看。



     把评论头像变成圆圈的样子并转动,如上图所示

    主要运用了CSS代码,今天就给大家分享方法:

    如果没有CSS基础的朋友,要在网上看看相关的资料咯。

    首先,找到我们设置评论头像的CSS,比如易捷博客使用 ycyjkj{} ,我们就需要在属性处,添加以下代码:


    ycyjkj{
    border-radius: 50%;
    -webkit-transition: .4s all ease-in-out;
    -moz-transition: .4s all ease-in-out;
    -o-transition: .4s all ease-in-out;
    -ms-transition: .4s all ease-in-out;
    transition: .4s all ease-in-out;
    //这是把图片变为圆圈
    }

    下面的就是鼠标在图标上时,图片自动旋转

    ycyjkj:hover{
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
    -ms-transform:rotate(360deg);
    transform:rotate(360deg);
    //这是图像旋转
    //易捷博客网 www.vxia.net
    }

    图片就如文章最上方的演示效果图一样。


标签: 代码




↓↓↓↓↓你可能在找下面的内容↓↓↓↓↓

特别申明:若无说明,文章均为原创,转载时请注明本文地址,谢谢合作!
本文链接:
评论:
小强 2016-05-07 10:41 Google Chrome 31.0.1650.63 Windows XP
哎,不会用啊!

drgre 2015-12-08 17:46 Google Chrome 45.0.2454.101 Windows XP
学习了。。

℡若兮相言 2015-12-08 19:11
@drgre:这个效果用着还是挺不错的

bookcase 2015-12-06 23:04 Google Chrome 45.0.2454.101 Windows 7
都差点想把头像屏蔽了

℡若兮相言 2015-12-08 19:08
@bookcase:用这个效果感觉挺不错的

断水 2015-12-05 16:26 Google Chrome 46.0.2490.80 Windows 8.1
我来看下 我的小尾巴  群主不会介意吧?{哭}

℡若兮相言 2015-12-05 21:51
@断水:小尾巴??

℡若兮相言 2015-12-04 20:59 Google Chrome 45.0.2454.101 Windows 8.1
易捷博客网测试图片旋转{得意}

发表评论: