HTMLとCSSの学習---（13）
入門
！[Alt]キー
（https://yt3.ggpht.com/a/AGF-l7_JOPbXWp3QXZDuk7CCOzxdwpRg8MFJliMx5A=s900-ck-c0xffffffff-no-rj-mo0）
オンラインチュートリアルと呼ばyoutubeにオープンチャネルからこの学習リソース、（HTTPS ：システムの中から//www.youtube.com/channel/UCbwXnUipZsLfUckBPsC7Jog/featured）は、このプラットフォームようにも私に、彼は私が彼自身のCSSスタイルのいくつかは惹か送信された最初の時間のためのチャネルの意思がないプッシュが、あなたと共有する学習リソースのいくつかの有用な。
輝くグラデーションボタン
コード
htmlファイル
<body>
<a href="#">Button</a>
</body>
CSSファイル
body {
margin: 0;
padding: 0;
background: #000;
}
a {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 60px;
text-align: center;
line-height: 60px;
color: #fff;
font-size: 24px;
text-transform: uppercase;
text-decoration: none;
font-family: sans-serif;
box-sizing: border-box;
background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
background-size: 400%;
border-radius: 30px;
}
このコードは、中央位置に表示されるテキストボックスの長さと幅を設定されている行うこと主に、より特別には、背景画像のサイズ設定用の背景、背景色変換モードが設定され、背景サイズに設定されています。
第二の工程である：ホバーセット
a:hover {
animation: animate 8s linear infinite;
}
@keyframes animate {
0% {
background-position: 0%;
}
100% {
background-position: 400%;
}
}
主な目的は、現在の背景ホバーの時間を移動することです
最後に、発光材料が提供される、同じ原理はさらに一般的な形状を設けられ、それが呼び出され、以下に配置されます。以前
a:before {
content: '';
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
z-index: -1;
background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
background-size: 400%;
border-radius: 40px;
opacity: 0;
transition: 0.5s;
}
a:hover::before {
filter: blur(20px);
opacity: 1;
animation: animate 8s linear infinite;
}
この要素は、同じ長さ及び幅を有するエミッタ周囲を設定する必要があるため、ことに留意すべきで、我々はトップを使用して、左下が、右負に設定される前に、基準のこの点はボックス自体のセットは、それゆえ、最後の周辺5pxのであり、最後のステップは、とき、将来の要素のホバー要素変更前にそれを設定することですので、我々は以前のように透明と不透明とアニメーションの設定から彼女になるが、このこと私たちは、フィルタは、光の効果を示し始めている使用しています。
シェアは、私はあなたが好き願って、問題を終了:)
