zoukankan      html  css  js  c++  java
  • CSS3-transition

    1、transition代表css3中的过渡,可以使元素从一种样式逐渐改变为另一种的效果。

    2、transition: height 2s;表示需要渐变的是元素高度height,渐变时间是2s。transition还有其他参数如下图:

    3、-moz-,-webkit-,-o-这三个是厂商前缀,不同浏览的厂商,因为不同浏览器有不同的标准,所以为了兼容性,需要把常用的浏览器对应的厂商前缀加上。所以四个属性代表的是一个意思。
    -moz- 是火狐浏览器厂商前缀
    -webkit- 是谷歌浏览器厂商前缀
    -o- 是opera浏览器厂商前缀

    4、div {
    100px;
    height:30px;
    background:blue;
    transition:width 2s;
    -moz-transition:height 2s; /* Firefox 4 */
    -webkit-transition:height 2s; /* Safari and Chrome */
    -o-transition:width 2s; /* Opera */
    }
    这句话的意思是:

    1)设置一个div元素,宽度100px,高度30px,背景是蓝色,设置过渡效果2s。

    2)当浏览器是火狐、Safari(mac自带浏览器)、谷歌(Chrome)时,触发高度变化时产生2s的渐变效果。

    3)当浏览器是除上一句话中的浏览器之外时,触发宽度变化时产生2s的渐变效果。

    5、用法:需要一个触发渐变效果的产生的条件。比如:
    div:hover {
    height:100px
    }
    这个意思是说,当鼠标悬停在元素div上时,会触发div元素高度渐变2s内会变为100px;但是当鼠标移出时,div的高度同样会在2秒内恢复为30px。

    扩展资料

    transition渐变属性值可设置多个。如width 2s, height 2s, transform 2s;
    例子:效果是当鼠标hover到div上时,高度变为200px,宽度变为200px,同时div元素旋转180度。

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

    div:hover {
    200px;
    height: 200px;
    transform: rotate(180deg);
    -moz-transform: rotate(180deg);/* Firefox 4 */
    -webkit-transform: rotate(180deg);/* Safari and Chrome */
    -o-transform: rotate(180deg);/* Opera */
    }
    </style>
    </head>

    <body>
    <div>请把鼠标指针放到黄色的 div 元素上,来查看过渡效果。</div>
    <p><b>注释:</b>本例在 Internet Explorer 中无效。</p>
    </body>
    </html>

    整体使用代码如下:

    效果如下:

    参考资料:

    MDN技术文档-使用 CSS transitions

    转载自:https://zhidao.baidu.com/question/571327707.html

  • 相关阅读:
    SQL 存储过程分页
    SqlServer中代理作业实现总结
    firfox兼容性插件
    C#停靠栏组件 DockPanel Suite
    Web.Config加密
    osql
    prototype.js的Ajax对IE8兼容问题解决方案
    获取系统的字体
    基于RBAC的权限管理系统的实现经典
    c/s(C#)下Ftp的多文件上传及其上传进度
  • 原文地址:https://www.cnblogs.com/planetwithpig/p/11614544.html
Copyright © 2011-2022 走看看