CSS 动画之十-图片+图片信息展示

这个动画主要是运用了一些css3的特性，效果是展示一张商品图片，然后在商品图片的制定位置显示该商品的详细信息。效果在chrome浏览器中预览。

 

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8;">
<title>图片+图片上的说明信息</title>
<meta name="author" content="rainna" />
<meta name="keywords" content="rainna's css lib" />
<meta name="description" content="CSS3" />
<style>
*{margin:0;padding:0;}
body{background:#f0f0f0;font-family:'Microsoft Yahei';}

.m-pics{width:500px;margin:100px auto;padding:50px;background:#fff;}
.m-pics .item{position:relative;margin:0 0 20px;}
.m-pics .pic img{display:block;}
.m-pics .intro,.m-pics .icon,.m-pics .txt{position:absolute;}
.m-pics .icon span{position:absolute;z-index:3;width:15px;height:15px;border-radius:15px;background:#fff;}
.m-pics .icon:before,.m-pics .icon:after{content:'';position:absolute;left:-3px;top:-3px;z-index:2;width:21px;height:21px;background:rgba(255,255,255,0.8);border-radius:21px;}
.m-pics .icon:after{left:-5px;top:-5px;z-index:1;width:25px;height:25px;background:rgba(0,0,0,.5);border-radius:25px;}
.m-pics .txt{left:45px;top:-55px;padding:0 15px;border-bottom:1px solid #fff;color:#fff;font-size:14px;line-height:26px;white-space:nowrap;}
.m-pics .txt:before{content:'';position:absolute;left:-34px;top:40px;width:40px;height:1px;background:#fff;-webkit-transform:rotate(-45deg);}
.m-pics .txt:nth-child(2){top:15px;}
.m-pics .txt:nth-child(2)::before{top:12px;-webkit-transform:rotate(45deg);}
.m-pics .txt:nth-child(3){left:auto;right:30px;}
.m-pics .txt:nth-child(3)::before{left:auto;right:-34px;-webkit-transform:rotate(45deg);}
.m-pics .txt:nth-child(4){left:auto;right:30px;top:15px;}
.m-pics .txt:nth-child(4)::before{left:auto;right:-34px;top:12px;}

.m-pics .intro .icon{-webkit-animation:lazyload 1s;}
.m-pics .intro .txt{-webkit-animation:lazyload2 1s;}
.m-pics .intro .txt:nth-child(2){-webkit-animation:lazyload2 2s;}
.m-pics .intro .txt:nth-child(3){-webkit-animation:lazyload2 3s;}
.m-pics .intro .txt:nth-child(4){-webkit-animation:lazyload2 4s;}
.m-pics .icon:before{-webkit-animation:bling 1s infinite;}
.m-pics .icon span{-webkit-animation:bling2 1s infinite;}
@-webkit-keyframes lazyload{
    0%{opacity:0;}
    100%{opacity:1;}
}
@-webkit-keyframes lazyload2{
    0%,40%{opacity:0;}
    100%{opacity:1;}
}
@-webkit-keyframes bling{
    0%{opacity:1;}
    100%{opacity:0;-webkit-transform:scale(3);}
}
@-webkit-keyframes bling2{
    0%{}
    100%{-webkit-transform:scale(0.8);}
}
</style>
</head>

<body>
<div class="m-pics">
    <div class="item">
        <div class="pic"><img width="500" src="http://o4.xiaohongshu.com/discovery/w640/1f3c7e8e89f67a9c47fa40fe620524a7_640_640_92.jpg" /></div>
        <div class="intro" style="left:320px;top:420px;">
            <div class="txt">花王碧柔防晒霜</div>
            <div class="txt">日本</div>
            <div class="txt">50人名币</div>
            <div class="txt">50ML</div>
            <div class="icon"><span></span></div>
        </div>
    </div>
</div>
</body>
</html>

 

posted @ 2015-09-01 15:18  ZRainna  阅读(378)  评论(0)  编辑  收藏  举报