这个动画主要是运用了一些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>

CSS 动画之十-图片+图片信息展示的更多相关文章

  1. 关于CSS动画效果的图片展示

    animation:帧动画 animation-name:定义绑定Keyframes的动画名称 @keyframes XXX 定义动画,里面是动画具体内容 animation-duration:过渡动 ...

  2. 谈谈一些有趣的CSS题目（十四）-- 纯 CSS 方式实现 CSS 动画的暂停与播放！

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  3. CSS动画与GPU

    写在前面 满世界的动画性能优化技巧,例如: 只允许改变transform.opacity,其它属性不要动,避免重新计算布局(reflow) 对动画元素应用transform: translate3d( ...

  4. CSS 动画一站式指南

    CSS 动画一站式指南 目录 CSS 动画一站式指南 1. CSS 动画 1.1 变换 1.1.1 变换属性介绍 1.1.2 变换动画实践 1.2 过渡 1.2.1 过渡属性介绍 1.2.2 过渡动画 ...

  5. 15个来自 CodePen 的酷炫 CSS 动画效果【下篇】

    CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...

  6. 赞！15个来自 CodePen 的酷炫 CSS 动画效果

    CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...

  7. 谈谈一些有趣的CSS题目（十五）-- 奇妙的 background-clip: text

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  8. 盒子端 CSS 动画性能提升研究

    不同于传统的 PC Web 或者是移动 WEB,在腾讯视频客厅盒子端,接大屏显示器(电视)下,许多能流畅运行于 PC 端.移动端的 Web 动画,受限于硬件水平,在盒子端的表现的往往不尽如人意. 基于 ...

  9. 谈谈一些有趣的CSS题目（十六）-- 奇妙的 background-clip: text

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

随机推荐

  1. Android 实用代码片段

    一些不常见确又很实用的代码块. 1.精确获取屏幕尺寸(例如:3.5.4.0.5.0寸屏幕) public static double getScreenPhysicalSize(Activity ct ...

  2. Entity Framework 异常档案

    1.异常 The model backing the 'DBContext' context has changed since the database was created.Consider u ...

  3. jQuery最佳实践(不断更新中...)

    1. 处理cdn失效 <script type="text/javascript" src="http://xxx.com/jquery.min.js " ...

  4. oracle数据库ORA-01654 错误的解决方法

    引言: 数据库突然报: ORA-01654: unable to extend index BO.INDEX_indexname by 311072 in tablespace 错误,上网查原因,发现 ...

  5. Spring @Transactional ——事务回滚

    工作原理运行配置@Transactional注解的测试类的时候,具体会发生如下步骤1)事务开始时,通过AOP机制,生成一个代理connection对象,并将其放入DataSource实例的某个与Dat ...

  6. hdu 敌兵布阵（线段树之单点更新）

    敌兵布阵 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submi ...

  7. 1.NopCommerce下载与安装

    NoCommerce是基于微软ASP.NET MVC + EntityFramework 技术开发的一套开源电子商城系统,其架构与设计非常精妙被誉为.NET商城的经典之作. 作为一个.NET程序爱好者 ...

  8. [转]让Windows Server 2008 + IIS 7+ ASP.NET 支持10万并发请求

    本文转自:http://www.cnblogs.com/dudu/archive/2009/11/10/1600062.html 今天下午17点左右,博客园博客站点出现这样的错误信息: Error S ...

  9. uva 816 abbott's revenge ——yhx

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAncAAAN5CAYAAABqtx2mAAAgAElEQVR4nOy9sY4jydKezVuoayhH0r

  10. 匈牙利算法 codevs 2776 寻找代表元

    codevs 2776 寻找代表元  时间限制: 1 s  空间限制: 256000 KB  题目等级 : 黄金 Gold 题目描述 Description 广州二中苏元实验学校一共有n个社团,分别用 ...