CSS3 アニメーション: 波紋のような配置 style_html/css

CSS3 アニメーション: 波紋のような配置 style_html/css_WEB-ITnose

WBOY

リリース： 2016-06-21 08:55:39

オリジナル

1779 人が閲覧しました

2016 年 3 月 3 日発行: HTML & CSS . コメント

最近の仕事は、画像を配置するためのロゴを作成することです。この指示サインをより美しく、より美しくするために、シンプルなアニメーションを作成することにしました。それは非常にシンプルです。コメントや交換は大歓迎です。

最初にレンダリングします:

チュートリアル

このアニメーションに必要な主な属性: アニメーション、トランジション、およびキーフレーム属性。属性の詳細については、 w3school 中国語 Web サイトで、「関連アニメーションプロパティの表示」にアクセスできます。

ステップ 1: HTML コード:

<div class="example"><div class="dot"></div></div>

ログイン後にコピー

ステップ 2: CSS スタイル: アニメーション属性を設定

.dot:before{content:' ';position: absolute;z-index:2;left:0;top:0;width:10px;height:10px;background-color: #ff4200;border-radius: 50%;}.dot:after {content:' ';position: absolute;z-index:1;width:10px;height:10px;background-color: #ff4200;border-radius: 50%;box-shadow: 0 0 10px rgba(0,0,0,.3) inset;-webkit-animation-name:'ripple';/*动画属性名，也就是我们前面keyframes定义的动画名*/-webkit-animation-duration: 1s;/*动画持续时间*/-webkit-animation-timing-function: ease; /*动画频率，和transition-timing-function是一样的*/-webkit-animation-delay: 0s;/*动画延迟时间*/-webkit-animation-iteration-count: infinite;/*定义循环资料，infinite为无限次*/-webkit-animation-direction: normal;/*定义动画方式*/}

ログイン後にコピー

小さな波のようにアニメーション方法を設定しますしたがって、波及効果を実現するには、幅と高さを 0 ～ 50px に設定し、透明度を Yes から None に設定する必要があります。

@keyframes ripple {0% {left:5px;top:5px;opcity:75;width:0;height:0;}100% {left:-20px;top:-20px;opacity: 0;width:50px;height:50px;}}

ログイン後にコピー

効果は完成しました。もちろん、このケースは画像の位置決めと識別に適しており、このスタイルとアニメーション効果を改善するためのより良い解決策が存在します。

オンラインデモのアドレス: http://codepen.io/commyleung/pen/qZdWrR

コミュニケーション: もっと才能のあるデザイナーに会いたいですか? (UI Design QQ Group) リストにアクセスして、50,000 人のデザイナーとデザインを交換してください。

デザインナビゲーション: 若い友人とマスターの両方にふさわしいデザイナー Web サイトナビゲーション: http://hao.shejidaren.com