这个动画主要是运用了一些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. iOS开发笔记3：XML/JSON数据解析

    这篇主要总结在iOS开发中XML/JSON数据解析过程用到的方法.XML数据解析主要使用SAX方式的NSXMLParser以及DOM方式的GDataXML,JSON数据解析主要使用NSJSONSeri ...

  2. iOS网络-05-AFNetwoking原理及常用操作

    AFN的六大模块 NSURLConnection,主要对NSURLConnection进行了进一步的封装,包含以下核心的类: AFURLConnectionOperation AFHTTPReques ...

  3. 双系统如何删除Linux，恢复Windows从MBR引导启动？

    嗯,现在愿意尝试Linux的人越来越多了.通常,如果一台电脑里已经装有了Windows,再装Linux,安装时,Linux的grub引导程 序就会覆盖掉保存在MBR当中的原来的Windows引导程序. ...

  4. 整理了一些常用的jQuery动画事件

    部分jQuery常用的动画函数,整理了一下,在做交互式页面的时候挺有用的 .css('a','12px');.css({  a:'12px',  b:'#fff'}); .show();.hide() ...

  5. 解决log4j:WARN No appenders could be found for logger (org.springframework.web.context.ContextLoader)警告信息的问题

    spring项目经常在启动tomcat时报如下警告信息: log4j:WARN No appenders could be found for logger (org.springframework. ...

  6. python文件和元组

    python文件操作 相较于java,Python里的文件操作简单了很多 python 获取当前文件所在的文件夹: os.path.dirname(__file__) 写了一个工具类,用来在当前文件夹 ...

  7. 【php】使用phpdbg来调试php程序

    PHPDBG是一个PHP的SAPI模块,可以在不用修改代码和不影响性能的情况下控制PHP的运行环境 可以在PHP5.4和之上版本中使用.在PHP5.6和之上版本将内部集成 功能 单步调试 灵活的下断点 ...

  8. Windows Server 2012 R2 IIS8.5+PHP(FastCGI)+MySQL环境搭建教程

    准备篇 一.环境说明: 操作系统:Windows Server 2012 R2 PHP版本:php 5.5.8 MySQL版本:MySQL5.6.15 二.相关软件下载: 1.PHP下载地址: htt ...

  9. cocos2d-x之多个移动的小球

    MoveBalls.hpp: #ifndef MoveBalls_hpp #define MoveBalls_hpp #include <stdio.h> #include "c ...

  10. 手机号码js正则验证

    手机号码js正则验证 var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/; if (!myreg.test($(" ...