css中的transition和transform

最新推荐文章于 2024-06-21 17:17:44 发布

非空空如也哉

最新推荐文章于 2024-06-21 17:17:44 发布

阅读量505

点赞数

分类专栏：入门自学文章标签： css

本文链接：https://blog.csdn.net/adsensca/article/details/119756401

版权

入门同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

自学

16 篇文章 0 订阅

订阅专栏

transition

transition主要是用于做一些动画过度效果

可选参数

transition-property

需要添加过渡效果的css属性

transition-duration

过渡效果的持续时间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        
    </div>
</body>
<style>
    div{
        width: 100px;
        height: 50px;
        margin:  200px  auto;
        background-color: skyblue;
        transition: all 1s;// 属性名也可以是all，这时会对所有变化的css样式添加过度效果
    }
    div:hover{
        width: 200px;
        height: 400px;
    }
</style>
</html>

transition-timing-function

过度效果的曲线速度

从上之下分别为：linear，ease，ease-in，ease-out，ease-in-out

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="b1">linear</div>
    <div class="b2">ease</div>
    <div class="b3">ease-in</div>
    <div class="b4">ease-out</div>
    <div class="b5">ease-in-out</div>
    <button id="start">开始</button>
</body>
<style>
    div{
        width: 100px;
        height: 50px;
        margin:  10px  auto;
        background-color: skyblue;
        transition: all 1s;
        text-align: center;
        line-height: 50px;
    }
    div:hover{
        width: 200px;
    }
    .change{
        width: 200px;
    }
    .b1{
        transition-timing-function: linear;
    }
    .b2{
        transition-timing-function: ease;
    }
    .b3{
        transition-timing-function: ease-in;
    }
    .b4{
        transition-timing-function: ease-out;
    }
    .b5{
        transition-timing-function: ease-in-out;
    }
</style>
<script>
    var lists = document.getElementsByTagName('div');
    console.log(lists.length);
    var btn = document.getElementById('start');
    let flag = false
    btn.addEventListener('click',()=>{
        if (!flag) {
            for (let index = 0; index < lists.length; index++) {
                const element = lists[index];
                element.classList.add('change');
                flag = true;
            }  
        }else{
            for (let index = 0; index < lists.length; index++) {
                const element = lists[index];
                element.classList.remove('change');
                flag = false;
            }
        }
    })
</script>
</html>

transition-delay

过渡效果的出发时间

transform

transform主要是用于改变一些我们难以实现的样式

例如：将div盒子旋转30°

div{
        width: 100px;
        height: 50px;
        margin:  200px  auto;
        background-color: skyblue;
        transition: all 1s;
        text-align: center;
        line-height: 50px;
        transform: rotate(10deg);
    }

我们可以通过transform-origin来控至变换的轴，支持输入两个0~100%之间的参数

同时transform还支持更多的变换方式，详情：https://www.w3school.com.cn/cssref/pr_transform.asp

transform-style 有两个参数，flat和preserve-3d

当参数为flat时，拥有这一css样式的元素的子元素将不保留其 3D 位置。

当参数为preserve-3d时，其子元素将保留其 3D 位置。

该属性必须与 transform 属性一同使用

同时transform和transition也可以结合起来使用

赶快动手试试吧

非空空如也哉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css中的transition和transform

transitiontransition主要是用于做一些动画过度效果可选参数transition-property需要添加过渡效果的css属性transition-duration过渡效果的持续时间<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="
复制链接

扫一扫

专栏目录