您当前位置:主页 > 程序开发 >
 
css transition过渡
日期:2019-01-08 编辑:凯发K

css transition过渡
css过渡效果 transition设置过渡,transition的属性包括如下图:   设置格式  为了不同浏览器的效果,需要为其它几种添加相应的前缀标识:               transition: width 2s;      -moz-transition: width 2s;      /* Firefox 4 */  -webkit-transition: width 2s;       /* Safari 和 Chrome */          -o-transition: width 2s;       /* Opera */ 如下:    width属性会改变, 用时1秒,速度样式匀速,延时1秒。 transition-property:width; transition-duration:1s; transition-timing-function:linear;   //过渡效果 transition-delay:1s;   //过渡延时 简写格式:transition:width 1s linear 1s;   也可以多属性样式改变,如下: width,height,transform属性会改变,对应的样式用时1秒中,过渡效果为linear(匀速),延时1秒 transition-property:width, height,transform; transition-duration:1s,1s,1s,; transition-timing-function:linear;   //过渡效果 transition-delay:1s;   //过渡延时 简写格式:transition:width 1s,height 1s,transform 1s; 以上之后,确定属性改变的时候,可以是在鼠标放在元素上之后: 元素:hover{             width: 150px;             height: 150px;             transform:rotate(360deg); }需要为其它几种添加相应的前缀标识: 这样就ok 了。!

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>css的过渡</title>
    <style>
        #test{
            width: 1000px;
            margin: auto;
            text-align: center;
        }
        .demo{
            width: 100px;
            height: 100px;
            margin-top: 100px;
            text-align: center;
            line-height: 100px;
            display: inline-block;
            background: red;
            transition-property: width,height,transform;
            transition-duration: 1s;
            transition-timing-function: linear;
            /* Firefox 4 */
            -moz-transition-property:width,height,transform;
            -moz-transition-duration:1s;
            -moz-transition-timing-function:linear;
            /* Safari 和 Chrome */
            -webkit-transition-property:width,height,transform;
            -webkit-transition-duration:1s;
            -webkit-transition-timing-function:linear,transform;
            /* Opera */
            -o-transition-property:width,height,transform;
            -o-transition-duration:1s;
            -o-transition-timing-function:linear;
        }
        .demo:hover{
            width: 150px;
            height: 150px;
            line-height: 150px;
            background-color: red;
            transform:rotate(360deg);
            -moz-transform:rotate(360deg);
            -webkit-transform:rotate(360deg);
            -o-transform:rotate(360deg);
        }
    </style>
</head>
<body>
<div id="test">
    <div class="demo" style="background-color: yellowgreen">hello word!</div>
    <div class="demo" style="background-color: greenyellow">PHP语法</div>
    <div class="demo" style="background-color: dodgerblue">object</div>
    <div class="demo" style="backgroAAA-color: chartreuse">c++</div>
    <div class="demo" style="background-color: palevioletred">java</div>
</div>
</body>
</html>

 


http://www.bkjia.com/HTML_CSS/1062969.htmlwww.bkjia.comtruehttp://www.bkjia.com/HTML_CSS/1062969.htmlTechArticlecss transition过渡 css过渡效果 transition设置过渡,transition的属性包括如下图: 设置格式 为了不同浏览器的效果,需要为其它几种添加相应的...

本文源自: AG环亚娱乐

上一篇:2012年排名前20位的CSS网站作品 下一篇:没有了
 
Copyright © 2005-2016 http://www.tecsquared.com AG环亚娱乐_AG直营网_环亚娱乐AG最佳线路_腾讯体育版权所有 AG环亚娱乐_AG直营网_环亚娱乐AG最佳线路_腾讯体育