css3动画效果大全代码,html5动画效果代码

如何利用CSS3动画实现弹跳效果

HTML代码

html?xmlns=""

head

title用CSS3动画给一个小球创建跳跃的动画效果/title

link?rel="stylesheet"?type="text/css"?href="index.css"?/

/head

body

section?class="main"

div?id="ballWrapper"

div?id="ball"/div

div?id="ballShadow"/div

/div

/section

/body

/html

CSS代码（创建一个与html同目录的index.css文件）

#ballWrapper{position:fixed;top:35%;left:50%;z-index:100;margin-left:-70px;width:140px;height:300px;cursor:pointer;-webkit-transition:all?5s?linear?0s;-moz-transition:all?5s?linear?0s;transition:all?5s?linear?0s;-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1);-ms-transform:scale(1)}

#ballWrapper:active{cursor:pointer;-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);transform:scale(0);-ms-transform:scale(0)}

#ball{position:absolute;top:0;z-index:11;width:140px;height:140px;border-radius:70px;background:#bbb;background:url(data:image/svg+xml;?background:?-webkit-gradient(linear,?left?top,?left?bottom,?color-stop(0%,rgba(187,187,187,1)),?color-stop(99%,rgba(119,119,119,1)));?background:?-webkit-linear-gradient(top,?rgba(187,187,187,1)?0%,rgba(119,119,119,1)?99%);?background:?-o-linear-gradient(top,?rgba(187,187,187,1)?0%,rgba(119,119,119,1)?99%);?background:?-ms-linear-gradient(top,?rgba(187,187,187,1)?0%,rgba(119,119,119,1)?99%);?background:?linear-gradient(top,?rgba(187,187,187,1)?0%,rgba(119,119,119,1)?99%);?box-shadow:?inset?0?-5px?15px?rgba(255,255,255,0.4),?inset?-2px?-1px?40px?rgba(0,0,0,0.4),?0?0?1px?#000;?cursor:?pointer;?base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2JiYmJiYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk5JSIgc3RvcC1jb2xvcj0iIzc3Nzc3NyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);background:-moz-linear-gradient(top,rgba(187,187,187,1)?0,rgba(119,119,119,1)?99%);filter:progid:DXImageTransform.Microsoft.gradient(?startColorstr='#bbbbbb',?endColorstr='#777777',?GradientType=0?);-webkit-animation:jump?1s?infinite;-moz-animation:jump?1s?infinite;-o-animation:jump?1s?infinite;-ms-animation:jump?1s?infinite;animation:jump?1s?infinite}

#ball::after{position:absolute;top:10px;left:30px;z-index:10;width:80px;height:40px;border-radius:40px/20px;background:url(data:image/svg+xml;?background:?-webkit-gradient(linear,?left?top,?left?bottom,?color-stop(0%,rgba(232,232,232,1)),?color-stop(1%,rgba(232,232,232,1)),?color-stop(100%,rgba(255,255,255,0)));?background:?-webkit-linear-gradient(top,?rgba(232,232,232,1)?0%,rgba(232,232,232,1)?1%,rgba(255,255,255,0)?100%);?background:?-o-linear-gradient(top,?rgba(232,232,232,1)?0%,rgba(232,232,232,1)?1%,rgba(255,255,255,0)?100%);?background:?-ms-linear-gradient(top,?rgba(232,232,232,1)?0%,rgba(232,232,232,1)?1%,rgba(255,255,255,0)?100%);?background:?linear-gradient(top,?rgba(232,232,232,1)?0%,rgba(232,232,232,1)?1%,rgba(255,255,255,0)?100%);?content:?"";?base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U4ZThlOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjElIiBzdG9wLWNvbG9yPSIjZThlOGU4IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);background:-moz-linear-gradient(top,rgba(232,232,232,1)?0,rgba(232,232,232,1)?1%,rgba(255,255,255,0)?100%);filter:progid:DXImageTransform.Microsoft.gradient(?startColorstr='#e8e8e8',?endColorstr='#00ffffff',?GradientType=0?)}

