signed

QiShunwang

“诚信为本、客户至上”

04-css动画和过渡 --highgh的博客 --HTML学习笔记

2020/8/20 13:36:25   来源:

04-css动画和过渡

  • css单位
  • 2D变换
  • 3D变换
  • css过渡属性
  • CSS3动画属性
  • 过渡动画小练习
    • 过渡和动画的区别

css单位

绝对单位
in 英寸
cm 厘米
mm 毫米
px 像素

绝对单位,固定的长度,不会因为外界的因素而导致长度的变化

相对单位
% 父元素
em 中文字符,受元素字体大小影响
ex 英文字符大小,中文的一半
rem 受根标签html字体大小影响,通常1rem=16px
vw 受屏幕宽度影响,100vw = 100%屏幕宽度
可以用来设置响应式布局,适应各屏幕一般情况适用于设置容器的宽度,不适用于字体大小/图片大小
vh 受屏幕高度影响,100vh = 100%屏幕高度

相对单位,通常是需要参照某个元素或者某个节点的大小

2D变换

在CSS3中新添加了2D变换的属性,用来做元素的2D变换,主要用于配合过渡、动画来取代以前需要用flash才能实现的动画效果。

transform属性
translate() 水平方向和垂直方向平移
rotate() deg(度),参数为+顺时针,为-逆时针
scale() x,y(横向缩放量,纵向缩放量),-先翻面在缩放
skew() xdeg,ydeg(x轴倾斜角,y轴倾斜角)

translate 是先对于最初始的位置进行平移

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-color: #dbddbd;
        }
        div{
            width: 200px;
            border: 1px solid black;
            /* 为了居中 */
            margin: 10px auto;
            
        }
        img{
            display: block;
            width: 200px;
        }

        div:nth-of-type(1)  img{
            /* translate 平移属性 */
            /* 只有一个参数时,是横向平移 */
            /* 有两个参数时,指的是x轴,y轴 */
            transform: translate(20px,20px);
            /* transform: translateX(20px); */
            /* 如果需要多个变换属性,可以把他们写在同一行里 */
            /* transform: translateX(20px) translateY(20px); */
        }

        div:nth-of-type(2) img{
            /* deg 度 */
            /* 顺时针旋转45deg */
            /* 度数为正表示顺时针 */
            /* 度数为负表示逆时针 */
            /* transform: rotate(45deg); */
            /* transform: rotate(-45deg); */
            /* 绕着x轴/y轴进行旋转变换 */
            /* transform: rotateX(45deg); */
            /* transform: rotateY(45deg); */
            transform: rotate(45deg);

            /* 更改变换起始点,默认值50% 50% */
            /* 分别对应x轴,y轴 */
            transform-origin:50% 50%;
            transform-origin: 0 0;
            /* transform-origin: 100% 0; */

        }

        div:nth-of-type(3) img{
            /* 缩放,值为n的时候,宽高就缩放n倍 */
            /* 值为负数时,是反向缩放 */
            /* 值为正数时,是正向缩放 */
            /* 0-1 缩小 1~n 放大 */
            transform: scale(-0.5);
            /* transform: scaleX(2); */
            /* transform: scaleY(2); */
        }
        div:nth-of-type(3) img{
            /* 缩放,值为n的时候,宽高就缩放n倍 */
            /*  */
            /* transform: scale(-0.5); */
            /* 沿着横向倾斜45deg */
            /* transform: skew(45deg,45deg); */
            transform: skewX(45deg);
            transform: skewY(45deg);
        }

    </style>
</head>

<body>

    <div>
        <img src="http://img.sccnn.com/bimg/309/106.jpg" alt="">
    </div>
    <div>
        <img src="http://img.sccnn.com/bimg/309/106.jpg" alt="">
    </div>
    <div>
        <!-- 哈哈哈哈 -->
        <img src="http://img.sccnn.com/bimg/309/106.jpg" alt="">
    </div>
    <div>
        <img src="http://img.sccnn.com/bimg/309/106.jpg" alt="">

    </div>


</body>

</html>

示例效果图片

3D变换

在使用3D属性之前,需要在其父容器添加属性
transform-style: preserve-3d 。
开启3d效果之后,默认会设置position:relative 定位属性。
通过立体坐标系,来改变堆叠顺序
transform: translate3d(10px, 10px, 10px);

css过渡属性

