ガラス型アニメーション
この記事では、Glassmorphismでロードスピナーを構築するつもりです.
我々は、このアニメーションを作成する簡単な
HTML
結論
したがって、その後、プロジェクトのどこにでも使用できます.そして、あなたはそれについてどう思いますか.閉じるこの動画はお気に入りから削除されています.
読む
我々は、このアニメーションを作成する簡単な
div
必要があります.この動画のために、擬似クラスと通常のキーフレームを使用しています.HTML
<div class="loader"></div>
CSS/* Main Loader */
.loader {
position: relative;
width: 180px;
height: 180px;
}
.loader::before,
.loader::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
}
/* Loader Blue Circle */
.loader::before {
background: #5989ff;
animation: animate 2s ease-in-out infinite;
}
/* Loader Glassmorphism */
.loader::after {
background: rgba(56, 109, 241, 0.05);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
animation: animate 2s ease-in-out infinite;
z-index: 1;
animation-delay: -1s;
}
/* Animation */
@keyframes animate {
0%,
100% {
transform: translateX(-80px);
}
50% {
transform: translateX(80px);
}
}
コディーン結論
したがって、その後、プロジェクトのどこにでも使用できます.そして、あなたはそれについてどう思いますか.閉じるこの動画はお気に入りから削除されています.
You can now extend your support by buying me a Coffee.😊👇
読む
Reference
この問題について(ガラス型アニメーション), 我々は、より多くの情報をここで見つけました https://dev.to/j471n/glassmorphism-loading-animation-4n2mテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol