主要有transform, transform-origin, transition和animation效果。
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Animation</title>
<style type="text/css">
* {
font-family: verdana;
}
h1 {
font-size: 18px;
}
h3 {
font-size: 14px;
}
.title {
clear: both;
margin-top: 10px;
border-top: 1px dashed #CCC;
}
.transform {
float: left;
position: relative;
margin: 10px;
width: 200px;
height: 200px;
border: 1px solid #AAA;
}
.transform h1, .transform h3{
text-align: center;
}
.transform .block {
position: absolute;
top: 80px;
left: 70px;
width: 50px;
height: 50px;
border: 1px solid #FFF;
filter: Alpha(opacity=70);
color: #FFF;
background-color: #335C85;
background-color: rgba(51, 92, 133, 0.7);
}
.transform .rotate {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.transform .scale {
-webkit-transform: scale(2);
-moz-transform: scale(2);
-o-transform: scale(2);
transform: scale(2);
top: 120px;
left: 110px;
}
.transform .translate {
-webkit-transform: translate(10px, 20px);
-moz-transform: translate(10px, 20px);
-o-transform: translate(10px, 20px);
transform: translate(10px, 20px);
}
.transform .skew {
-webkit-transform: skew(30deg, -10deg);
-moz-transform: skew(30deg, -10deg);
-o-transform: skew(30deg, -10deg);
transform: skew(30deg, -10deg);
}
.transform .matrix {
-webkit-transform:matrix(1, 0.5, 0.5, 1, 30, 30);
-moz-transform:matrix(1, 0.5, 0.5, 1, 30px, 30px);
-o-transform:matrix(1, 0.5, 0.5, 1, 30, 30);
transform:matrix(1, 0.5, 0.5, 1, 30, 30);
}
.transform .transform-origin {
-webkit-transform-origin: 10% 10%;
-moz-transform-origin: 10% 10%;
-o-transform-origin: 10% 10%;
transform-origin: 10% 10%;
}
.transform div:hover.transition {
background-color: #B2C6D8;
-webkit-transition-property: background-color;
-webkit-transition-duration: 2s;
-webkit-transition-function: ease-in;
-webkit-transition-delay: 1s;
-moz-transition-property: background-color;
-moz-transition-duration: 2s;
-moz-transition-function: ease-in;
-moz-transition-delay: 1s;
}
@-webkit-keyframes myanimation {
0% {
-webkit-transform: rotate(0deg);
}
25% {
-webkit-transform: rotate(90deg);
}
50% {
-webkit-transform: rotate(180deg);
}
75% {
-webkit-transform: rotate(270deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
.transform .animation {
-webkit-animation-name: myanimation;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 200ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-play-state: running;
-moz-animation-name: myanimation;
-moz-animation-duration: 1s;
-moz-animation-timing-function: linear;
-moz-animation-delay: 200ms;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: normal;
-moz-animation-play-state: running;
-o-animation-name: myanimation;
-o-animation-duration: 1s;
-o-animation-timing-function: linear;
-o-animation-delay: 200ms;
-o-animation-iteration-count: infinite;
-o-animation-direction: normal;
-o-animation-play-state: running;
animation-name: myanimation;
animation-duration: 1s;
animation-timing-function: linear;
animation-delay: 200ms;
animation-iteration-count: infinite;
animation-direction: normal;
animation-play-state: running;
}
</style>
</head>
<body>
<div class="title"><h1>transform</h1></div>
<div class="transform">
<h1>transform rotate</h1>
<div class="block"></div>
<div class="block rotate"></div>
</div>
<div class="transform">
<h1>transform scale</h1>
<div class="block"></div>
<div class="block scale"></div>
</div>
<div class="transform">
<h1>transform translate</h1>
<div class="block"></div>
<div class="block translate"></div>
</div>
<div class="transform">
<h1>transform skew</h1>
<div class="block"></div>
<div class="block skew"></div>
</div>
<div class="title"><h1>transform-origin</h1></div>
<div class="transform">
<h1>transform-origin</h1>
<div class="block"></div>
<div class="block transform-origin rotate"></div>
</div>
<div class="title"><h1>transition</h1></div>
<div class="transform">
<h1>transition</h1>
<h3>mouseover for transition</h3>
<div class="block transition"></div>
</div>
<div class="title"><h1>animation</h1></div>
<div class="transform">
<h1>transition</h1>
<div class="block animation">Animation</div>
</div>
</body>
</html>
分享到：
相关推荐
有关css3的动画代码！自己写的一部分css3的动画，通过css3代码控制图片的运动，不需要js事件的控制。
Bounce.js是一款功能非常强大的可视化CSS3动画代码生成js库插件。该js库插件提供了一个在线APP，通过该APP可以在可视化的条件下编辑CSS3的各种动画效果。此外，你也可以单独使用Bounce.js，通过js代码来完成各种CSS3...
一共27个各式各样的CSS3动画效果源代码，内容如下：纯CSS3模拟风车转动效果纯css3云彩动画效果纯css3制作出来的狐狸尾巴燃烧效果纯CSS3模拟跳动的音乐音符效果多种css3滚动下拉动画加载效果css3颗粒全屏动画效果懒人...
纯CSS3实现的动画效果，Transitions组合动画
这个库包含了多种预定义的动画效果，可以让开发者无需从零编写复杂的 CSS3 动画代码就能实现丰富的视觉体验。让我们深入探讨一下 animate.css 的核心概念和如何利用它来创建 CSS3 动画效果。 ### animate.css 概述 ...
7. **代码组织与维护**：为了保持代码的可读性和可维护性，开发者通常会将CSS3动画代码组织成模块化的结构，比如使用SCSS或Less等预处理器，或者采用BEM（Block Element Modifier）命名方法来提高代码的可复用性和可...
在"27个精致的CSS3动画效果源代码下载"中，包含了27种精心设计的CSS3动画实例，可以帮助开发者更好地理解和运用这些技术。 1. **过渡（Transitions）** 过渡是CSS3中最基础的动画形式，它可以平滑地改变一个元素从...
jQuery+CSS3实现动画相册代码.rar jQuery+CSS3实现动画相册代码.rar jQuery+CSS3实现动画相册代码.rar jQuery+CSS3实现动画相册代码.rar jQuery+CSS3实现动画相册代码.rar jQuery+CSS3实现动画相册代码.rar jQuery+...
在这个主题中，我们将深入探讨如何使用CSS3实现炫酷的刷新动画，特别是在页面加载过程中的"loading"动画特效。这些动画不仅提升了用户体验，还能在等待内容加载时提供视觉吸引力。 **CSS3的引入** CSS3是CSS（层叠...
【CSS3太极周易风水罗盘动画代码】 在网页设计中，CSS3（层叠样式表第三版）的出现极大地丰富了网页的视觉效果和动态表现。本资源提供了一个使用CSS3实现的太极周易风水罗盘动画代码，旨在帮助开发者创建具有中国...
该款软件基于GUI编辑，为RIA应用程序提供widget，生成可以和所有JS库写作的CSS3动画代码，新版本带来了三个新的编辑器，是目前最好用的图形化CSS3动画设计器。有需要的朋友不妨下载试试！ 软件功能 1、全方位的...
【CSS3 3D魔方动画代码】是一个利用CSS3技术实现的三维魔方动态效果。这个项目展示了CSS3在创建交互式、视觉引人入胜的网页元素方面的强大能力。CSS3是层叠样式表的最新版本，它引入了许多新特性，包括3D转换、动画...
本资源"CSS3加载动画效果代码.zip"提供了四种不同的加载动画效果，分别是帽子、进度条、圆圈loading和太极图，全部采用纯CSS3编写，无需JavaScript辅助，使得这些动画在性能和兼容性上都有优秀的表现。 1. **CSS3 ...
基于Zepto+CSS3宝箱开启动画抽奖JS特效代码，很不错的特效代码，特效基于Zepto、CSS3， 其中有好几种CSS3动画效果，背景光环滚动，宝箱摇摆开启，弹出提示层，还是很不错的CSS3 动画特效，大家可以学习下。
css3+jQuery开灯关灯动画代码.rar css3+jQuery开灯关灯动画代码.rar css3+jQuery开灯关灯动画代码.rar css3+jQuery开灯关灯动画代码.rar css3+jQuery开灯关灯动画代码.rar css3+jQuery开灯关灯动画代码.rar css3+...
纯CSS3加载动画Loading特效代码是一个集合，包含了30多种独特的加载效果，这些效果完全基于CSS3技术实现，无需依赖JavaScript或者其他外部库。CSS3是 Cascading Style Sheets 的第三个主要版本，它引入了许多新的...
这套CSS3动态旋转加载动画代码的优势在于其轻量级、高性能且易于定制。它不需要JavaScript，减少了页面负担，同时提供了一种优雅的方式来提升网页加载时的用户体验。开发者可以根据自己的项目需求进行微调，创造出...
本资源提供的是8种不同风格的CSS3加载动画代码，旨在帮助开发者和设计师为他们的网站或应用增添动态美感。 首先，CSS3是一种强大的样式表语言，它扩展了CSS2.1的功能，引入了更多的动画和过渡效果。其中，`@...
在本文中，我们将深入探讨两个有趣的CSS3动画效果：CSS3绘制机器猫和纯CSS3动画。这两个效果展示了CSS3的强大潜力，不仅能够创建出视觉上吸引人的元素，还能够实现动态交互，使得网页设计更加生动有趣。 首先，让...
此外，由于CSS动画的性能限制，对于大型或复杂的动画，可能需要考虑使用WebGL或JavaScript库如GreenSock来实现。 在实际开发中，理解CSS动画的工作原理和性能优化策略至关重要。这包括合理利用硬件加速、避免过度...