CSS之【过度模块】

最新推荐文章于 2024-01-28 19:18:07 发布

叫我邱球球

最新推荐文章于 2024-01-28 19:18:07 发布

阅读量677

点赞数

分类专栏：有关CSS 文章标签： css 过渡动画前端基础

本文链接：https://blog.csdn.net/CallMeQiuqiuqiu/article/details/62274788

版权

有关CSS 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

当我们学习完伪类选择器之后，我们可以写如下的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过度模块</title>
    <style type="text/css">
        div{
            width: 100px;
            height: 30px;
            background-color: red;
        }
div:hover{
    width: 300px;
}
    </style>
</head>
<body>
<div></div>
</body>
</html>

通过以上的代码让我们把鼠标放在div上时，会自动的将宽度变为300px。

但是这个过程是瞬时的，我们如何将这个过程变的缓慢一点，呈现一个过渡的效果呢？

这就需要我们今天将要学习的知识：过渡效果

-----------------------------------------分割线---------------------------

英语很好的同学应该可以知道“过渡”就是transition.

当我们用到transition的时候，我们需要设置两个属性，一是要告诉浏览器，我们要将哪一个属性呈现过渡效果；

另一个就是我们过渡效果的时间是多少。

①transition-property: ; property就是属性的意思。因此这个就是可以告诉浏览器我们要设置哪一个属性。

②transition-duration: 5s; duration就是过渡时间的意思。transition-duration就是过渡效果的过渡时间。

举一个栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过度模块</title>
    <style type="text/css">
        div{
            width: 100px;
            height: 30px;
            background-color: red;
            transition-property: width;
            transition-duration: 3s;
        }
div:hover{
    width: 300px;
}
    </style>
</head>
<body>
<div></div>
</body>
</html>

这时候div就会出现过渡变长的效果。

-----------------------------------分割线------------------------------------

过渡三要素：

1.必须要有属性发生变化

2.必须告诉浏览器哪个属性需要执行过渡效果

3.必须告诉浏览器过渡效果持续的时间

-----------------------------------分割线------------------------------------

如果是多个属性需要进行过渡的话，就应该在transition-property的值后面加个逗号“,”并且再将属性写入，时间也是如此。

举个栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过度模块</title>
    <style type="text/css">
        div{
            width: 100px;
            height: 30px;
            background-color: red;
            transition-property: width,background-color;
            transition-duration: 3s,4s;
        }
div:hover{
    width: 300px;
    background-color: blue;
}
    </style>
</head>
<body>
<div></div>
</body>
</html>

上述代码可以让div中的宽度和颜色都会呈现过渡的效果.

---------------------------------分割线--------------------------------------

关于transition的其他属性：

通过上面的学习我们已经知道了transition-property 和 transition-duration

现在我们来学习：

transition-delay，例如transition-delay: 2s; 意思就是当鼠标悬停上的时候，拖延两秒钟再展示过渡动画效果。

transition-timing-function:; 这个属性就是用来控制速度的。分别有五个值，在w3c中都能够找到

linear 是匀速

ease 是逐渐变慢

ease-in 是逐渐变快

ease-out 减速

ease-in-out 先加速后减速

过渡连写的格式：

transition: width 5s linear 2s;

即 transition:过渡属性过渡时间运动速度延迟时间;

过渡连写的注意点：

①如果要给多个属性添加过渡效果，也是用逗号隔开即可。比如transition:width 5s linear 2s, background-color 2s ease 0s ;

②连写的时候可以省略后两个属性，因为只要有前面两个属性就已经满足了过渡效果的三要素。

------------------------------------------分割线--------------------------------------------

下面我贴出来一个用过渡效果的一个弹性动画：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过度模块之弹簧效果</title>
    <style type="text/css">
        div{
            height: 100px;
            background-color: red;
            margin:0 auto;
            margin-top: 80px;
            text-align: center;
        }
            span{
                line-height: 100px;
                font-family: "微软雅黑";
                font-weight: bold;
             transition:margin 3s ;
                font-size: 50px;
            }
        div:hover span{
            display: inline-block;
            margin:0 30px;
        }
    </style>
</head>
<body>
<div>
   <span>梦</span>
   <span>想</span>
   <span>终</span>
   <span>将</span>
   <span>照</span>
   <span>进</span>
   <span>现</span>
   <span>实</span>
</div>
</body>
</html>

每天进步一点点

叫我邱球球

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS之【过度模块】

当我们学习完伪类选择器之后，我们可以写如下的代码：过度模块 div{ width: 100px; height: 30px; background-color: red; }div:hover{ width: 300px;}
复制链接

扫一扫

专栏目录