今天的這個卡片邊框動畫效果，主要應用在一些重要資訊上，想引起使用者注意的時候，我們才會增加這樣的效果，一般情況不會添加這樣的動效，但是，我們還是需要學會怎麼實作它，現在我們就一起來看看這個項目的最終效果：
HTML代碼：
<!DOCTYPE html>
<html>
<head>
<title>【每日一練】34—CSS實作邊框動畫效果</title>
</head>
<body>
<div class="box">
<h2>01</h2>
</div>
<div class="box">
<h2>02</h2>
</div>
<div class="box">
<h2>03</h2>
</div>
<div class="box">
<h2>04</h2>
</div>
</body>
</html> CSS代碼：
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body
{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #0e1538;
}
.box
{
position: relative;
width: 300px;
height: 400px;
display: flex;
justify-content: center;
align-items: center;
background: rgba(0,0,0,0.5);
overflow: hidden;
border-radius: 20px;
margin-left:40px;
}
.box:before
{
content: '';
position: absolute;
width: 150px;
height: 125%;
background: linear-gradient(315deg,#00ccff,#d400d4);
animation: animate 4s linear infinite
}
@keyframes animate
{
0%
{
transform: rotate(0deg);
}
100%
{
transform: rotate(360deg);
}
}
.box:after
{
content: '';
position: absolute;
inset : 6px;
background: #0e1538;
border-radius: 15px;
z-index: 2;
}
h2
{
position: relative;
z-index: 2;
font-size: 10em;
color: #fff;
z-index: 4;
} 寫在最後
以上就是【每日一練】的全部内容，希望今天的小練習對你有用，如果你覺得有幫助的話，請點贊我，關注我，并将它分享給你身邊做開發的朋友，也許能夠幫助到他。
我是楊小愛，我們明天見。
PS：昨天我們的視訊号上了一個網頁靜态頁面的實作案例，具體實作過程請看下面的視訊。