zoukankan html css js c++ java

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

查看全文

相关阅读:
Eclipse CDT Linux下内存分析实战历险
 .Net元编程【Metaprogramming in NET】序-翻译
 go语言和资料
 代码提交【转】
两本有意思的书【代码的未来、淘宝技术这十年】
C/C++构建系统 GNU autotool
C/C++构建系统 -工具汇总
 使用Java语言开发微信公众平台(四)——图文消息的发送与响应
 Onsen UI 前端框架（二）
Maven项目搭建（一）：Maven初体验

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