css 3 var変数を使用してクールなbutton効果を実現

css 3 var変数定義

何気なくcss 3のカスタム属性を持つ機能を発見し、この機能を利用して、灰常牛迫の機能を実現することができます.図:cssカスタム変数の文法は--*の命名規則も広く、$、[、^、(、%を除いても中国語名を取ることができる.栗を挙げます.

p {
  --    : #ff4400;
  color: var(--    );
}

一見、sass、less変数と差は少ないですが、css原生が持参したもので便利です.ただし、 の設定はサポートされていません.たとえば、次のようになります.

    p{
        --test:font-size;
        var(--test):24px;
    }

oh、このように書くのは無効です...

varのデフォルト値

もう1つはデフォルト値です.設定された値が不正な場合、通常の解析を保証するデフォルト値が与えられます.たとえば、次のようにします.

 p{
    --color: 20px;
    background-color:var(--color)
 }

background-color:transparent;に解析されます

varスペース追従特性

p {
  --size: 20;   
  font-size: var(--size)px;
}

このように書くと、実際にはこのようにfont-size:20 pxになって自動的にスペースになります...良い穴、sassあるいはlessの変数の概念でリズムを持ってはいけません.正しい書き方はこうです

p {
  --size: 20px;   
  font-size: var(--size);
}

または

p {
  --size: 20;   
  font-size: calc(var(--size) * 1px);
}

具体的には張鑫旭大神のブログを参考にすることができます.

実際の応用

この不思議な変数で牛のボタン効果を実現しましょう.直接コードhtmlに行きましょう.

 <button class="button">
    <span>      ！span>
 button>

.button {
            position: relative;
            appearance: none;
            background: #f72359;
            padding: 1em 2em;
            border: none;
            color: white;
            font-size: 1.2em;
            cursor: pointer;
            outline: none;
            overflow: hidden;
            border-radius: 100px;
        }
.button span {
            position: relative;
        }

.button::before {
            --size: 0;
            content: '';
            position: absolute;
            left: var(--x);
            top: var(--y);
            width: var(--size);
            height: var(--size);
            background: radial-gradient(circle closest-side, #4405f7, transparent);
            transform: translate(-50%, -50%);
            transition: width .7s ease, height .7s ease;
        }

.button:hover::before {
            --size: 400px;
        }

document.querySelector('.button').onmousemove = (e) => {
            const x = e.pageX - e.target.offsetLeft
            const y = e.pageY - e.target.offsetTop
            e.target.style.setProperty('--x', `${ x }px`)
            e.target.style.setProperty('--y', `${ y }px`)
        }

仕事が終わる