首页 > 代码库 > css动画效果

css动画效果

2024-10-05 19:33:02   213人阅读

1.2D，3D转换

　　-1.通过2D，3D转换，我们能够对元素进行移动，缩放，转动，拉长，或拉伸。

　　转换是使元素改变形状，尺寸和位置的一种效果。

　　可以使用2D或者3D转换来转换元素。

　　-2.2D(transform)转换方法

　　　　1.translate（x，y）移动，第二个参数未提供时默认为0

　　　　2.rotate（xdeg）旋转

　　　　3.scale（x，y）缩放

　　　　4.skew（xdeg，ydeg）倾斜，第二个参数未提供时默认为0

　　-3.3D转换方法

　　　　1.rotateX（）

　　　　2.rotateY（）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: aquamarine;
        }
        .change{
            /**/
            /*transform: translate(100px, 200px);*/
            /*旋转*/
            /*transform: rotate(30deg);*/
            /*缩放*/
            /*transform: scale(0.5, 0.5);*/
            /*倾斜*/
            /*transform: skew(50deg,50deg);*/
            /*transform: rotateX(120deg);*/
            transform: rotateY(120deg);
        }
    </style>
</head>
<body>
    <div>这是一个初始效果</div>
    <br/>
    <div class="change">变换后效果</div>
</body>
</html>

 

浏览器内核

　　Webkit（Chrome/Safari）　　-webkit-transform

　　Gecko（Firefox）　　　　　　 -moz-transform

　　Presto（Oprea）　　　　　　  -o-transform

　　Trident(IE)　　　　　　　　　 -ms-transform

　　

2.过渡

　　1.通过css3，我们可以在不适用任何Flash动画或JavaScript的情况下，当元素从一种样式变换为另一种样式

时为元素添加效果。

　　2.css3过渡是元素从一种样式逐渐改变为另一种的效果。

　　　　规定效果添加到哪个css属性上

　　　　规定效果的时长

　　transiton　　　　　　　　简写属性，用于在一个属性中设置4个过渡属性

　　transition-property　　　规定应用过渡的css属性的名称，必须有

　　transition-duration　　　定义过渡效果花费的时间，默认为0，必须有

　　transition-timing-function　　规定过渡效果的时间曲线，默认为“ease”

　　　　-1.linear：线性过渡，等同于贝塞尔曲线(0.0, 0.0, 1.0,1.0)

　　　　-2.ease:平滑过渡，等同于贝塞尔曲线(0.25，0.1,0.25，1.0)

　　　　-3.ease-in：由慢到快，等同于贝塞尔曲线（0.42,0.0,1.0,1.0）

　　　　-4.ease-out：由快到慢，等同于贝塞尔曲线(0.0，0.0，0.58，1.0)

　　　　-5.ease-in-out：由慢到快再到慢，等同于贝塞尔曲线（0.42，0.0，0.58，1.0）

　　transiton-delay　　　　　规定过渡效果何时开始，默认为0

　　

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .first{
            width: 100px;
            height: 100px;
            background-color: aquamarine;
            transition: width 2s ease-in-out;
            /*transition: background-color 2s;*/
        }
        .first:hover{
            width: 200px;
            /*background-color: purple;*/
        }
    </style>
</head>
<body>
    <div class="first">效果</div>
</body>
</html>

 

css动画效果


联系
我们