头像上做鼠标浮上显示连接的动画效果

314人阅读 评论(0) 收藏 举报
分类:

鼠标浮上产生旋转动画; 出现连接;

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .case-item{width: 118px; height: 118px ; margin: 0 auto}
        .ih-item{position:relative;-webkit-transition:all .35s ease-in-out;-moz-transition:all .35s ease-in-out;transition:all .35s ease-in-out}
        .ih-item,.ih-item *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
        .ih-item a{color:#333}
        .ih-item a:hover{text-decoration:none}
        .ih-item img{width:100%;height:100%}
        .ih-item.circle,.ih-item.circle .img{position:relative;width:118px;height:118px;border-radius:50%}
        .ih-item.circle .img:before{position:absolute;display:block;content:'';width:100%;height:100%;border-radius:50%;box-shadow:inset 0 0 0 16px rgba(255,255,255,.6),0 1px 2px rgba(0,0,0,.3);-webkit-transition:all .35s ease-in-out;-moz-transition:all .35s ease-in-out;transition:all .35s ease-in-out}
        .ih-item.circle .img img{border-radius:50%}
        .ih-item.circle .info{position:absolute;top:0;bottom:0;left:0;right:0;text-align:center;border-radius:50%;-webkit-backface-visibility:hidden;backface-visibility:hidden}
        .ih-item.square{position:relative;width:316px;height:216px;border:8px solid #fff;box-shadow:1px 1px 3px rgba(0,0,0,.3)}
        .ih-item.square .info{position:absolute;top:0;bottom:0;left:0;right:0;text-align:center;-webkit-backface-visibility:hidden;backface-visibility:hidden}
        .ih-item.circle.effect1 .spinner{width:126px;height:126px;border:8px solid #ec4e6f;border-right-color:#eb7c40;border-bottom-color:#eb7c40;border-radius:50%;-webkit-transition:all .8s ease-in-out;-moz-transition:all .8s ease-in-out;transition:all .8s ease-in-out}
        .ih-item.circle.effect1 .img{position:absolute;top:8px;bottom:0;left:8px;right:0;width:auto;height:auto}
        .ih-item.circle.effect1 .img:before{display:none}
        .ih-item.circle.effect1.colored .info{background:#1a4a72;background:rgba(26,74,114,.6)}
        .ih-item.circle.effect1 .info{top:8px;bottom:0;left:8px;right:0;background:#333;background:rgba(0,0,0,.6);opacity:0;-webkit-transition:all .8s ease-in-out;-moz-transition:all .8s ease-in-out;transition:all .8s ease-in-out}
        .ih-item.circle.effect1 .info p{color:#bbb;font-style:italic;margin:45px 5px;font-size:13px;}
        .ih-item.circle.effect1 a:hover .spinner{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg)}
        .ih-item.circle.effect1 a:hover .info{opacity:1}

    </style>
</head>
<body>
<div class="case-item">
    <div class="ih-item circle effect1">
        <a href="###" target="_blank">
            <div class="spinner"></div>
            <div class="img"><img src="http://101.201.30.149/data/upload/shop/avatar/1742_1501217392.jpg"></div>
            <div class="info">
                <div class="info-back">
                    <p>点击进入直播室</p>
                </div>
            </div>
        </a>
    </div>
    </div>
</body>
</html>

效果如下:


也可以加入自己的创意。

查看评论

JS实现鼠标经过用户头像显示资料卡的效果,可点击

基于项目的需要,需要制作出如下的一种页面效果:当用户鼠标经过好友列表中好友头像时,显示该好友的基本资料,其实也就是类似QQ客户端的那种功能。        网上找了很多代码,基本都实现了鼠标悬浮之...
  • u012909091
  • u012909091
  • 2014-07-01 19:56:23
  • 3841

jquery鼠标悬浮改变图片插件

  • 2009年10月19日 10:41
  • 484B
  • 下载

csdn上鼠标移到头像就显示信息

如题,这个是怎么实现的,纯js还是要Ajax,有没有类似功能的代码帮帮忙啊 最近一个小项目可能要用到类似的功能一般情况下,要用更新数据库都要事先通过SQLStr确定要更新的数据库和字段,例如我现在要做...
  • wd555wdd
  • wd555wdd
  • 2010-12-11 22:06:00
  • 1199

(19)延时提示框--模仿QQ鼠标移进头像的时候会显示相应的资料过程

当鼠标移动
  • Xuan6251237011
  • Xuan6251237011
  • 2014-05-31 15:25:04
  • 1333

android 头像显示效果(头像散开动画效果)

  • 2015年07月15日 15:57
  • 6.24MB
  • 下载

CSS实现鼠标悬浮内容自动撑开的过渡动画

实现鼠标悬浮内容自动撑开的过渡动画需求需要为一个列表添加个动画,容器的高度是不确定的,也就是高度为 auto,悬浮时候撑开内容有个过渡动画如下图所示:而用 CSS3 实现的话,由于高度的不确定,而 t...
  • qq_36279445
  • qq_36279445
  • 2017-12-25 09:57:10
  • 138

鼠标悬停图片变大

function resize_img1() { var pic = document.all.img1; ...
  • netzmj
  • netzmj
  • 2011-11-16 20:44:54
  • 1455

用css3实现鼠标移入在原来的层上面显示另一个层的动画效果

演示效果       这是当鼠标移入会在原来的层上显示另一个层的动画,我这个页面里有很多项都需要用这个效果,之前我想用js来实现这个效果,不过弹出来的层的位置不好固定,特别是页面里有太多这个效果,而最...
  • dengdengda
  • dengdengda
  • 2015-11-01 16:16:40
  • 6894

CSS之浮动布局与常用标签

CSS浮动布局与常用标签 浮动布局 float left | right | none 向左浮动 向右浮动 清除浮动 一些标签会自带浮动布局,此时要想清除掉这些浮动 需要使用float n...
  • liurongsheng123
  • liurongsheng123
  • 2018-02-28 22:51:09
  • 71

ARM9开发板连接鼠标和键盘

偶发奇想,突然想到用usb分线器让ARM9开发板和鼠标键盘相连接。 运行成功,arm板里驱动都有。试了一下终端,可以用键盘输入命令,删除等操作。 鼠标可以在界面移动单击是确定进入。 音响线和ar...
  • lbd321
  • lbd321
  • 2017-01-06 22:39:01
  • 987
    个人资料
    持之以恒
    等级:
    访问量: 1902
    积分: 476
    排名: 10万+
    文章存档
    最新评论