css3 は、div を埋める徐々に大きくなる円の効果を実現しますbackground_html/css

css3 は、div を埋める徐々に大きくなる円の効果を実現しますbackground_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:33:06

オリジナル

1315 人が閲覧しました

現在の携帯電話上のアプリケーションの中には、そのようなエフェクトを使用するものがあります。つまり、円が突然現れ、ダイナミクスに満ちた div 全体を満たすまで成長します。

CSS3のscale属性を考えて自分で実装してみました。

<div id="bcd" style="width:500px;height:200px;position:relative;background-color:#aaa;overflow:hidden;border:3px solid #333;">    <div class="anim"></div> </div>

ログイン後にコピー

css スタイルでは、border-radius 属性を使用して円を設定し、背景が透明な大きな白い円を使用して同じ効果を実現します。

.anim{      position: absolute;      border-radius: 50%;      height:1200px;      width:1200px;      background-color: #fff;      border-radius: 50%;      /*background: url(1.png) no-repeat;*/      top:-550px;      left:-480px;      -webkit-transform:scale(0);      -ms-transform:scale(0);      -moz-transform:scale(0);      transform:scale(0);      -webkit-transform-origin: center center 0;      -moz-transform-origin: center center 0;      -ms-transform-origin: center center 0;      transform-origin: center center 0;      -webkit-transition:all 0.6s ease 0s;      -moz-transition:all 0.6s ease 0s;      transition:all 0.6s ease 0s;    }    .active{      -webkit-transform:scale(1);      -moz-transform:scale(1);      -ms-transform:scale(1);      transform:scale(1);      -webkit-transition:all 1s cubic-bezier(.55,.06,.68,.19) 0s;      -moz-transition:all 1s cubic-bezier(.55,.06,.68,.19) 0s;            transition:all 1s cubic-bezier(.55,.06,.68,.19) 0s;      /*transition属性的缓动效果支持标准三次方贝塞尔曲线的哦*/    }    </style>

ログイン後にコピー

transition 属性は、通常、2 つの状態間の遷移にのみ使用されます。より具体的には、transition は、他の状態からその定義が配置されている状態への遷移を定義します。 上記のコードを例に挙げると、アクティブクラスの遷移は他のクラス (.anim) からアクティブクラスへの遷移を定義し、anim クラスの遷移は他のクラス (.active) から anim への遷移を定義します。クラス。

変換と遷移のブラウザ互換性はここに掲載されています:

transform、https://developer.mozilla.org/en-US/docs/Web/CSS/transform から

transition (注: transition には ms プレフィックスがありません)、https://developer.mozilla.org/en-US/docs/Web/CSS/transition

からボックスをクリックすると、徐々に拡大する円が表示されます。 div、js コード全体:

  function $(a){ return document.getElementById(a); } $("bcd").onclick=function(){ if(this.children[0].className=="anim"){ this.children[0].className+=" active"; } else{ this.children[0].className="anim"; } }

ログイン後にコピー

クラスを使用してさまざまな状態を表すのはシンプルで直感的であることを考慮すると、もちろん、スタイルを使用して直接書き直すこともでき、互換性の問題に対処することを忘れないでください。

$("bcd").onclick=function(){ var t = this.children[0].style; //注意浏览器兼容性属性写法的首字母，webkit内核的w可大写也可小写，firefox是Moz和ie是ms,使用jQuery的css方法时的兼容性写法同此    if(t.transform=="scale(1)"||t.WebkitTransform=="scale(1)"||t.MozTransform=="scale(1)"||t.msTransform=="scale(1)"){ t.transform="scale(0)"; t.WebkitTransform="scale(0)"; t.MozTransform="scale(0)"; t.msTransform="scale(0)"; } else{ t.transform="scale(1)"; t.WebkitTransform="scale(1)"; t.MozTransform="scale(1)"; t.msTransform="scale(1)"; }}

ログイン後にコピー

この機会に PS を使ってアニメーションスクリーンショットを gif アニメーションに作成して gif 形式で保存する方法を学びました。

32、64、128 色のほか、模造色と非模造色をご用意しています。ディザリングは通常、色の少ない画像に使用され、非ディザリングは豊かな色に使用されます。カラー値をあまり使用しなかったので、「32 ディザ」を選択して保存しました。後で「gif 制限」を選択した方が容量が少ないことがわかり、「gif 制限」に変更して保存しました。アニメーションはおおよそ次のとおりです。

携帯電話の場合、クリックイベントは引き続き使用できますが、touchstart または touchend に置き換えることができます。

携帯電話の UC ブラウザでのみテストされ、transform 属性とtransition 属性の両方で Webkit プレフィックスを使用する必要があることがわかりました。

もう 1 つの興味深い点は、私もテストしたことです: hover 疑似クラス:

#bcd:hover .anim{  -webkit-transform:scale(1);  -moz-transform:scale(1);  transform:scale(1);}

ログイン後にコピー

PC 側では、マウスをその上に移動することでホバー効果をトリガーできますが、もちろんホバーはありませんモバイル側についてこういうことですが、こういう効果はありますか？

その結果、クリックまたはタッチイベントの監視がない場合、ユーザーが div をクリックするとホバーエフェクトがトリガーされ、他の領域をクリックするとホバー削除エフェクトがトリガーされます。クリックまたはタッチイベントを監視するための処理メソッドです。これによりホバーエフェクトが上書きされます。