avant-propos
L'animation de flux de bordure est un effet très courant qui peut rendre les pages Web plus vivantes et intéressantes. En utilisant CSS3 , nous pouvons facilement obtenir cet effet d'animation. Cet article présentera comment utiliser CSS3 pour obtenir un effet de flux de bordure, jetons un coup d'œil ensemble.
obtenir un effet
Idées de mise en œuvre
- Nous créons d'abord un conteneur de boîte;
- Définissez le style de police et centrez le contenu ;
before
Créer une boîte dégradée à l'aide d'un pseudo-élément ;after
Créer une autre boîte à l'aide d'un pseudo-élément ;- Définissez ensuite l'animation de rotation pour la zone de dégradé ;
- Enfin, cachez le contenu en dehors de la boîte.
code source complet
<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>
Alternativement, vous pouvez également faire ceci :
code source complet
<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>