#ballShadow{position:absolute;bottom:0;left:50%;z-index:10;margin-left:-30px;width:60px;height:75px;border-radius:30px/40px;background:rgba(20,20,20,.1);box-shadow:0?0?20px?35px?rgba(20,20,20,.1);-webkit-transform:scaleY(.3);-moz-transform:scaleY(.3);-o-transform:scaleY(.3);transform:scaleY(.3);-ms-transform:scaleY(.3);-webkit-animation:shrink?1s?infinite;-moz-animation:shrink?1s?infinite;-o-animation:shrink?1s?infinite;-ms-animation:shrink?1s?infinite;animation:shrink?1s?infinite}

@-webkit-keyframes?jump{0%{top:0;-webkit-animation-timing-function:ease-in}

50%{top:140px;height:140px;-webkit-animation-timing-function:ease-out}

55%{top:160px;height:120px;border-radius:70px/60px;-webkit-animation-timing-function:ease-in}

65%{top:120px;height:140px;border-radius:70px;-webkit-animation-timing-function:ease-out}

95%{top:0;-webkit-animation-timing-function:ease-in}

100%{top:0;-webkit-animation-timing-function:ease-in}

}

@-moz-keyframes?jump{0%{top:0;-moz-animation-timing-function:ease-in}

50%{top:140px;height:140px;-moz-animation-timing-function:ease-out}

55%{top:160px;height:120px;border-radius:70px/60px;-moz-animation-timing-function:ease-in}

65%{top:120px;height:140px;border-radius:70px;-moz-animation-timing-function:ease-out}

95%{top:0;-moz-animation-timing-function:ease-in}

100%{top:0;-moz-animation-timing-function:ease-in}

}

@-o-keyframes?jump{0%{top:0;-o-animation-timing-function:ease-in}

50%{top:140px;height:140px;-o-animation-timing-function:ease-out}

55%{top:160px;height:120px;border-radius:70px/60px;-o-animation-timing-function:ease-in}

65%{top:120px;height:140px;border-radius:70px;-o-animation-timing-function:ease-out}

95%{top:0;-o-animation-timing-function:ease-in}

100%{top:0;-o-animation-timing-function:ease-in}

}

@-ms-keyframes?jump{0%{top:0;-ms-animation-timing-function:ease-in}

50%{top:140px;height:140px;-ms-animation-timing-function:ease-out}

55%{top:160px;height:120px;border-radius:70px/60px;-ms-animation-timing-function:ease-in}

65%{top:120px;height:140px;border-radius:70px;-ms-animation-timing-function:ease-out}

95%{top:0;-ms-animation-timing-function:ease-in}

100%{top:0;-ms-animation-timing-function:ease-in}

}

@keyframes?jump{0%{top:0;animation-timing-function:ease-in}

50%{top:140px;height:140px;animation-timing-function:ease-out}

55%{top:160px;height:120px;border-radius:70px/60px;animation-timing-function:ease-in}

65%{top:120px;height:140px;border-radius:70px;animation-timing-function:ease-out}

95%{top:0;animation-timing-function:ease-in}

100%{top:0;animation-timing-function:ease-in}

}

@-webkit-keyframes?shrink{0%{bottom:0;margin-left:-30px;width:60px;height:75px;border-radius:30px/40px;background:rgba(20,20,20,.1);box-shadow:0?0?20px?35px?rgba(20,20,20,.1);-webkit-animation-timing-function:ease-in}

50%{bottom:30px;margin-left:-10px;width:20px;height:5px;border-radius:20px;background:rgba(20,20,20,.3);box-shadow:0?0?20px?35px?rgba(20,20,20,.3);-webkit-animation-timing-function:ease-out}

100%{bottom:0;margin-left:-30px;width:60px;height:75px;border-radius:30px/40px;background:rgba(20,20,20,.1);box-shadow:0?0?20px?35px?rgba(20,20,20,.1);-webkit-animation-timing-function:ease-in}

}

