zoukankan      html  css  js  c++  java
  • css:css3新特性(过渡)

    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 {
                     300px;
                    height: 300px;
                    background-color: aqua;
                }
                
                div:hover {
                     340px;
                    background-color: blue;
                }
            </style>
        </head>
    
        <body>
            <div>
    
            </div>
    
        </body>
    
    </html>

    (2)添加过渡效果:

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

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

    (3)同时更改两个属性:

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

    效果展示:

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

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

    3、html5

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

  • 相关阅读:
    Js 循环 forEach, map, for, for...in, for...of
    es6 let const
    es6 Symbol类型
    es6 Reflect 与 Proxy
    es6 Map&Set
    es6箭头函数
    es6数组Arrary
    学写网站(一)前端配置之安装nvm、node、npm
    python获取当前执行代码所在文件的地址、主程序所在地址
    scrapy中的选择器下载中间件downloadmiddlewares
  • 原文地址:https://www.cnblogs.com/zhai1997/p/13285750.html
Copyright © 2011-2022 走看看