zoukankan      html  css  js  c++  java
  • CSS样式

    transition: property duration timing-function delay;

    展示地址:http://www.w3school.com.cn/cssref/pr_transition.asp

    <!DOCTYPE html>
    <html>
    <head>
    <style> 
    div
    {
    100px;
    height:100px;
    background:blue;
    transition:width 2s;
    -moz-transition:width 2s; /* Firefox 4 */
    -webkit-transition:width 2s; /* Safari and Chrome */
    -o-transition:width 2s; /* Opera */
    }
    
    div:hover
    {
    300px;
    }
    </style>
    </head>
    <body>
    
    <div></div>

    浏览器支持情况:

    Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 属性。

    Safari 支持替代的 -webkit-transition 属性。

    注释:Internet Explorer 9 以及更早版本的浏览器不支持 transition 属性。

     

     

    transition 属性是一个简写属性,用于设置四个过渡属性:

    • transition-property
    • transition-duration
    • transition-timing-function
    • transition-delay

    注释:请始终设置 transition-duration 属性,否则时长为 0,就不会产生过渡效果。

     

    描述
    transition-property 规定设置过渡效果的 CSS 属性的名称。
    transition-duration 规定完成过渡效果需要多少秒或毫秒。
    transition-timing-function 规定速度效果的速度曲线。
    transition-delay 定义过渡效果何时开始。
  • 相关阅读:
    IDEA添加注释模板
    Docker安装Mysql
    Linux使用
    Linux使用
    Spring Cloud入门 (5)
    在IDEA中将SpringBoot项目打包成jar包
    Linux使用
    Linux使用
    Linux使用- 虚拟机安装 Linux
    Spring Cloud入门 (4)
  • 原文地址:https://www.cnblogs.com/liuguiqian/p/11095516.html
Copyright © 2011-2022 走看看