这个动画主要是运用了一些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. 以蓝牙开发的视觉解读微信Airsync协议

    微信硬件平台使用蓝牙作为近场控制的连接件,并拟定了<微信蓝牙外设协议>.这份协议更像一个标准,用于规范微信和蓝牙外设之间的数据交互场景和接口.但从开发者来看,要完全读懂这份协议,恐怕需要熟 ...

  2. Android Studio 有用的插件

    从Eclipse切换到Android Studio 有一段时间了,发现as同,github,已经很多插件的集合有强大的合成效应. 安装插件请参考:http://blog.csdn.net/hyr839 ...

  3. python idle 清屏问题的解决

    在学习和使用python的过程中,少不了要与python idle打交道.但使用python idle都会遇到一个常见而又懊恼的问题——要怎么清屏?   我在stackoverflow看到这样两种答案 ...

  4. rails开发demo（一）搭建环境

    环境 ubuntu 14.04 为了安装rails4.2 和 ruby 2.2.2,这是目前稳定的最新版本,需要先安装rvm sudo apt-get update sudo apt-get inst ...

  5. forfiles命令批量删除N天前文件

    在整理手上几台SQL SERVER 2000的数据库备份时,一方面为了方便快速还原数据库,另外一方面为了备份冗余.备份方式统一(先备份到本地,然后收上磁带),将以前通过Symantec Backup ...

  6. linux配置文件的一些调优

    Linux中所有东西都是文件,一个socket就对应着一个文件描述符,因此系统配置的最大打开文件数以及单个进程能够打开的最大文件数就决定了socket的数目上限:但是linux是有文件句柄限制的,而且 ...

  7. 设计模式C#实现(四)——迭代器模式

    迭代器模式:提供一种方法顺序访问一个聚合对象中的各个元素,而又不暴露其内部的表示. UML类图: 煎饼屋和餐厅合并了!但是有个小问题,虽然两家都同意实现相同的菜单项MenuItem,但是煎饼屋想使用A ...

  8. 关于google电子地图跟卫星地图位置不重合

    再做项目时,用到了google地图的显示位置,就是在网页上插入事物在地图上的位置,点击卫星地图跟电子地图时发现不是重合,网上GOOGLE了下,说是加密的问题给偏移了500米左右,用google测量工具 ...

  9. java并发编程实践笔记

    文章转自:http://kenwublog.com/java-concurrency-in-practise-note 1, 保证线程安全的三种方法 :a, 不要跨线程访问共享变量b, 使共享变量是 ...

  10. bzoj-3288 3288: Mato矩阵(数论)

    题目链接: 3288: Mato矩阵 Time Limit: 10 Sec  Memory Limit: 128 MB Description Mato同学最近正在研究一种矩阵,这种矩阵有n行n列第i ...