純粋な CSS を使用してマテリアル デザインでボタンの水滴アニメーション効果を実現する方法

この記事の内容は、マテリアル デザインでボタンの水滴アニメーション効果を実現するための純粋な CSS の使用方法についてです。必要な方は参考にしていただければ幸いです。 。

このような特殊効果はよく見かけますよね、とてもかっこいいですよね

これが最も一般的ですGoogle マテリアル デザインの特殊効果では、この特殊効果をシミュレートする既製の JS ライブラリが市場に多数存在します。しかし、実際には、既存のプロジェクトでは、ユーザー エクスペリエンスを向上させるためにこのようなボタンを追加する必要がある場合があります。同時に、これらの JS ライブラリは少し大きすぎるように思えます。これらは js で実装されているため、読み込みの問題にも注意が必要です。

それでは、CSS を使用してこの特殊効果を実現する方法はありますか?

アイデア

実際、これはアニメーションであり、完全な円が小さいものから大きいものへと成長します。 css3# を使用 ## のアニメーションは簡単に実装できます

サンプル コード

@keyframes ripple{
    from {
        transform: scale(0);
        opacity: 1;
    }
    to {
        transform: scale(1);
        opacity: 0;
    }
}

通常は

js を使用して実装します非常に簡単な方法で、A class を追加し、class

サンプル コード

var btn = document.getElementById('btn');
btn.addeventlistener('click',function(){
  addClass(btn,'animate')
},false)
btn.addeventlistener('transitionend',function(){//监听css3动画结束
  removeClass(btn,'animate')
},false)

## を削除します。 #それでは、CSS を介してそれを行うにはどうすればよいですか? アニメーションをトリガーするにはどうすればよいですか?

CSS の実装

css でマウスと対話する疑似クラスには、主に

hover# が含まれます。 ##マウス後

• :active

  マウスプレス

• :focus

  マウス フォーカス

• :checked

  マウスが選択されました

• 多くの場合、ページ上の効果は hover

  によって実現されます。これを実現するには、マウスを上に置くとエフェクトがトリガーされ、アニメーションが終了します。ただし、マウスを上に置いてすぐに離れると、アニメーションはすぐに終了します。

まずは試してみましょう。

構造

これは私たちが書いたページの構造とスタイルです

<style>
.btn{ 
  display: block; 
  width: 300px; 
  outline: 0; 
  overflow: hidden;  
  position: relative; 
  transition: .3s; 
  cursor: pointer; 
  user-select: none; 
  height: 100px; 
  text-align: center; 
  line-height: 100px; 
  font-size: 50px; 
  background: tomato; 
  color: #fff;  
  border-radius: 10px;
}
</style>
<a>button</a>

非常にシンプルで、普通のボタンのスタイルです

次に、ボタンに必要な正円を追加します。 これを実現するために疑似要素を使用します

.btn:after{
    content: '';
    position: absolute;
    width: 100%;
    padding-top: 100%;
    background: transparent;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%)
}

オーバーフローを削除します: 上に隠れており、円を少し縮小して効果を確認します

次に、ズーム アニメーションを作成します

@keyframes ripple{
    from {
        transform:translate(-50%,-50%) scale(0);
        /**由于我们默认写了变换属性，所以这里要补上translate(-50%,-50%)，不然就会被替换了**/
        background: rgba(0,0,0,.25);
    }
    to {
        transform:translate(-50%,-50%) scale(1);
        background: transparent;
    }
}

ホバーの小さなインタラクティブ エクスペリエンス

マウスを渡してみますか?

.btn:hover:after{
  animation: ripple 1s;
}

効果はまだ良好ですが、マウスがあまりにも早く離れると、新しく拡張された円がすぐに縮小してしまい、少し一貫性がありません。 しかし、これは私たちが望んでいる効果ではありません。私たちが望んでいるのは、単に装着するだけで再度トリガーされなくなるのではなく、1 回クリックして 1 回トリガーすることです。

active try

日常業務では、

active

も、通常はクリック効果のために使用されることが多いので、試してみましょう。

.btn:active:after{
  animation: ripple 1s;
}

