zoukankan      html  css  js  c++  java
  • CSS笔记(十三)CSS3之过渡

    参考:http://www.w3school.com.cn/css3/css3_transition.asp

    通过 CSS3,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。

     

    过渡属性

    下面的表格列出了所有的转换属性:

    属性描述CSS
    transition 简写属性,用于在一个属性中设置四个过渡属性。 3
    transition-property 规定应用过渡的 CSS 属性的名称。 3
    transition-duration 定义过渡效果花费的时间。默认是 0。 3
    transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。 3
    transition-delay 规定过渡效果何时开始。默认是 0。 3

      实例1

    <!DOCTYPE html>
    <html>
    <head>
    <style> 
    div
    {
    width:100px;
    height:100px;
    background:yellow;
    transition:width 2s;
    -moz-transition:width 2s; /* Firefox 4 */
    -webkit-transition:width 2s; /* Safari and Chrome */
    -o-transition:width 2s; /* Opera */
    }
    
    div:hover
    {
    width:300px;
    }
    </style>
    </head>
    <body>
    
    <div></div>
    
    <p>请把鼠标指针放到黄色的 div 元素上,来查看过渡效果。</p>
    
    <p><b>注释:</b>本例在 Internet Explorer 中无效。</p>
    
    </body>
    </html>
    View Code

    实例2

    <!DOCTYPE html>
    <html>
    <head>
    <style> 
    .animated_div
        {
        width:65px;
        height:40px;
        background:#92B901;
        color:#ffffff;
        position:absolute;
        font-weight:bold;
        font:12px '微软雅黑', Verdana, Arial, Helvetica, sans-serif;
        padding:20px 10px 0px 10px;
        float:left;
        margin:5px;
        -webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s;
        -webkit-border-radius:5px;
        -o-transition-property:width,height,-o-transform,background,font-size,opacity;
        -o-transition-duration:1s,1s,1s,1s,1s,1s;
        -moz-transition-property:width,height,-o-transform,background,font-size,opacity;
        -moz-transition-duration:1s,1s,1s,1s,1s,1s;
        transition-property:width,height,transform,background,font-size,opacity;
        transition-duration:1s,1s,1s,1s,1s,1s;
        border-radius:5px;
        opacity:0.4;
        }
    
    .animated_div:hover
        {
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
        opacity:1;
        background:#1ec7e6;
        width:90px;
        height:60px;
        font-size:16px;
        }
    </style>
    </head>
    <body>
    
    <div></div>
    <p class="animated_div">CSS3 过渡</p>
    
    </body>
    </html>
    View Code

    变化前效果:

    过程中:

  • 相关阅读:
    卡尔曼滤波的原理与思想
    什么是端口
    什么是ICD文件
    USB口,串口,以太网口简介
    Linux基本操作笔记
    网络营销学习路线图
    读书推荐:2017 第一期
    又见Bug
    如何请教别人问题?
    圆桌问答 (2017 第一季)
  • 原文地址:https://www.cnblogs.com/AmitX-moten/p/4847522.html
Copyright © 2011-2022 走看看