css3动画代码（css3动画效果大全代码）

今天给各位分享css3动画代码的知识，其中也会对css3动画效果大全代码进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、css3动画
• 2、css3动画使用
• 3、如何用css3绘制一个圆的loading转圈动画
• 4、html（入门）CSS3 animation动画
• 5、css3怎么制作打开的大门动画代码

css3动画

css3 2D变形

1、位移：transform：translateX   x轴位移 

transform：translateY  y轴位移

同时写会被覆盖，所以用复合属性写

复合属性：transform：translate（100px，100px）第一个是x轴参数 第二个是y轴参数

起始点：00点，边框的左上角的顶点

transform：translate（100px  0，） x轴距离左边100px

transform：translate（ 0，100px） y轴距离左边100px

2、缩放：transform：scale（2）里面的数字表示倍的意思

transform：scale（1）表示本身，不变

transform：scale（0.5）小于1表示缩小

transform：scale（0）表示缩小到消失

3、倾斜：transform：skew（ax，ay）表示x轴倾斜角度，y轴倾斜角度  单位是度数值deg

transform：skew（60deg，20deg）

x轴会改变宽度，y轴会改变高度

第一个表示x轴，按照逆时针方向进行旋转，宽度变化，高度不变

第二个表示y轴，按照顺时针方向进行旋转，高度变化，宽度不变

4、旋转：rotate（）单位也是deg

只设置一个值表示沿中心点旋转

rotatex 沿x轴转

rotatey沿y轴转

transition: all 2s linear .5s;/加在div上

过渡属性

过渡动画函数（( transition-timing-function )

指定浏览器的过渡速度，以及过渡期间的操作进展情况，通过给过渡添加一个函数来指定动画的快慢方式

linear

规定以相同速度开始至结束的过渡效果

ease

规定慢速开始，然后变快，然后慢速结束的过渡效果（默认值)

ease-in

规定以慢速开始的过渡效果

ease-out

规定以慢速结束的过渡效果

ease-in-out

规定以慢速开始和结束的过渡效果

css3动画使用

animation实现动画由俩个部分组成，通过类似flash动画的关键帧来申明一个动画，在animation属性中调用关键帧声明的动画实现一个更为复杂的动画效果

关键帧 例如：

调用关键帧：

语法 animation:animation-name animation-duration animation-timing-function  animation-delay animation-iteration-count animation-direction

animation-name 由 @keyframes 创建的动画名称

animation-duration过渡时间

animation-timing-function过渡方式

animation-delay延迟时间

animation-iteration-count 动画的播放次数 通常值为1次 特殊值infinite为无限播放

animation-direction动画的播放方向，alternate为偶数次向前播放，normal动画每次都是循环向前播放

练习如下：

该图形的变化从左上角到右上角来回跳动的一个过程

linear  规定以相同速度开始至结束的过渡效果

ease  规定慢速开始，然后变快，然后慢速结束的过渡效果（默认值）

ease-in 规定以慢速开始的过渡效果

ease-out  规定以慢速结束的过渡效果

ease-in-out 规定以慢速开始和结束的过渡效果

 perspective:500px;透视 也可以理解为视距，可以理解为 你的眼睛距离物体的距离  距离物体越近 物体就越大，距离物体越远 物体就越小

transform: rotateZ(30deg) rotateZ是绕着z轴旋转 正值是顺时针旋转 负值是逆时针旋转

transform: rotateY(30deg) rotateY是绕着y轴旋转 正值是向里面旋转 负值是向外面旋转

transform: rotateX(30deg)rotateX是绕着x轴旋转 正值是向里面旋转 负值是向外面旋转

transform: rotate(30deg)参数a取正值时元素相对原来中心顺时针旋转

 transform: translate3d(0, 0, 200px);效果如下:

 translate3d(0,0,200px) 表示z轴向前移动二楼200px（近大远小的原理）

 translate3d 里面分别表示x轴距离 y轴距离 和z轴距离

 要想实现3d效果必须要在父元素上加上一个属性perspective

如果想让子元素有3d的效果 必须要给父元素设置transform-style，默认值是flat， 想变成3d效果要把值设置成preserve-3d

也可以 设置旋转后的div的上下位置，在.b:hover里面加上transform-origin：top/bottom/left/right

如何用css3绘制一个圆的loading转圈动画

具体css代码如下:

$width: 64px;

$height: 64px;

$dotWidth: 10px;

$dotHeight: 10px;

$radius: 5px;

$offset: 9.37px;

@function getLeft( $x ) {

@return ($width/4)*$x;

}

@function getTop( $y ) {

@return ($height/4)*$y;

}

@keyframes changeOpacity {

from { opacity: 1; }

to { opacity: .2; }

}

.q-loading {

position: fixed;

top: 0;

left: 0;

right: 0;

bottom: 0;

.q-loading-overlay {

position: fixed;

top: 0;

left: 0;

right: 0;

bottom: 0;

background-color: rgba(255, 255, 255, .5);

}

.q-loading-content {

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%, -50%);

width: $width;

height: $height;

z-index: 2;

}

.dot {

width: 10px;

height: 10px;

position: absolute;

background-color: #0033cc;

border-radius: 50% 50%;

opacity: 1;

animation: changeOpacity 1.04s ease infinite;

}

.dot1 {

left: 0;

top: 50%;

margin-top: -$radius;

animation-delay: 0.13s;

}

.dot2 {

left: $offset;

top: $offset;

animation-delay: 0.26s;

}

.dot3 {

left: 50%;

top: 0;

margin-left: -$radius;

animation-delay: 0.39s;

}

.dot4 {

top: $offset;

right: $offset;

animation-delay: 0.52s;

}

.dot5 {

right: 0;

top: 50%;

margin-top: -$radius;

animation-delay: 0.65s;

}

.dot6 {

right: $offset;

bottom: $offset;

animation-delay: 0.78s;

}

.dot7 {

bottom: 0;

left: 50%;

margin-left: -$radius;

animation-delay: 0.91s;

}

.dot8 {

bottom: $offset;

left: $offset;

animation-delay: 1.04s;

}

}

代码使用scss定义了大圆和小圆圈的半径，不管改成多大只需要更改变量，下面样式无需改变。

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;同时设置多个属性

举例 等待条：

效果：

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控制

关于css3动画代码和css3动画效果大全代码的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。