CSS 小结笔记之形变、过渡与动漫的示例

日期:2021-03-01 类型:科技新闻 

关键词:ps网页版在线制作,静态网页制作方法,微云网页版,怎么制作一个网页,django网页模板

1、过渡 transition 

过渡特性用法: transition :ransition-property  transition-duration  transition-timing-function   transition-delay 

能够1起特定还可以各自独立特定

transition-property: 是要过渡的特性(如width,height),all是全部都更改。

transition-duration:花销的時间,企业为s或ms

transition-timing-function:是特定动漫种类(健身运动区曲线图),健身运动曲线图有下列几种

ease=>慢慢慢下来(默认设置值) linear=>匀速 ease-in=>加快 ease-out=>减速 ease-in-out=>先加快在减速 

transition-delay 延迟时间時间,企业为s或ms

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF⑻">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        
        div {
            width: 100px;
            height: 200px;
            background-color: aqua;
            transition: width 2s ease-in-out 0.5s;
        }
        
        div:hover {
            width: 500px;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

結果以下,当电脑鼠标上上去后转变已不是一瞬间进行,而是过渡进行。

2、形变 transform

 (1)、2D形变

(a)挪动 translate(x,y)

挪动能够特定像素值还可以特定百分比, 留意:特定百分比为本身尺寸的百分比,因而能够用于设定盒子精准定位时的垂直居中对齐(在设定left:50%后再挪动本身的⑸0%便可)。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF⑻">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: aqua;
            transition: all 2s;
        }
        
        div:active {
            transform: translate(200px, 200px);
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

点一下以后盒子开展了挪动。用于让精准定位的盒子垂直居中的编码入下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF⑻">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .fa {
            width: 300px;
            height: 300px;
            background-color: aqua;
            transition: all 0.5s;
            position: relative;
        }
        
        .son {
            background-color: red;
            position: absolute;
            left: 50%;
            top: 50%;
            width: 100px;
            height: 100px;
            transform: translate(⑸0%, ⑸0%);
        }

    </style>
</head>

<body>
    <div class="fa">
        <div class="son"></div>
    </div>

</body>

</html>

結果为

(b)放缩 scale(x,y)

x,y设定超过1 是变大,小于1 是变小。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF⑻">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: aqua;
            margin: 200px auto;
            transition: all 2s;
        }
        
        div:hover {
            transform: scale(0.5, 2);
        }
    </style>
</head>

<body>
    <div>

    </div>
</body>

</html>

(c)转动 rotate(x deg)

x特定度标值,正数是顺时针转动,负数是逆时针转动。

转动可使用 transform-origin  特定转动管理中心点,transform-origin 给left top right bottom 还可以特定实际的像素值。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF⑻">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 100px;
            background-color: aqua;
            margin: 200px auto;
            transition: all 2s;
            transform-origin: bottom left;
        }
        
        div:hover {
            transform: rotate(120deg);
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

(d)歪斜 skew(x deg ,y deg)

x,y各自特定歪斜在x,y方位上的角度,能够为负数。y值不写默认设置为0。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF⑻">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: aqua;
            border: 1px solid red;
            transition: all 1s;
            margin: 200px auto;
        }
        
        div:hover {
            transform: skew(30deg, 20deg);
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

(2)三d形变

(a)转动(rotateX,rotateY,rotateZ)

三d转动与2D相近,只但是1个是根据2位座标1个是根据3维座标。3个值能够另外特定还可以独立特定。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF⑻">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 100px;
            background-color: aqua;
            margin: 200px auto;
            transition: all 2s;
            transform-origin: bottom left;
        }
        
        div:hover {
            transform: rotateX(120deg);
            /* transform: rotateY(120deg); */
            /* transform: rotateZ(120deg); */
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

(b)挪动(translateX,translateY,translateZ)

三d挪动针对xy方位上的挪动与2d挪动1致。仅有z方位上的挪动不1样。Z方位上的挪动在实际日常生活中是间距变远,间距变近。因而在网页页面中显示信息結果是变近则增大,变远则缩小。

要使Z放网上挪动起效最先要设定perspective(双眼间距显示屏的间距);

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF⑻">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            perspective: 1000px;
            /* 标值越小表明双眼离的越近 */
        }
        
        div {
            width: 200px;
            height: 200px;
            background-color: aqua;
            transition: all 0.5s;
            margin: 200px auto;
        }
        
        div:hover {
            transform: translate3d(0, 0, 200px);
        }
    </style>
</head>

<body>
    <div>

    </div>
</body>

</html>

3、动漫 animation

(1)、 animation: animation- name || animation- duration||  animation- timing-function || animation- delay || animation- iteration-count||  animation- direction||  animation- fill-mode;

animation-name:动漫名字(自身应用@keyframes 界定的动漫)

animation-duration:不断時间

animation-timing-function:健身运动曲线图,与过渡的健身运动曲线图相近。

animation-delay:延迟时间時间

animation-iteration-count:循环系统次数 (infinite 是无尽循环系统)

animation-direction:是不是反方向(动漫是不是是由末尾倒开是倒着放的)

animation-fill-mode:设定在动漫播发以外的情况(完毕时的情况)none | forwards(设为完毕时的情况)| backwards(设为刚开始时的情况)|both(设为刚开始或完毕时的情况)

animation-play-state:设定动漫情况 running 刚开始|paused 中止

(2)、@keyframes 自定动漫

文件格式以下

@keyframes 动漫名字 {
from{ 刚开始} 0%
to{ 完毕 } 100%
}

能够用 from...to 来特定动漫全过程,还可以用0%~100%特定动漫全过程。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF⑻">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: aqua;
            /* animation: 动漫名字 动漫時间 健身运动曲线图 什么时候刚开始 播发次数 是不是反向 */
            animation: move 5s linear 3;
        }
        
        @keyframes move {
            0% {
                transform: translate3d(0, 0, 0);
            }
            25% {
                transform: translate3d(400px, 0, 0);
            }
            50% {
                transform: translate3d(400px, 300px, 0);
            }
            75% {
                transform: translate3d(0, 300px, 0);
            }
            100% {
                transform: translate3d(0, 0, 0);
            }
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。