CSS（过渡）

全栈开发日记

发布于 2022-05-12 13:38:21

55600

代码可运行

文章被收录于专栏：全栈开发日记全栈开发日记

运行总次数：0

代码可运行

CSS3过渡

实现的效果：

没有那么多服务器空间放网页，所以用文字来描述；

有一个盒子(div)初始宽度100px，设置CSS hover属性后使它鼠标悬浮上面时实现盒子宽度属性变为300px；但是我们鼠标一放上去后，盒子的宽度属性会立马变成300px，没有任何过渡效果；我们可以利用CSS3中的过渡来实现过渡效果，让它平滑的展开或者收缩；

先看代码

<head>
    <meta charset="UTF-8">
    <title>CSS3学习</title>
    <style>
        div{
            height: 100px;
            width: 100px;
            background-color: black;
            transition:2s;
        }
        div:hover{
            width: 300px;
        }
</style>
</head>
<body>
<div>css3过渡</div>
</body>

过渡属性：

属性	描述
transition	简写属性，用于在一个属性中设置四个过渡属性
transition-property	规定应用过渡的 CSS 属性的名称
transition-duration	规定完成过渡效果需要多少秒或毫秒。
transition-timing-function	规定过渡效果的时间曲线。默认是 "ease"
transition-delay	规定过渡效果何时开始。默认是 0

transition属性

JavaScript 语法：

Object.style.transition="width 2s"

CSS语法：

transition: property duration timing-function delay;
//详细属性描述看下表描述//详细属性描述看下表描述

值	描述
transition-property	规定设置过渡效果的 CSS 属性的名称。
transition-duration	规定完成过渡效果需要多少秒或毫秒。
transition-timing-function	规定速度效果的速度曲线。
transition-delay	定义过渡效果何时开始。

transition-property属性

注意一定要设置transition-duration属性，否则时间为0，就不会有过渡效果。

JavaScript 语法：

object.style.transitionProperty="width,height";

CSS语法：

transition-property: none|all|property;

值	描述
none	没有属性会获得过渡效果。
all	所有属性都将获得过渡效果。
property	定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。