css 过渡效果 - 码农教程

来自 https://www.w3school.com.cn/cssref/pr_transition-timing-function.asp

css

<!DOCTYPE html>
<html>

<head>
    <style>
      .right_head_ul li {
            display: inline-block;
            padding: 0 12px;
            text-align: center;
            font-size: 14px;
            vertical-align: middle;
            -webkit-transform: perspective(1px) translateZ(0);
            transform: perspective(1px) translateZ(0);
            box-shadow: 0 0 1px transparent;
            position: relative;
            overflow: hidden
        }

        .right_head_ul li:hover {
            background: #f2f2f2 !important;
        }

        .right_head_ul li:before {
            content: "";
            position: absolute;
            z-index: -1;
            left: 0;
            right: 100%;
            bottom: 0;
            background: #818080;
            height: 4px;
            -webkit-transition-property: right;
            transition-property: right;
            -webkit-transition-duration: 0.3s;
            transition-duration: 0.3s;
            -webkit-transition-timing-function: ease-out;
            transition-timing-function: ease-out
        }

        .right_head_ul li:hover:before,
        .right_head_ul li:focus:before,
        .right_head_ul li:active:before {
            right: 0;
        }

        /* 选中的before不显示*/
        .larryms-tab ul.larryms-tab-title li.layui-this:before {
            display: none
        }
    </style>
    <script>
        window.HandleHelper = window.HandleHelper || {};
    </script>
    <script src="MyStringBuilderHanbleHelper.min.js"></script>
</head>

<body>

    <div class="page-tabs-content">
        <div class="right_head">
            <i>&#60;</i>
        </div>
        <ul class="right_head_ul" style="">
            <li>
                <a>后台首页</a>
            </li>
            <li>
                <a>首页示例02</a>
            </li>
            <li>
                <a>首页示例03</a>
            </li>
        </ul>
        <div data-d="这是右侧">

        </div>

    </div>
    
</body>

</html>

请把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。

注释：本例在 Internet Explorer 中无效。

转自： https://www.w3school.com.cn/tiy/t.asp?f=css3_transition-timing-function

原文地址：https://www.cnblogs.com/enych/p/11944939.html