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

最新推荐文章于 2024-09-17 16:37:29 发布

一只情绪稳定的老虎

最新推荐文章于 2024-09-17 16:37:29 发布

阅读量143

点赞数 1

分类专栏： HTML基础学习心得文章标签： html css3

本文链接：https://blog.csdn.net/highgh/article/details/108119507

版权

HTML基础学习心得专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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>