注册有礼

CSS实现变形、过渡和动画的效果的基本方法是什么

Admin 2022-06-09 群英技术资讯 1224 次浏览

上一篇：CSS中footer固定在底部的方法有几种，如何实现 下一篇：用CSS写多列等高布局的方法及代码是什么
这篇文章主要讲解了“CSS实现变形、过渡和动画的效果的基本方法是什么”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“CSS实现变形、过渡和动画的效果的基本方法是什么”吧！


1、过渡 transition 

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

可以一起指定也可以分别单独指定

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-8">
    <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%后再移动自身的-50%即可）。

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

<head>
    <meta charset="UTF-8">
    <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-8">
    <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(-50%, -50%);
        }

    </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-8">
    <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-8">
    <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-8">
    <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）3D变形

（a）旋转（rotateX,rotateY,rotateZ）

3D旋转与2D类似，只不过一个是基于二位坐标一个是基于三维坐标。三个值可以同时指定也可以单独指定。

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

<head>
    <meta charset="UTF-8">
    <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）

3D移动对于xy方向上的移动与2d移动一致。只有z方向上的移动不一样。Z方向上的移动在现实生活中是距离变远，距离变近。因此在网页中显示结果是变近则变大，变远则变小。

要使Z放线上移动生效首先要设置perspective（眼睛距离屏幕的距离）;

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

<head>
    <meta charset="UTF-8">
    <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-8">
    <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>


现在大家对于CSS实现变形、过渡和动画的效果的基本方法是什么的内容应该都有一定的认识了吧，希望这篇能对大家有所帮助。最后，想要了解更多，欢迎关注群英网络，群英网络将为大家推送更多相关的文章。 群英智防CDN，智能加速解决方案
标签： 变形

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

上一篇：CSS中footer固定在底部的方法有几种，如何实现 下一篇：用CSS写多列等高布局的方法及代码是什么

猜你喜欢

云活动 云活动

推荐内容

相关标签

成为群英会员,开启智能安全云计算之旅

立即注册
专业资深工程师驻守
7X24小时快速响应
一站式无忧技术支持
免费备案服务
产品与服务 云服务器 智防系统 服务器租用 服务器托管 虚拟主机
帮助中心 注册与购买 备案问题 鹰云服务器问题 服务器托管问题 域名问题 高防服务器问题 服务器租用问题
关于群英 群英简介 公司动态 资质荣誉 发展历程 群英环境 汇款信息 备案中心 联系我们
其他 数据中心 生态合作
友情链接
友链合作 群英网络 智帝云 主机评测 idc公司 商城系统 跨境电商 主机吧 酷库博客 OA系统 腾讯企业邮箱 锐成信息 sdwan

关注或联系群英网络

7x24小时售前：400-678-4567

7x24小时售后：0668-2555666

24小时QQ客服

群英微信公众号

Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有

增值电信经营许可证 : B1.B2-20140078    粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008

免费拨打 400-678-4567
免费拨打 400-678-4567 免费拨打 400-678-4567 或 0668-2555555
在线客服
在线客服
微信公众号
返回顶部
返回顶部 返回顶部
在线客服
在线客服