前端学习笔记79-过渡

最新推荐文章于 2024-08-29 08:55:17 发布

小欣CZX

最新推荐文章于 2024-08-29 08:55:17 发布

阅读量99

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/weixin_45034895/article/details/116734605

版权

小白前端学习专栏收录该内容

100 篇文章 7 订阅

订阅专栏

前端学习笔记79-过渡

transition

终于学完了小米商城练习，进度有点慢。

先看代码

<!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>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            width:800px;
            height: 800px;
            background-color: silver;
            overflow: hidden;
        }
        .box1 div{
            width: 100px;
            height: 100px;
            margin-top: 100px;
        
        }
        .box2{
            background-color: #bfa;
            
        }
        .box1:hover .box2{
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

在这里插入图片描述
这个代码的效果就是当我鼠标移入时，box2会从100100变成200200。
这种变化是瞬时的，如果我想让它有过渡效果，需要怎么处理？
用transition。

transition

作用：指定某属性发生变化时的切换方式。

        .box2{
            background-color: #bfa;
            transition: all 2s;
        }

将box2改成这个后，当box2的宽高发生变化时，需要2s进行过渡。

注意：过渡必须是从一个有效值向另一个有效值进行过渡，比如有一个值是auto，则是不能实现过渡的。

transition-property

指定要执行过渡的属性，属性间用逗号隔开，如果指定所有属性，写all。
（仅仅设置这个没有用，还得设置时间才有用）

transition-duration

指定过渡效果的持续时间。
可以写成s或ms

        .box2{
            background-color: #bfa;
            transition-property: all;
            /* transition-duration: 1000ms; */
            transition-duration: 1s;
        }

transition-timing-function

过渡的时序函数
如果我们设置这个属性，可以改变它的变化方式，即加速变化还是减速变化。
ease：默认值，先加速后减速。
linear：匀速。
ease-in：加速运动。
ease-out：减速运动。
ease-in-out：先加速后减速。

这几个都可以用cubic-bezier（）来指定。
这个怎么用呢？
可以查网站
这里我选中linear。
在这里插入图片描述
然后看地址。

这里写着0，0，1，1。
所以cubic-bezier（）写0,0,1,1就可以实现和linear一样的效果了。

如果想自己设置，可以调节这两个。
在这里插入图片描述
然后就可以得到相应的四个值。

steps()：分布执行过渡效果。简单理解就是写多少，它就跳几次。写1的话，就直接跳到终态。
steps（2，end）,这个的意思是，执行两步，如果我设置了10s的过渡时间，则在第5s跳一下，在第10s再跳一下到达终态。
steps（2，start），这个的意思是，执行两步，如果我还是设置了10s的过渡时间，则在第0s调一下，在第5s再跳一下到达终态。

transition-delay

过渡效果的延迟。设置多少就等多少，然后再开始变化。

transition

一般用这个简写属性。
如果同时设置delay和过渡时间，则过渡时间在前。

小欣CZX

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端学习笔记79-过渡

前端学习笔记78-过渡transitiontransition-propertytransition-durationtransition-timing-functiontransition-delaytransition终于学完了小米商城练习，进度有点慢。先看代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA
复制链接

扫一扫