• 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>
  • 相关阅读:
    【重构笔记02】重新组织函数
    【重构笔记01】第一个案例/补齐插件
    仿iphone日历插件(beta)
    都别说工资低了,我们来一起写简单的dom选择器吧!
    【单页应用】一起来单页应用吧,实现简单微博功能!(总结)
    【单页应用】一起来单页应用吧,实现简单微博功能!(下)
    【单页应用】一起来单页应用吧,实现简单微博功能!(上)
    RequireJS与Backbone简单整合
    初探Backbone
    RequireJS学习笔记
  • 原文地址:https://www.cnblogs.com/zourong/p/4775795.html
Copyright © 2020-2023  润新知