如何利用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; } }
css3如何利用Flex实现响应式表格布局(Flex弹性布局)
上面是“利用css3做一个动态炫彩三角边框(结合clip-path+animation)”的全面内容,想了解更多关于 前端知识 内容,请继续关注web建站教程。
当前网址:https://ipkd.cn/webs_2674.html
workflows工作流
一朵染血的白玫瑰ComfyUI工作流
一群蜜蜂和一个六边形蜂巢ComfyUI工作流
一个精致透明的朱红色水晶凤凰
一个男人正走进科幻的大门ComfyUI工作流
一个穿绿衣服国风古典女孩
强大的长袍法师ComfyUI工作流
一个迷人的女人ComfyUI工作流
一幅3D农场游戏画面ComfyUI工作流
猜你喜欢
声明:本站提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请发送到邮箱:admin@ipkd.cn,我们会在看到邮件的第一时间内为您处理!