过渡属性一般需要用户去主动触发,比如hover、active等等,或者在js中添加事件来完成整个过渡效果。

过度属性一定要加在需要过渡的元素里面。
鼠标移入时,所改变的样式/效果,仅仅局限于自身或者子元素里。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            margin: 0 auto;
            background-color: tomato;
            /* 过渡属性 */
            /* all 过渡所有属性 */
            /* linear 匀速完成动画 */
            transition: all 1s linear;
            /* ease 先快后慢 */
            /* transition-timing-function: ease; 规定过渡效果的时间曲线*/
            /* 过渡效果延迟5秒后执行 */
            /* transition-delay: 5s; */
            /* transition-property规定应用过渡的 CSS 属性的名称。 */
            /* transition-duration定义完成过渡动画的时间。默认是 0*/

        }
        div:hover {
            border-radius: 30%;
            background-color: skyblue;
        }
        section {
            width: 200px;
            border: 2px solid gray;
            margin: 20px auto;
            overflow: hidden;
            /* 过度属性一定要加在需要过渡的元素里面 */
            /* transition: all .5s linear; */
        }
        section img {
            display: block;
            width: 200px;
            transition: all .3s linear;
        }
        section:hover img {
            transform: scale(1.2);
        }
        /* 鼠标移入时,所改变的样式/效果,仅仅局限于自身或者子元素里 */
        /* 所以这段代码无效 */
        section:hover div {
            width: 1000px;
        }
    </style>
</head>
<body>
    <div>
    </div>
    <section>
        <img src="../image/1.jpg" alt="">
    </section>
</body>
</html>

CSS3动画属性

跟过渡效果类似,只不过动画效果可以不用依赖事件触发,CSS3动画也可以从一个状态变化到另一个状态。
CSS3动画通过 @keyframe + 动画名 可以设置多个关键帧,让元素一帧一帧变化。

animation

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: red;
            /* infinite 反复播放 */
            animation:  5s infinite;
            /* 动画完成次数 */
            animation-iteration-count: infinite;
            /* 规定动画是否反向完成 */
            animation-direction: reverse;
        }

        /* @keyframes 动画关键帧 */
        /* 是可以设置0%~100% 多个不同状态的关键帧 */
        @keyframes changeColor {
            0% {
                background-color: red;
            }

            50% {
                background-color: greenyellow;
            }

            100% {
                background-color: skyblue;
            }
        }
    </style>
</head>
<body>
    <div></div>
    <button>开启动画</button>
    <section>停止动画</section>
    
    <script>
        // onclick鼠标点击
        document.querySelector('button').onclick = function(){
            document.querySelector('div').style.animationName = 'changeColor'
        }

        document.querySelector('section').onclick = function(){
            document.querySelector('div').style.animationName = ''
        }


    </script>
</body>

</html>

过渡动画小练习

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
        }
        .box {
            width: 250px;
            border: 1px solid black;
            margin: 100px auto;
            padding: 10px;
            /* 超出部分隐藏 */
            overflow: hidden;

        }
        .innerBox{
            width: 250px;
            overflow: hidden;
            position: relative;
        }
        .box img {
            display: block;
            width: 270px;
            /* 需要让图片提前往左 */
            transform: translateX(-10px);
            opacity: .4;
            transition: all .4s;
        }

        .box:hover img{
            /* translate 是先对于最初始的位置进行平移 */
            transform: translateX(0px);
            opacity: 1;
        }

        .boxText{
            position: absolute;
            bottom: 10px;
            left: 10px;
            color: white;
            transition: all .4s;
        }
        .boxText p{
            font-size: 12px;
            opacity: 0;
            transition: all .4s;
        }
        .box:hover .boxText{
            bottom: 25px;
        }
        .box:hover p{
            opacity: 1;
        }
    </style>
</head>

<body>

    <div class="box">
        <div class="innerBox">
            <img src="http://sznews.zjol.com.cn/pic/0/10/05/67/10056714_035420.jpg" alt="">
            <div class="boxText">
                <h6>我爱前端</h6>
                <p>我来了!!!</p>
            </div>
        </div>
    </div>

</body>

</html>

效果图

过渡和动画的区别

触发事件的区别:
过渡效果需要通过事件来触发
动画效果在不需要添加事件的情况下,也能触发动画。

执行过程的区别:
过渡效果只有开始-结束这个状态。
动画效果由于使用了关键帧,可以给动画添加多个帧,多个状态。