transition属性

余生颓废 提交于 2020-02-27 10:11:36

这里主要运用了三个属性,border-radius,text-shadow,transition。 关于transition属性,是CSS3中三个动画相关的属性之一,transition属性允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。”,它的属性有(1).执行变换的属性:transition-property,(2).变换延续的时间:transition-duration,(3).在延续时间段,变换的速率变化transition-timing-function,(4).变换延迟时间transition-delay。
  下附源码,可直接使用。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <style type="text/css">
        .cont{width: 450px;height: 450px;margin: 0 auto;margin-top: 45px;font-family: "微软雅黑";font-size: 14px;}
        .cont ul{width: 450px;margin: 0px;padding: 0px;list-style: none;}
        .cont ul li{width: 450px;height: 50px;background: #fff;text-align: center;line-height: 50px;}
        .cont ul li a{width: 450px;height: 50px;color: #333;display: block;font-size: 25px;}
        .cont ul li a:hover{
            background: #99dd33;
            color: #fff;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            -ms-border-radius: 5px;
            -o-border-radius: 5px;
            border-radius: 5px;
        }    
        a {
                /*只有当鼠标移出后才处理*/
            -webkit-transition:background 0.2s linear 0s;
            -moz-transition:background 0.2s linear 0s;
            -ms-transition:background 0.2s linear 0s;
            -o-transition:background 0.2s linear 0s;
            transition:background 0.2s linear 0s;
            text-decoration: none;
        }
        a:hover { 
            background:#99dd33; color:#f60;
            -webkit-text-shadow:2px 2px 10px #f00;
            -moz-text-shadow:2px 2px 10px #f00;
            -ms-text-shadow:2px 2px 10px #f00;
            -o-text-shadow:2px 2px 10px #f00;
            text-shadow:2px 2px 10px #f00;
            /* 只有当鼠标移入时才处理
                   注:若a:hover中不写transition,则会继承a中的transition */
            /*
            1. 单个属性
                -webkit-transition:background 0.5s ease-out 0s;
            2. 多个属性:
               -webkit-transition:background, 0.5s ease-out 0s, color 0.4 ease-out 0s;
            */
               -webkit-transition:background 0.8s ease-out, color 0.4s ease-out, text-shadow 0.3s linear;
            -moz-transition:background 0.8s ease-out, color 0.4s ease-out, text-shadow 0.3s linear;
            -ms-transition:background 0.8s ease-out, color 0.4s ease-out, text-shadow 0.3s linear;
            -o-transition:background 0.8s ease-out, color 0.4s ease-out, text-shadow 0.3s linear;
            transition:background 0.8s ease-out, color 0.4s ease-out, text-shadow 0.3s linear;
        } 
    </style>
</head>
<body>
    <div class="cont">
        <ul>
            <li><a href="#">HTML</a></li>
            <li><a href="#">CSS3</a></li>
            <li><a href="#">JavaScript</a></li>
            <li><a href="#">JQuery</a></li>
            <li><a href="#">YUI</a></li>
            <li><a href="#" class="li">Python</a></li>
        </ul>
    </div>
</body>
</html>

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!