css3动画4
效果：
代码：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
/* Index Card Styling */
*
{
margin:0; padding:0;}
ul#index_cards {
margin-top:50px;
text-align:center;
} ul#index_cards li {
background:url(Images/card_bg.jpg) repeat;
height:450px;
width:130px;
display:block;
float:left;
border:1px solid #666;
padding:25px 10px;
position:relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-moz-box-shadow: 2px 2px 10px #000;
-webkit-box-shadow: 2px 2px 10px #000;
-moz-transition: all 0.5s ease-in-out; /*动画*/
-webkit-transition: all 0.5s ease-in-out;
margin-bottom:70px;
} #card-1 {
-webkit-transform: rotate(-20deg); /*变形 静态属性*/
-moz-transform: rotate(-20deg);
z-index:1;
left:150px;
top:40px;
} #card-2 {
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
z-index:2;
left:70px;
top:10px;
} #card-3 {
background-color:#69732B;
z-index:3;
} #card-4 {
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
z-index:2;
right:70px;
top:10px;
} #card-5 {
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
z-index:1;
right:150px;
top:40px;
} /* Hover States */ ul#index_cards li:hover {
z-index:4;
} #card-1:hover {
-moz-transform: scale(1.1) rotate(-18deg);
-webkit-transform: scale(1.1) rotate(-18deg);
} #card-2:hover {
-moz-transform: scale(1.1) rotate(-8deg);
-webkit-transform: scale(1.1) rotate(-8deg);
} #card-3:hover {
-moz-transform: scale(1.1) rotate(2deg);
-webkit-transform: scale(1.1) rotate(2deg);
} #card-4:hover {
-moz-transform: scale(1.1) rotate(12deg);
-webkit-transform: scale(1.1) rotate(12deg);
} #card-5:hover {
-moz-transform: scale(1.1) rotate(22deg);
-webkit-transform: scale(1.1) rotate(22deg);
} /* Content Styling */ ul#index_cards li img {
margin-top:7px;
background:#eee;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0px 0px 5px #aaa;
-webkit-box-shadow: 0px 0px 5px #aaa;
} ul#index_cards li p {
margin-top:4px;
text-align:left;
line-height:28px;
} </style>
</head>
<body>
<ul id="index_cards">
<li id="card-1">
<h3>Card 1</h3>
<img src="data:images/t9tuqui_trans.png" height="130" width="130" alt="Toucan">
<p>Name: Toucan<br>
Age: 5<br>
Size: 50 cm<br>
Weight: 600 g<br>
Food: Fruit<br>
Toucan lives in southern and central America and loves to fly around</p>
</li>
<li id="card-2">
<h3>Card 2</h3>
<img src="data:images/t9foxy_trans.png" height="130" width="130" alt="Fox">
<p>Name: Fox<br>
Age: 3<br>
Size: 70 cm<br>
Weight: 5.5 kg<br>
Food: Meat<br>
Fox lives in the northern hemisphere and loves to play seek and hide</p>
</li>
<li id="card-3">
<h3>Card 3</h3>
<img src="data:images/t9dog2_trans.png" height="130" width="130" alt="Dog">
<p>Name: Dog<br>
Age: 8<br>
Size: 120 cm<br>
Weight: 10 kg<br>
Food: Bones<br>
Dog lives in a dog hut and loves to chew shoes, bark and go for walks</p>
</li>
<li id="card-4">
<h3>Card 4</h3>
<img src="data:images/t9penguino_trans.png" height="130" width="130" alt="Penguin">
<p>Name: Penguin<br>
Age: 20<br>
Size: 110 cm<br>
Weight: 35 kg<br>
Food: Fish<br>
Penguin lives where it's cold and icy and loves to swim and dive</p>
</li>
<li id="card-5">
<h3>Card 5</h3>
<img src="data:images/t9lion_trans.png" height="130" width="130" alt="Lion">
<p>Name: Lion<br>
Age: 12<br>
Size: 190 cm<br>
Weight: 180 kg<br>
Food: Meat<br>
Lions lives in Africa and loves to sleep most of the day and hunt sometimes</p>
</li>
</ul>
</body>
</html>
css3动画4的更多相关文章
- css3动画第一式--简单翻滚
在w3cschool上面查阅css3的动画语法手册时,发现“css3 动画”栏目首页放了一个翻滚的div动画案例,觉得挺好看的,于是就自己模仿着写了一下,感觉还行O(∩_∩)O哈哈~ 查看原地址 下面 ...
- CSS3动画制作
CSS3动画制作 rotate 绕中心旋转 fadeInPendingFadeOutUp 先渐现,停留2s,再向上滑动并逐渐消失 fadeInUp2D 向上滑动并渐现, 因Animate.css的fa ...
- 学习CSS3动画（animation）
CSS3就是出了不少高大上的功能,3D效果.动画.多列等等.今天写篇文章记录怎么一下怎么用CSS3写一个动画. 丑话还得说前头,IE9以及以下版本不支持CSS3动画(如真要实现可以考虑用js,不过估计 ...
- 用CSS3动画，让页面动起来
以前就听说过有个库,叫animate.css,但是自己并没有在实际项目中使用过,这次正好要做个招聘页面,得以利用一下这个库,在经常会卡顿的UC浏览器中也能流畅执行. 扫描下面的二维码,可以看到在线的d ...
- CSS3动画几个平时没注意的属性
一.timing-function: steps() 一开始在使用CSS3的时候并没有太注意这个timing-function,只是注意到自定义贝塞尔曲线. 1)一个项目中的实例 先来看看左边加了st ...
- 用CSS3动画特效实现弹窗效果
提示:如果大家觉得本篇实现的弹窗效果有用,可持续关注.接下会添加更多效果并且封装成插件,这样使用就方便了.效果查看: https://heavis.github.io/hidialog/index.h ...
- JavaScript - 基于CSS3动画的实现
在痛苦的IE8时代,所有的动画都只能基于自己计算相关动画属性,开定时器setTimeout/setInterval轮询动画任务. 而肩负重任的HTML5,早已注意到了日益增强的动画,随着HTML5的降 ...
- CSS3动画事件
CSS3 的动画效果强大,在移动端使用广泛,动画执行开始和结束都可以使用JS来监听其事件. animationstart animationend 以下是一个示例 <!DOCTYPE html& ...
- css3动画简介以及动画库animate.css的使用
在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...
- 简单CSS3动画制作
本贴已重新编辑至http://www.cnblogs.com/fastmover/p/4977358.html 最近需要用到了一些CSS3动画,基本用Animate.css(https://githu ...
随机推荐
- 页面嵌入QQ功能(点QQ建立一个临时会话，显示在页面的固定位置)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Node.js monly图片批量下载爬虫1.00
此爬虫又用到了iconv转码,代码如下: //====================================================== // mmonly图片批量下载爬虫1.00 ...
- Hooops - iPhone上的Dribbble应用
来源:GBin1.com Dribbble一直没有一个官方的应用,有时候这真的很恶心.有时你远离电脑,却想浏览一些镜头来寻找灵感.对于那些喜欢Dribbble自然,充满原始感觉的人们,非常幸运的,可以 ...
- WinKawaks如何载入游戏
1 把下载的游戏放入roms目录 2 运行Kawaks,点击载入游戏,勾选"仅存在的",点击扫描所有游戏.然后会出现所有名字正确的游戏.你下载的zip如果有中文或者名字不对,都是无 ...
- 算法笔记_089:蓝桥杯练习 7-2求arccos值（Java）
目录 1 问题描述 2 解决方案 1 问题描述 问题描述 利用标准库中的cos(x)和fabs(x)函数实现arccos(x)函数,x取值范围是[-1, 1],返回值为[0, PI].要求结果准确 ...
- openSession() 与 getCurrentSession() 有何不同和关联呢？
在 SessionFactory 启动的时候, Hibernate 会根据配置创建相应的 CurrentSessionContext ,在getCurrentSession() 被调用的时候,实际被执 ...
- scott权限
有时scott数据被破坏了 可以回复 以下为 安装路径 dos下 @G:\app\Administrator\product\11.2.0\dbhome_1\RDBMS\ADMIN\scott. ...
- jquery mobile 的loading提示“正在加载...”在不同版本中的不同实现方式
在jquery mobile开发中,在页面的切换.或者ajax获取数据时由于网速慢等其他原因,会有一个加载的时间,如果能在这段时间给一个“正在加载...”的提示,用户体验会更好.下面来简单的介绍一下在 ...
- php处理行业分类数据
实现步骤: 1.将excel表格存储为后缀名为 .csv格式的文件: 2.将.csv格式文件导入到mysql数据库中: 3.通过条件查询将所需要的数据查出并导入另一个数据表中: 下面是一些php片段: ...
- PHP REST架构简单设计
REST是什么? REST(Representational State Transfer表述性状态转移)是一种针对网络应用的设计和开发方式,可以降低开发的复杂性,提高系统的可伸缩性. REST的特点 ...