[前に書いた] この 2 日間、CSS の特殊効果に夢中で、CSS を使って漫画を作ろうと考えたこともあります。後でできればいいなと思います。今日は主に、ボタンについて話します。多くの場合、ボタンも高度にする必要がありますが、多くの人がそれを見つける方法がなくて苦しんでいます。そこで、この機会を利用して、高度なボタンのダイナミック効果、メインラインのダイナミックボタン、浮遊反射効果。
[関連する知識ポイント]: CSS3 は高度なボタンを実現し、CSS はボタン アニメーションの特殊効果を実現します。CSS は動的ボタンの効果を実現します。CSS はボタンの光と影の効果を実現します。box-reflect は反射効果を実現します。そして、Animation はアニメーション効果を実現します。
[エフェクト表示] 言うことはありませんが、まずはエフェクトを見てみましょう:
皇帝リストの入り口はここをクリックしてください
目次
1. 実施原則
著作権ステートメント: 元々は CSDN Blogger で公開されました- 杖を使って視覚障害者のためのコードを学ぶ、ご不明な点がございましたら、メッセージを残してプライベート メッセージを送信してください。
1.1transform属性で動きを実現する
Transform 設定 Translate 値の設定
Translate(x, y) は、中心を基点として、設定された x, y パラメータ値に従って要素を移動します。設定したアニメーション効果は、
移動属性値の設定と切り離せません。要素内 以前の dom ノード疑似要素には、負の 50% オフセットが設定されています。
transform: translate(-50%, -50%);
追加後のページ効果は次のとおりです。
1.2アニメーション設定アニメーションプロパティ
実際、このステップが最も重要なので、次のように設定しました。
.btn::before {
content: '';
position: absolute;
z-index: -2;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 150%;
height: 300%;
background-color: #000;
background-repeat: no-repeat;
background-size: 50% 50%;
background-position: 0 0;
background-image: conic-gradient(var(--color), var(--color));
animation: rotate 2s linear infinite;
}
@keyframes rotate {
100% {
transform: translate(-50%, -50%) rotate(1turn);
}
}
これは、完全なループを 2 秒間実行し、その後停止しないように設定されています。
効果は次のとおりです。
著作権に関する声明: 元々は CSDN Blogger で公開されました- 杖を使って視覚障害者のためのコードを学びましょう。 ご不明な点がございましたら、メッセージを残してプライベート メッセージを送信してください。
1.3box-reflect 反射効果を設定します
box-reflect: 3 つの値 (方向、オフセット、マスク) が含まれます。
方向:
方向は方向を定義し、値には上、下、左、右が含まれます。
上: 反射がオブジェクトの上にあることを指定します
下: 反射がオブジェクトの下にあることを指定します
左: 反射がオブジェクトの左側にあることを指定します
右:反射が主にオブジェクトの右側に
オフセットされること
を指定します反射と画像の間の距離。負の値にすることもできます。
マスク
画像は投影領域をカバーします。このパラメータ値を省略した場合、デフォルトでマスクされていない画像が設定されるので、
次のように設定しました。
.btn {
position: relative;
z-index: 0;
width: 160px;
height: 80px;
line-height: 80px;
color: var(--color);
font-size: 24px;
border-radius: 10px;
text-align: center;
margin: auto;
overflow: hidden;
cursor: pointer;
transition: .3s;
-webkit-box-reflect: below 10px linear-gradient(transparent, rgba(0, 0, 0, 0.4));
}
ページ全体の反射効果は次のとおりです。
2. 完全なソースコードパッケージ共有
Baidu ネットワーク ディスクのダウンロード アドレス
リンク: https://pan.baidu.com/s/1k53AEACJ1MudpiDKxv4iZQ
抽出コード: hdd6
123 クラウド ディスクのダウンロード アドレス
リンク: https://www.123pan.com/s/ZxkUVv-OzJ4.html
抽出コード: hdd6
イースターエッグリスト
傑作を作ることに専念して、あなたの混乱を解決したいと思います。運が良ければ、リストに載っていただければ幸いです。ありがとうございました!
黄邦の入口はこちら