この効果も満足のいくものではなく、マウス ホールド に少し似ています。完了するにはマウスを押し続ける必要があります。たとえば、上記の例では、アニメーションの実行中の実装は 1s

です。その後、完全なアニメーション効果を確認するには、そのボタンをクリックして

1s を続行する必要があります。そうでない場合は、上記のようなものです マウスが離れるとすぐに、アニメーションはすぐに撤回されます フォーカスエクスペリエンス 任意の要素にフォーカスする必要がある場合は、tabindex

属性を指定できます

<a>button</a>

.btn:focus:after{
  animation: ripple 1s;
}

foucs もトリガーできますが、トリガーされた後は、フォーカスを失った後にのみ再度トリガーできます。実際の操作パフォーマンスは、一度クリックした後、外側の空間をクリックする他に方法はありませんか?

もちろんまだいくつかありますが、最後のものが間違いなく解決策です。笑checked

checked

は直接トリガーできません。 form 要素 選択後にトリガーされます。これを行うには、ページ構造

<label>
  <input><span>button</span>
</label>

を

lable

に変更し、input[type=checkbox] を含めます。 tag 。主に、ボタンがクリックされたときに

input

の選択をトリガーします。 ちょっとしたスタイルを追加する<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">.btn&gt;span:after{   /**换一下选择器**/ } .btn&gt;input[type=checkbox]{   display: none } .btn&gt;input[type=checkbox]:checked+span:after{   animation: ripple 1s; }</pre><div class="contentsignin">ログイン後にコピー</div></div> <p>这样也能触发动画，但问题是，当再次点击的时候就成了非选中状态了，怎么触发动画呢？</p> <p>其实可以用<code>:not来实现

.btn>input[type=checkbox]:not(:checked)+span:after{
  animation: ripple 1s;
}

乍一看好像挺聪明的，仔细一想，正反两个都写了动画，不就跟:checked没关系了？还不如直接

.btn>input[type=checkbox]+span:after{
  animation: ripple 1s;
}

无限轮回中...

这个问题困扰了我好久，不过皇天不负有心人，后来试着在两种状态下触发不同的动画是可以分别触发的，如下

.btn>input[type=checkbox]:checked+span:after{
  animation: ripple1 1s;
}
.btn>input[type=checkbox]:not(:checked)+span:after{
  animation: ripple2 1s;
}

这个应该很好理解吧。

那么，重点来了，现在把动画ripple1和ripple2里面的动画过程都改成一样，也是可以分别触发的，也就是说，只要动画名称不一样，css都会当成不同的动画来处理

这样就简单了，我们只需要默认一个状态，选中一个状态，然后分别触发名称不同的动画就行了~

.btn>input[type=checkbox]+span:after{
  animation: ripple-in 1s;
}
.btn>input[type=checkbox]:checked+span:after{
  animation: ripple-out 1s;
}
@keyframes ripple-in{
    from {
        transform:translate(-50%,-50%) scale(0);
        background: rgba(0,0,0,.25);
    }
    to {
        transform:translate(-50%,-50%) scale(1);
        background: transparent;
    }
}
@keyframes ripple-out{/*仅仅名称不同*/
    from {
        transform:translate(-50%,-50%) scale(0);
        background: rgba(0,0,0,.25);
    }
    to {
        transform:translate(-50%,-50%) scale(1);
        background: transparent;
    }
}

效果就如文章一开始所示，完美

完整demo如下

https://codepen.io/xboxyan/pe...

一些不足

由于上述动画样式在默认情况下就会被触发，所以页面加载进来就会看到按钮上的水滴动画运动一次，不过也不是特别明显，还可以接受。

其次，实际效果肯定是希望鼠标点击哪里，就以该点为中心扩散，我们css肯定是做不到这点的，只能从中心扩散，这也只能妥协了。这里提供一个思路，可以使用css的变量，每次点击的时候吧相应的值存在style里面，这样css中也能用上。

希望能用css今后挖掘出更多有趣的效果^

以上が純粋な CSS を使用してマテリアル デザインでボタンの水滴アニメーション効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。