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

最新推荐文章于 2022-11-08 23:51:01 发布

frida522

最新推荐文章于 2022-11-08 23:51:01 发布

阅读量601

点赞数

分类专栏：常用网站效果

本文链接：https://blog.csdn.net/weixin_37860686/article/details/79971304

版权

常用网站效果专栏收录该内容

12 篇文章 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>

效果如下：