序文
ボーダー フロー アニメーションは、Web ページをより生き生きとして面白く見せる非常に一般的な効果です。CSS3を使用すると、このアニメーション効果を簡単に実現できます。この記事では、 CSS3を使用してボーダーフロー効果を実現する方法を紹介しますので、一緒に見てみましょう。
効果を達成する
実装のアイデア
- まずボックスコンテナを作成します。
- フォント スタイルを設定し、コンテンツを中央に配置します。
- 疑似要素を使用してグラデーション ボックス
before
を作成します。 - 疑似要素
after
を使用して別のボックスを作成します。 - 次に、グラデーション ボックスの回転アニメーションを設定します。
- 最後に、ボックスの外側のコンテンツを非表示にします。
完全なソースコード
<template>
<div>
<div class="boxes">
<p>css</p>
</div>
</div>
</template>
<style scoped>
.boxes {
position: relative;
width: 200px;
height: 200px;
background: rgba(0, 0, 0, 0.8);
border-radius: 16px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.boxes p {
color: #fff;
font-size: 24px;
z-index: 1;
}
.boxes::before {
content: "";
position: absolute;
width: 100px;
height: 140%;
background: linear-gradient(rgb(24, 98, 235), rgb(229, 66, 6));
}
.boxes::after {
content: "";
position: absolute;
background: #0e1532;
inset: 4px; /* inset 是 top、bottom、left、right 都为5px的简写*/
border-radius: 16px;
}
.boxes::before {
animation: rotate 4s linear infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
あるいは、次のようにすることもできます。
完全なソースコード
<template>
<div class="card">
<div class="bg"></div>
<div class="blob"></div>
</div>
</template>
<style scoped>
.card {
position: relative;
width: 200px;
height: 250px;
border-radius: 14px;
z-index: 1111;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;
}
.bg {
position: absolute;
top: 5px;
left: 5px;
width: 190px;
height: 240px;
z-index: 2;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(24px);
border-radius: 10px;
overflow: hidden;
outline: 2px solid white;
}
.blob {
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
width: 150px;
height: 150px;
border-radius: 50%;
background-color: #ff0000;
opacity: 1;
filter: blur(12px);
animation: blob-bounce 5s infinite ease;
}
@keyframes blob-bounce {
0% {
transform: translate(-100%, -100%) translate3d(0, 0, 0);
}
25% {
transform: translate(-100%, -100%) translate3d(100%, 0, 0);
}
50% {
transform: translate(-100%, -100%) translate3d(100%, 100%, 0);
}
75% {
transform: translate(-100%, -100%) translate3d(0, 100%, 0);
}
100% {
transform: translate(-100%, -100%) translate3d(0, 0, 0);
}
}
</style>