好!欢迎访问迷津渡口 现在时间是:

迷津渡口

越感到迷惑 越接近真理

css3圆角图片环绕动画及硬币效果和文字效果分享

话不多说,自行体验~

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>迷津渡口-css3圆角图片环绕动画及硬币效果和文字效果分享</title>
    <style type="text/css">
    .avatar {
        position: relative;
        -webkit-transition: all 0.35s ease-in-out;
        -moz-transition: all 0.35s ease-in-out;
        transition: all 0.35s ease-in-out;
    }
    
    .avatar,
    .avatar * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    
    .avatar img {
        width: 100%;
        height: 100%;
    }
    
    .avatar,
    .avatar .img {
        position: relative;
        border-radius: 50%;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -o-border-radius: 50%;
        -ms-border-radius: 50%;
    }
    
    .avatar,
    .avatar .img,
    .avatar .spinner {
        width: 150px;
        height: 150px;
        margin: 0 auto;
    }
    
    .avatar .img:before {
        position: absolute;
        display: block;
        content: '';
        width: 100%;
        height: 100%;
        border-radius: 50%;
        box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.3);
        -webkit-transition: all 0.35s ease-in-out;
        -moz-transition: all 0.35s ease-in-out;
        transition: all 0.35s ease-in-out;
    }
    
    .avatar .img img {
        border-radius: 50%;
    }
    
    .avatar .info {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        text-align: center;
        border-radius: 50%;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
    
    .avatar .spinner {
        border: 2px solid #36DD7F;
        border-right-color: #DFDFDF;
        border-bottom-color: #DFDFDF;
        border-radius: 50%;
        -webkit-transition: all 0.8s ease-in-out;
        -moz-transition: all 0.8s ease-in-out;
        transition: all 0.8s ease-in-out;
    }
    
    .avatar .img {
        position: absolute;
        top: 10px;
        bottom: 10px;
        left: 10px;
        right: 10px;
        width: auto;
        height: auto;
    }
    
    .avatar .info {
        top: 10px;
        bottom: 10px;
        left: 10px;
        right: 10px;
        background: #333333;
        background: rgba(0, 0, 0, 0.6);
        opacity: 0;
        -webkit-transition: all 0.8s ease-in-out;
        -moz-transition: all 0.8s ease-in-out;
        transition: all 0.8s ease-in-out;
    }
    
    .avatar .info h4 {
        color: #fff;
        position: relative;
        font-size: 1.2em;
        margin: 0 18px;
        padding: 1.6em 0 .5em;
    }
    
    .avatar .info p {
        color: #fff;
        padding: 10px 5px;
        margin: 0 10px;
        font-size: 18px;
        border-top: 1px solid #fff;
        width: 85% !important;
    }
    .avatar .info p a {
    	color:#fff;
  		text-decoration:none;
    }
    .avatar:hover .spinner{
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    
    .avatar:hover .info{
        opacity: 1;
    }
    </style>
</head>

<body>
    <div class="avatar">
        <div class="spinner"></div>
        <div class="img"><img src="http://www.qingzz.cn/content/uploadfile/201610/thum-bb3f1476538646.jpg" alt="小指"></div>
        <div class="info">
            <div class="info-back">
                <h4>站长</h4>
                <p><a href="http://www.qingzz.cn/" title="联系小指">小指</a></p>
            </div>
        </div>
    </div>
</body>

</html>

小指才疏学浅,有任何疏漏之处,欢迎不吝赐教~

点赞1
   支持一下
挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
 点赞
 签到
 表情
 图片
 代码
提交评论

清空信息
关闭评论
 00:00/00:00
我想和你虚度时光 - 花房姑娘(9)
  1. 恋恋风尘
  2. 恋恋风尘
  3. 恋恋风尘
  4. 恋恋风尘
  5. 恋恋风尘
  6. 恋恋风尘
  7. 恋恋风尘
  8. 恋恋风尘
  9. 恋恋风尘