标签按钮下划线滑动效果

作者: Frank_Fang | 来源:发表于2020-07-09 18:11 被阅读0次

标签按钮下划线滑动效果
vue菜单点击下划线跟随动画
封装头部切换视图
unity 实现轮盘方式的按钮滚动效果
关于自定义cell删除效果
微信小程序左滑删除效果的实现
图片幻灯片滚动（内容滑块）效果用jquery实现
按钮下划线随着按钮点击移动效果
Android分享一个开源项目ShapeView
19-标题栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .yw-tab-tab {
            position: relative;
            display: flex;
            max-width: 414px;
            justify-content: space-between;
            border-bottom: 1px solid #717678;
            background-color: #fff;
            margin: 30px auto;
        }

        .yw-tab-tab::before,
        .yw-tab-tab::after {
            position: absolute;
            width: calc(var(--target-width, 0) * 1px);
            left: calc(var(--target-left, -299) * 1px);
            color: #2a80eb;
        }

        .yw-tab-tab[style]::before,
        .yw-tab-tab[style]::after {
            content: '';
        }

        .yw-tab-tab::before {
            background-color: currentColor;
            height: calc(var(--target-height) * 1px);
            mix-blend-mode: overlay;
        }

        .yw-tab-tab::after {
            border-bottom: solid;
            bottom: -2px;
            transition: left .2s, width .2s;
        }

        .yw-tab-a {
            color: #717678;
            padding: 10px 0;
        }
    </style>
</head>

<body>
    <div class="yw-tab-tab">
        <a href="javascript:" class="yw-tab-a">QQ阅读</a>
        <a href="javascript:" class="yw-tab-a">起点读书</a>
        <a href="javascript:" class="yw-tab-a">红袖读书</a>
        <a href="javascript:" class="yw-tab-a">飞读免费小说</a>
    </div>
    <script>
        /**
         * @author zhangxinxu(.com)
         * @description 点击页面任意位置，标记坐标位置
         */
        document.addEventListener('mousedown', function (event) {
            var target = event.target;
            var body = document.body;
            var html = document.documentElement;

            // 设置自定义属性值
            body.style.setProperty('--pagex', event.pageX);
            body.style.setProperty('--pagey', event.pageY);

            html.style.setProperty('--clientx', event.clientX);
            html.style.setProperty('--clienty', event.clientY);
            html.style.setProperty('--scrolly', window.pageYOffset);

            target.style.setProperty('--offsetx', event.offsetX);
            target.style.setProperty('--offsety', event.offsetY);
            target.parentElement.style.setProperty('--target-width', target.clientWidth);
            target.parentElement.style.setProperty('--target-height', target.clientHeight);
            target.parentElement.style.setProperty('--target-left', target.offsetLeft);
            target.parentElement.style.setProperty('--target-top', target.offsetTop);
        });
    </script>

</body>

</html>

转载自 https://www.zhangxinxu.com/wordpress/2020/07/css-var-improve-components/