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组成的

  • 相关阅读:
    Docker02 Docker初识:第一个Docker容器和Docker镜像
    Docker01 CentOS配置Docker
    Jenkins02:Jenkins+maven+svn集成
    Junit01 新建Maven项目
    Junit02 Junit创建及简单实现
    Jenkins01:linux+jenkins+ant+jmeter集成
    Jenkins初识03:构建定时任务
    python 协程
    python之socket 网络编程
    python 面向对象
  • 原文地址:https://www.cnblogs.com/zhai1997/p/13285750.html
Copyright © 2011-2022 走看看