@-moz-keyframes?shrink{0%{bottom:0;margin-left:-30px;width:60px;height:75px;border-radius:30px/40px;background:rgba(20,20,20,.1);box-shadow:0?0?20px?35px?rgba(20,20,20,.1);-moz-animation-timing-function:ease-in}

50%{bottom:30px;margin-left:-10px;width:20px;height:5px;border-radius:20px;background:rgba(20,20,20,.3);box-shadow:0?0?20px?35px?rgba(20,20,20,.3);-moz-animation-timing-function:ease-out}

100%{bottom:0;margin-left:-30px;width:60px;height:75px;border-radius:30px/40px;background:rgba(20,20,20,.1);box-shadow:0?0?20px?35px?rgba(20,20,20,.1);-moz-animation-timing-function:ease-in}

}

@-o-keyframes?shrink{0%{bottom:0;margin-left:-30px;width:60px;height:75px;border-radius:30px/40px;background:rgba(20,20,20,.1);box-shadow:0?0?20px?35px?rgba(20,20,20,.1);-o-animation-timing-function:ease-in}

50%{bottom:30px;margin-left:-10px;width:20px;height:5px;border-radius:20px;background:rgba(20,20,20,.3);box-shadow:0?0?20px?35px?rgba(20,20,20,.3);-o-animation-timing-function:ease-out}

100%{bottom:0;margin-left:-30px;width:60px;height:75px;border-radius:30px/40px;background:rgba(20,20,20,.1);box-shadow:0?0?20px?35px?rgba(20,20,20,.1);-o-animation-timing-function:ease-in}

}

@-ms-keyframes?shrink{0%{bottom:0;margin-left:-30px;width:60px;height:75px;border-radius:30px/40px;background:rgba(20,20,20,.1);box-shadow:0?0?20px?35px?rgba(20,20,20,.1);-ms-animation-timing-function:ease-in}

50%{bottom:30px;margin-left:-10px;width:20px;height:5px;border-radius:20px;background:rgba(20,20,20,.3);box-shadow:0?0?20px?35px?rgba(20,20,20,.3);-ms-animation-timing-function:ease-out}

100%{bottom:0;margin-left:-30px;width:60px;height:75px;border-radius:30px/40px;background:rgba(20,20,20,.1);box-shadow:0?0?20px?35px?rgba(20,20,20,.1);-ms-animation-timing-function:ease-in}

}

@keyframes?shrink{0%{bottom:0;margin-left:-30px;width:60px;height:75px;border-radius:30px/40px;background:rgba(20,20,20,.1);box-shadow:0?0?20px?35px?rgba(20,20,20,.1);animation-timing-function:ease-in}

50%{bottom:30px;margin-left:-10px;width:20px;height:5px;border-radius:20px;background:rgba(20,20,20,.3);box-shadow:0?0?20px?35px?rgba(20,20,20,.3);animation-timing-function:ease-out}

100%{bottom:0;margin-left:-30px;width:60px;height:75px;border-radius:30px/40px;background:rgba(20,20,20,.1);box-shadow:0?0?20px?35px?rgba(20,20,20,.1);animation-timing-function:ease-in}

}

CSS3中的动画效果transform:translateZ()，在Z轴上移动xx距离

下面这个代码在Chrome上运行没问题啊：

其他浏览器上如果没效果，可自行添加前缀再试。注意：只有IE10+、FireFox、Chrome、Safari才支持3D转换效果。

拓展：

1、CSS即层叠样式表(Cascading?StyleSheet)。 在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。

2、CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括: 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。

css3怎么制作打开的大门动画代码

方法/步骤

首先，先在body/body中加入门

然后写好大门的css，如下：[由于本人设计不好，所以这里的门都是用颜色块代替的，大家在用的时候可以换成各种门的背景]

div{

margin:0;

padding:0;

}

.door{

width:450px;

height:450px;

position:relative;

background:#a1a1a1;

}

.door .leftDoor,.door .rightDoor{

position:absolute;

width:224px;

height:400px;

top:57px;

top:50px;

background:#d1d1d1;

}

