Home > Web Front-end > HTML Tutorial > CSS3 transition属性_html/css_WEB-ITnose

CSS3 transition属性_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:35:31
Original
1328 people have browsed it

  1. Transition(过渡),设置过渡时间,(transition-duration)

    <head>    <title>无标题文档</title>    <style>        .box{width:100px;height:100px;background:red; transition:500ms;}        .box:hover{ background:blue;width:200px;height:200px;}    </style></head><body>    <div class="box"></div></body>
    Copy after login

  2. 只设置某一个样式过渡,即要运动的样式,下面的例子设置了width过渡(all | width | height | ... | none):

    <head>    <title>无标题文档</title>    <style>        .box{width:100px;height:100px;background:red; transition:500ms width;}        .box:hover{ background:blue;width:200px;height:200px;}    </style></head><body>    <div class="box"></div></body>
    Copy after login

  3. 设置运动形式:transition-timing-function (ease[默认值,逐渐变慢], linea[匀速], ease-in[加速], ease-out[减速], ease-in-out[先加速后减速], cubic-besizer[贝塞尔曲线](http://matthewlein.com/ceaser/))

    <head>    <title>无标题文档</title>    <style>        .box{width:100px;height:100px;background:red; transition:5s width cubic-bezier(0.145,1.295,0.000,1.610);}        .box:hover{width:500px;}    </style></head><body>    <div class="box"></div></body>
    Copy after login

  4. 同时设置多个样式的过渡时间,用逗号分隔开,如下

    <head>    <title>无标题文档</title>    <style>        .box{width:100px;height:100px;background:red; transition:1s width,2s height,3s background;}        .box:hover{width:500px;height:300px;background:blue;}    </style></head><body>    <div class="box"></div></body>
    Copy after login

  5. 设置延迟时间,transition-delay,即多长时间后开始某个运动,下面的例子中在1s之后高度开始过渡

     1 <head> 2     <title>无标题文档</title> 3     <style> 4         .box{width:100px;height:100px;background:red; transition:1s width,2s 1s height,3s 3s background;} 5         .box:hover{width:500px;height:300px;background:blue;} 6     </style> 7 </head> 8 <body> 9     <div class="box"></div>10 </body>
    Copy after login

  6. 过渡结束时触发指定的执行函数,在过渡结束时,执行alert(“end”)

    <head>    <title>无标题文档</title>    <style>        .box{width:100px;height:100px;background:red; transition:1s width;}    </style></head><body>    <div class="box" id="box"></div>    <script>        var oBox=document.getElementById("box");        oBox.onclick=function()        {          this.style.width=this.offsetWidth+100+"px";        };        addEnd(oBox,function(){          alert("end");            });        function addEnd(obj,fn)        {          obj.addEventListener('WebkitTransitionEnd',fn,false);          obj.addEventListener('transitionend',fn,false);        }    </script></body>
    Copy after login

     

  7. 过渡完成事件
  8. Webkit内核: obj.addEventListener('webkitTransitionEnd', function(){}, false);
  9. firefox内核:obj.addEventListener('transitionend', function(){}, false);

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template