<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS的各种形状和动画</title>
<link rel="stylesheet" type="text/css" href="./shape.css">
<link rel="stylesheet" type="text/css" href="./animate.css">
</head>
<body>
<div class="mg20" id="square"></div>
<div class="mg20" id="rectangle"></div>
<div class="mg20" id="circle"></div>
<div class="mg20" id="oval"></div>
<div class="mg20" id="triangle-up"></div>
<div class="mg20" id="triangle-down"></div>
<div class="mg20" id="triangle-left"></div>
<div class="mg20" id="triangle-right"></div>
<div class="mg20" id="triangle-topleft"></div>
<div class="mg20" id="triangle-topright"></div>
<div class="mg20" id="triangle-bottomleft"></div>
<div class="mg20" id="triangle-bottomright"></div>
<div class="mg20" id="parallelogram"></div>
<div class="mg20" id="trapezo"></div>
<div class="mg20" id="star-six"></div>
<div class="mg20" id="star-five"></div>
<div class="mg20" id="pentagon"></div>
<div class="mg20" id="hexagon"></div>
<div class="mg20" id="octagon"></div>
<div class="mg20" id="heart"></div>
<div class="mg20" id="egg"></div>
<div class="mg20" id="pacman"></div>
<div class="mg20" id="burst-12"></div>
<div class="animationArea">
<div class="animationAreas">
<div class="mg40 w300h300 animated infinite bounce"> bounce</div>
</div>
<div class="animationAreas">
<div class="mg40 w300h300 animated infinite flash">flash</div>
</div>
<div class="animationAreas">
<div class="mg40 w300h300 animated infinite pulse">pulse</div>
</div>
<div class="animationAreas">
<div class="mg40 w300h300 animated infinite rubberBand">rubberBand</div>
</div>
<div class="animationAreas">
<div class="mg40 w300h300 animated infinite shake">shake</div>
</div>
<div class="animationAreas">
<div class="mg40 w300h300 animated infinite swing">swing</div>
</div>
<div class="animationAreas">
<div class="mg40 w300h300 animated infinite tada">tada</div>
</div>
<div class="animationAreas">
<div class="mg40 w300h300 animated infinite wobble">wobble</div>
</div>
<div class="animationAreas">
<div class="mg40 w300h300 animated infinite bounceIn">bounceIn</div>
</div>
<div class="animationAreas">
<div class="mg40 w300h300 animated infinite bounceInDown">bounceInDown</div>
</div>
<div class="animationAreas">
<div class="mg40 w300h300 animated infinite bounceInLeft">bounceInLeft</div>
</div>
<div class="animationAreas">
<div class="mg40 w300h300 animated infinite bounceInRight">bounceInRight</div>
</div>
<div class="animationAreas">
<div class="mg40 w300h300 animated infinite bounceInUp">bounceInUp</div>
</div>
<div class="animationAreas">
<div class="mg40 w300h300 animated infinite bounceOut">bounceOut</div>
</div>
<div class="animationAreas">
<div class="mg40 w300h300 animated infinite bounceOutDown">bounceOutDown</div>
</div>
<div class="animationAreas">
<div class="mg40 w300h300 animated infinite bounceOutLeft">bounceOutLeft</div>
</div>
<div class="animationAreas">
<div class="mg40 w300h300 animated infinite bounceOutRight">bounceOutRight</div>
</div>
<div class="animationAreas">
<div class="mg40 w300h300 animated infinite bounceOutUp">bounceOutUp</div>
</div>
<div class="animationAreas">
<div class="mg40 w300h300 animated infinite fadeIn">fadeIn</div>
</div>
<div class="animationAreas">
<div class="mg40 w300h300 animated infinite fadeInDown">fadeInDown</div>
</div>
<div class="animationAreas">
<div class="mg40 w300h300 animated infinite fadeInDownBig">fadeInDownBig</div>
</div>
<div class="animationAreas">
<div class="mg40 w300h300 animated infinite fadeInLeft">fadeInLeft</div>
</div>
<div class="animationAreas">
<div class="mg40 w300h300 animated infinite fadeInLeftBig">fadeInLeftBig</div>
</div>
<div class="animationAreas">
<div class="mg40 w300h300 animated infinite fadeInRight">fadeInRight</div>
</div>
<div class="animationAreas">
<div class="mg40 w300h300 animated infinite fadeInRightBig">fadeInRightBig</div>
</div>
<div class="animationAreas">
<div class="mg40 w300h300 animated infinite fadeInUp">fadeInUp</div>
</div>
<div class="animationAreas">
<div class="mg40 w300h300 animated infinite fadeInUpBig">fadeInUpBig</div>
</div>
<div class="animationAreas">
<div class="mg40 w300h300 animated infinite fadeOut">fadeOut</div>
</div>
<div class="animationAreas">
<div class="mg40 w300h300 animated infinite fadeOutDown">fadeOutDown</div>
</div>
<div class="animationAreas">
<div class="mg40 w300h300 animated infinite fadeOutDownBig">fadeOutDownBig</div>
</div>
<div class="animationAreas">
<div class="mg40 w300h300 animated infinite fadeOutLeft">fadeOutLeft</div>
</div>
<div class="animationAreas">
<div class="mg40 w300h300 animated infinite fadeOutLeftBig">fadeOutLeftBig</div>
</div>
<div class="animationAreas">
<div class="mg40 w300h300 animated infinite fadeOutRight">fadeOutRight</div>
</div>
<div class="animationAreas">
<div class="mg40 w300h300 animated infinite fadeOutRightBig">fadeOutRightBig</div>
</div>
<div class="animationAreas">
<div class="mg40 w300h300 animated infinite fadeOutUp">fadeOutUp</div>
</div>
<div class="animationAreas">
<div class="mg40 w300h300 animated infinite fadeOutUpBig">fadeOutUpBig</div>
</div>
<div class="animationAreas">
<div class="mg40 w300h300 animated infinite flip">flip</div>
</div>
<div class="animationAreas">
<div class="mg40 w300h300 animated infinite flipInX">flipInX</div>
</div>
<div class="animationAreas">
<div class="mg40 w300h300 animated infinite flipInY">flipInY</div>
</div>
<div class="animationAreas">
<div class="mg40 w300h300 animated infinite flipOutX">flipOutX</div>
</div>
<div class="animationAreas">
<div class="mg40 w300h300 animated infinite flipOutY">flipOutY</div>
</div>
<div class="animationAreas">
<div class="mg40 w300h300 animated infinite lightSpeedIn">lightSpeedIn</div>
</div>
<div class="animationAreas">
<div class="mg40 w300h300 animated infinite lightSpeedOut">lightSpeedOut</div>
</div>
<div class="animationAreas">
<div class="mg40 w300h300 animated infinite rotateIn">rotateIn</div>
</div>
<div class="animationAreas">
<div class="mg40 w300h300 animated infinite rotateInDownLeft">rotateInDownLeft</div>
</div>
<div class="animationAreas">
<div class="mg40 w300h300 animated infinite rotateInDownRight">rotateInDownRight</div>
</div>
<div class="animationAreas">
<div class="mg40 w300h300 animated infinite rotateInUpLeft">rotateInUpLeft</div>
</div>
<div class="animationAreas">
<div class="mg40 w300h300 animated infinite rotateInUpRight">rotateInUpRight</div>
</div>
<div class="animationAreas">
<div class="mg40 w300h300 animated infinite rotateOut">rotateOut</div>
</div>
<div class="animationAreas">
<div class="mg40 w300h300 animated infinite rotateOutDownLeft">rotateOutDownLeft</div>
</div>
<div class="animationAreas">
<div class="mg40 w300h300 animated infinite rotateOutDownRight">rotateOutDownRight</div>
</div>
<div class="animationAreas">
<div class="mg40 w300h300 animated infinite rotateOutUpLeft">rotateOutUpLeft</div>
</div>
<div class="animationAreas">
<div class="mg40 w300h300 animated infinite rotateOutUpRight">rotateOutUpRight</div>
</div>
<div class="animationAreas">
<div class="mg40 w300h300 animated infinite hinge">hinge</div>
</div>
<div class="animationAreas">
<div class="mg40 w300h300 animated infinite rollIn">rollIn</div>
</div>
<div class="animationAreas">
<div class="mg40 w300h300 animated infinite rollOut">rollOut</div>
</div>
<div class="animationAreas">
<div class="mg40 w300h300 animated infinite zoomIn">zoomIn</div>
</div>
<div class="anim
CSS3动画效果-元素出入用
需积分: 50 5 浏览量
2015-07-28
13:58:20
上传
评论 1
收藏 8KB RAR 举报
baiding1123
- 粉丝: 79
- 资源: 12
最新资源
- 基于ThinkPHP的轻量级PHP开发框架设计源码
- 基于CSS的响应式鲜花网站全屏效果设计源码
- 基于JavaScript的访客预约系统设计源码
- 基于Vue和ECharts的工作租房数据可视化系统设计源码
- 1040g0cg310ravpiu6ibg5pg00tsipsln3ju2d0g 2
- 基于Python的SAR图像去噪CNN-NLM设计源码
- redhat6升级到redhat7,过程redhat6.x-> redhat6.10->rehat7.9 主版本最高版本
- 基于Django的流程引擎设计源码
- 基于Node.js的Express框架与MySQL的后台管理系统设计源码
- 基于Java的Flink流批一体数据处理快速集成开发框架设计源码
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