ホームページ >ウェブフロントエンド >H5 チュートリアル >css3とH5で波及効果を実装するサンプルコード
CSS3 はダイナミック リップル エフェクトを実装します。CSS3 にはトランジションとアニメーション エフェクトがあるため、translate を使用して直接実装するだけで、従来の Flash よりも簡単に実装できます。また、ページにも比較的優しいです。
この記事では、波紋効果を実現するための CSS3 と、ダイナミックな波の効果を実現するための H5 を主に紹介します。必要な方は参考にしていただければ幸いです。
たとえば、次の背景の波及効果を実装します:
html5 構造:
<p class="wrap__uc-hdinfo"> <p class="inner flexbox"> <p class="uimg"> <span class="img"><img src="images/uimg/uimg-def.jpg" /></span> </p> <a class="info flex1" href="#"> <label class="name">露娜</label> <label class="type mt-10">普通会员</label> <label class="tel ff-ar">18621535487</label> </a> <i class="arr iconfont icon-youjiantou c-fff fs-24"></i> <a class="lktel" href="tel:15888886666"><i class="iconfont icon-dianhua1"></i></a> </p> <!--css3实现波纹--> <p class="wrap__uc-waves"> <i class="wave w1"></i> <i class="wave w2"></i> </p> </p>
css3 コード:
/*css3波纹*/ .wrap__uc-waves{overflow:hidden;height:1rem;width:100%;position:absolute;bottom:0;} .wrap__uc-waves .wave{width:15rem; transform-origin:center bottom; position:absolute;left:0;bottom:0;} .wrap__uc-waves .w1{background:url(../images/icon__uc-hd-waves01.png) no-repeat;background-size:cover; height:.5rem; animation:anim_wave 5s linear infinite;} .wrap__uc-waves .w2{background:url(../images/icon__uc-hd-waves02.png) no-repeat;background-size:cover; height:.7rem; animation:anim_wave 6s linear infinite;} @keyframes anim_wave { 0% { transform: translateX(0) translateZ(0) scaleY(1) } 50% { transform: translateX(-25%) translateZ(0) scaleY(0.55) } 100% { transform: translateX(-50%) translateZ(0) scaleY(1) } }
関連推奨事項:
以上がcss3とH5で波及効果を実装するサンプルコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。