如何利用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弹性布局)
标签: animation, clip-path, css3, 三角形, 动态效果
上面是“利用css3做一个动态炫彩三角边框(结合clip-path+animation)”的全面内容,想了解更多关于 前端知识 内容,请继续关注web建站教程。
当前网址:https://ipkd.cn/webs_2674.html
workflows工作流
树上挂着一只快乐的小樱桃
一个女孩骑着一辆生锈的现代摩托车
图生图局部重绘ComfyUI工作流
一棵白色心形流苏树comfyui工作流
ai图片扩大comfyui工作流
一只可爱的飞鸟ComfyUI工作流
一个外国人在吹奏萨克斯ComfyUI工作流
一幅以霓虹灯照亮的城市天际线和未来主义画
猜你喜欢
声明:本站提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请发送到邮箱:admin@ipkd.cn,我们会在看到邮件的第一时间内为您处理!