2024年12月04日 建站教程
如何利用css3做一个动态炫彩三角边框，下面web建站小编结合clip-path和animation给大家详细介绍一下实现代码！
html代码
<div class="container"> <div class="triangle"></div> </div>
css代码
body{
background:#000;
padding:100px;
}
@property --angle {
syntax: '';
inherits: false;
initial-value: 0deg;
}
.container {
width: 260px;
height: 260px;
filter: drop-shadow(0 0 5px hsl(162, 100%, 58%)) drop-shadow(0 0 10px hsl(270, 73%, 53%));
}
.triangle {
width: 200px;
height: 200px;
clip-path:
polygon(
50% 0%,
0% 100%,
8% 100%,
50% 15%,
88% 93%,
7% 93%,
7% 100%,
100% 100%
);
background: conic-gradient(from var(--angle), hsl(162, 100%, 58%), hsl(270, 73%, 53%), hsl(162, 100%, 58%));
animation: rotate 3s infinite linear;
}
@keyframes rotate {
to {
--angle: 360deg;
}
}
本文链接：http://so.lmcjl.com/news/18949/