这个动画主要是运用了一些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. HTTP通信过程底层实现原理

  2. iOS之 PJSIP静态库编译（三）

    dada哪个所有静态库编译完成后还是不能运行那个demo,提示你找不到arm**.a 你lipo后要记得吧合并成.a  名字更改成你最后编译版本生成的.a名字....... 或者吧所有库add到你的工 ...

  3. CocoaPods的使用（图文并茂）OS X 10.11 系统

    系统:OS X EI Capitan 版本:10.11.2 开发工具:XCode:7.2 要使用CocoaPods,那么就需要先安装哦,你安装了么?如果没安装那就请阅读我的前篇<OS X 10. ...

  4. MyCat 学习笔记 第七篇.数据分片 之 按数据范围分片

    1 应用场景 Mycat 其实自带了2个数据范围分片的方案,一个是纯数据范围的分片,比如 1至 10000 号的数据放到分片1 ,10001 至 20000号数据放到分片2里. 另一个是数据常量形式的 ...

  5. 20150912华为机考1之"输入一个字符串，将其中出现次数最多的字符输出"

    不吐槽华为的服务器了,直接上正文 输入:字符串(英文字母),长度不超过128 输出:出现频率最高的字母 思路写在注释文档 /* Input a string * Output the most fre ...

  6. Hive2 jdbc test

    package andes; import java.io.BufferedWriter; import java.io.FileOutputStream; import java.io.IOExce ...

  7. openPOWERLINK官方安装版例程(v2.3.0)附带mnobd.cdc文件断句

    demo_mn_qt.exe启动所需载入的mnobd.cdc文件断句(备忘) //// Project: Demo_3CN //// NodeCount: 3 //// 0000003A //// N ...

  8. 【问题&解决】解决创建Android模拟器时提示"No system images installed for this target"的问题

    在创建Android模拟器时间发现提示“No system images installed for this target”问题,无法创建模拟器,如下图: 解决:经上网查证,发现原因在于CPU/AB ...

  9. 算法最坏，平均和最佳情况(Worst, Average and Best Cases)-------geeksforgeeks 翻译

    最坏,平均和最佳运行时间(Worst, Average and Best Cases) 在上一篇文章中,我们讨论到了渐进分析可以解决分析算法的问题,那么在这一篇中,我们用线性搜索来举例说明一下如何用渐 ...

  10. python中str（）和repr（）的区别

    >>> s = 'Hello, world.' >>> str(s) 'Hello, world.' >>> repr(s) "'Hel ...