.door .leftDoor{

left:0;

border-right:1px solid #999;

box-shadow:inset -2px -2px 10px rgba(0, 0, 0, 0.1);

-webkit-animation:leftDoor 5s 1;

-moz-animation:leftDoor 5s 1;

-o-animation:leftDoor 5s 1;

animation:leftDoor 5s 1;

-webkit-transform-origin: 0% 40%;

-moz-transform-origin: 0% 40%;

-o-transform-origin: 0% 40%;

transform-origin: 0% 40%;

}

.door .rightDoor{

right:0;

border-left:1px solid #999;

box-shadow:inset 2px -2px 10px rgba(0, 0, 0, 0.1);

-webkit-animation:rightDoor 5s 1;

-moz-animation:rightDoor 5s 1;

-o-animation:rightDoor 5s 1;

animation:rightDoor 5s 1;

-webkit-transform-origin: 100% 40%;

-moz-transform-origin: 100% 40%;

-o-transform-origin: 100% 40%;

transform-origin: 100% 40%;

}

先为左边的门添加动画

@-webkit-keyframes leftDoor {

0%,100% {

-webkit-transform-origin: 0% 40%;

}

0{

-webkit-transform:perspective(0) rotateY(0);

}

100% {

-webkit-transform:perspective(600px) rotateY(70deg);

}

}

@-moz-keyframes leftDoor {

0%,100% {

-moz-transform-origin: 0% 40%;

}

0{

-moz-transform:perspective(0) rotateY(0);

}

100% {

-moz-transform:perspective(600px) rotateY(70deg);

}

}

@-o-keyframes leftDoor {

0%,100% {

-o-transform-origin: 0% 40%;

}

0{

-o-transform:perspective(0) rotateY(0);

}

100% {

-o-transform:perspective(600px) rotateY(70deg);

}

}

@keyframes leftDoor {

0%,100% {

transform-origin: 0% 40%;

}

0{

transform:perspective(0) rotateY(0);

}

100% {

transform:perspective(600px) rotateY(70deg);

}

}

然后为右边的门添加css3动画，由于左右门对称，只要变化相应的地方就行了

@-webkit-keyframes rightDoor {

0%,100% {

-webkit-transform-origin: 100% 40%;

}

0{

-webkit-transform:perspective(0) rotateY(0);

}

100% {

-webkit-transform:perspective(600px) rotateY(-70deg);

}

}

@-moz-keyframes rightDoor {

0%,100% {

-moz-transform-origin: 100% 40%;

}

0{

-moz-transform:perspective(0) rotateY(0);

}

100% {

-moz-transform:perspective(600px) rotateY(-70deg);

}

}

@-o-keyframes rightDoor {

0%,100% {

-o-transform-origin: 100% 40%;

}

0{

-o-transform:perspective(0) rotateY(0);

}

100% {

-o-transform:perspective(600px) rotateY(-70deg);

}

}

@keyframes rightDoor {

0%,100% {

transform-origin: 100% 40%;

}

0{

transform:perspective(0) rotateY(0);

}

100% {

transform:perspective(600px) rotateY(-70deg);

}

}

5

这里的动画主要用到的是rotate和perspective

6

如果想要动画点击后才开门，可以加入一个按钮，然后js控制

html（入门）CSS3 animation动画

CSS3 animation动画

1、@keyframes 定义关键帧动画

2、animation-name 动画名称

3、animation-duration 动画时间

4、animation-timing-function 动画曲线

linear 匀速

ease 开始和结束慢速

ease-in 开始是慢速

ease-out 结束时慢速

ease-in-out 开始和结束时慢速

steps 动画步数

5、animation-delay 动画延迟

6、animation-iteration-count 动画播放次数 n|infinite

7、animation-direction

normal 默认动画结束不返回

Alternate 动画结束后返回

8、animation-play-state 动画状态

paused 停止

running 运动

9、animation-fill-mode 动画前后的状态

none 不改变默认行为

forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）

backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）

both 向前和向后填充模式都被应用

10、animation:name duration timing-function delay iteration-count direction;同时设置多个属性

举例 等待条：

效果：