这个动画主要是运用了一些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开发－本地持久化存储sqlite应用

    前言 需求描述 开发测试环境 FMDB介绍 创建工程 一.前言 上一章介绍了如何开发一个IOS应用的入门案例教程:                     我的第一个IOS开发应用    本章主要将介 ...

  2. IOS开发关于测试的好的网址资源

    1. 高级自动化单元测试,推荐看LeanCloud 工程师的李智维的自动化单元测试的直播录影李智维的演示github 2.iOS开发-单元测试 这只是一篇简单的ios测试介绍 3.iOS单元测试 来自 ...

  3. 小波说雨燕 第三季 构建 swift UI 之 UI组件集－视图集（二）ActionSheet视图 学习笔记

    action动作 sheet表 其实就是一种菜单 参数:1代理:谁去代理它2取消按钮标题3这个按钮标题会自动变成红色4添加设置其他按钮(不想加,设置为nil)   然后我们为这些按钮添加点击事件:   ...

  4. 关于手机微网站ICP备案

    今天终于拨通了陕西省通信管理局的电话,并告诉对方我们做的是一个化妆品的微网站,会涉及到使用使用支付宝支付. 询问"xxx微网站"网站经营类型,对方告知虽然使用支付宝,但是是微网站, ...

  5. [eclipse]改项目名称后tomcat连接问题解决方法

    背景:在我们使用eclipse进行项目开发时,有时候会需要修改项目名称,当改动项目名称后发现tomcat启动访问出现问题,使用新的项目名称不可行,使用旧的项目名称却可以.修改web.xml里面的dis ...

  6. python操作db2和mysql ,ibm_db

    我需要提取mysql和db2的数据进行对比,所以需要用python对其都进行操作. python对mysql进行操作应该没什么问题,就是安装drive后就可以了,在上一篇中有讲安装python-mys ...

  7. 【重构】 利用 cos 组件实现jsp中上传附件

    利用JSP&Servlet重构项目 利用 cos 组件实现jsp中上传附件 fileUpload.jsp --> FileUploadController.java --> fil ...

  8. http://runjs.cn/

    http://runjs.cn/ RunJS - 在线编辑.展示.分享.交流你的 JavaScript 代码

  9. linux下使用正确的用户名密码，本地无法连接mysql

    问题现象: Linux系统为CentOS 7.0 64位,通过IP远程mysql时,可以正常访问,确定账号密码没有问题.但是本地连接mysql时,提示ERROR 1045 (28000): Acces ...

  10. oracle 得到新插入数据的ID并使用

    DECLARE  newID varchar2(50);begininsert into table1 (aa,bb) values('7777','8888') RETURNING ID INTO ...