CSS实现边框动画效果
实现方法
【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;
}
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了