css：css3新特性（过渡）

时间：2020-07-11 23:41:21 阅读：78 评论：0 收藏：0 [点我收藏+]

1、过渡的理解

（1）概念

过渡是css3中的新特性之一，可以让我们在不使用flash动画和js的情况下，当元素从一种样式转换为另外一种样式的的时候为元素添加效果
过渡动画：从一个状态渐渐地过渡到另一个状态的过程

（2）属性

花费时间：单位s，必须写
运动曲线：默认是ease，可省略
何时开始：单位s，必须写；可以设置延时触发事件，默认是0，可省略

2、过渡的应用

（1）不添加过渡效果

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script></script>
        <style>
            div {
                width: 300px;
                height: 300px;
                background-color: aqua;
            }
            
            div:hover {
                width: 340px;
                background-color: blue;
            }
        </style>
    </head>

    <body>
        <div>

        </div>

    </body>

</html>

技术分享图片

（2）添加过渡效果：

    <style>
            div {
                width: 300px;
                height: 300px;
                background-color:aqua;
                transition: width   1.5s;
            }
            div:hover{
                width: 340px;
                background-color: blue;
            }
        </style>

在鼠标经过的时候是一个渐变的过程：

技术分享图片

（3）同时更改两个属性：

    <style>
            div {
                width: 300px;
                height: 300px;
                background-color:aqua;
                transition: width  1.5s 1s,height  1.5s 1s;
            }
            div:hover{
                width: 340px;
                height: 340px;
                background-color: blue;
            }
        </style>

效果展示：

技术分享图片

简化写法：表示变化所有的属性

    <style>
            div {
                width: 300px;
                height: 300px;
                background-color:aqua;
                transition: all  1.5s 1s;
            }
            div:hover{
                width: 340px;
                height: 340px;
                background-color: blue;
            }
        </style>

3、html5

广义的html5是html5本身和css3和js组成的

css：css3新特性（过渡）

原文：https://www.cnblogs.com/zhai1997/p/13285750.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)