如何建立外卖网站,网站可以做的活动推广,网站建设教程速成,自己开发一个app软件转载请注明出处#xff0c;点击此处 查看更多精彩内容 用 CSS 实现渐变边框及动画#xff0c;下面对关键点进行解释说明#xff0c;查看完整代码及预览效果请 点击这里。
简单说明原理#xff1a;使用伪元素 ::before 绘制一个渐变色#xff0c;然后使用伪元素 ::after 绘… 转载请注明出处点击此处 查看更多精彩内容 用 CSS 实现渐变边框及动画下面对关键点进行解释说明查看完整代码及预览效果请 点击这里。
简单说明原理使用伪元素 ::before 绘制一个渐变色然后使用伪元素 ::after 绘制背景使其遮住渐变色的一部分仅保留边框部分然后添加旋转动画即可。
DOM 结构
div classcontainer/div.container {border-radius: var(--border-radius);overflow: hidden;
}overflow: hidden 防止内部元素溢出。
渐变背景
使用 ::before 伪元素实现一个径向渐变背景。
.container::before {content: ;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);display: block;width: 150%;padding-bottom: 150%;background: conic-gradient(from 180deg at 50% 50%,#e92a67 0deg,#a853ba 112.5deg,#2a8af6 228.75deg,rgba(42,138,246,0) 360deg);z-index: -1;
}这里没有直接设置伪元素高度而是使用 width: 200%; padding-bottom: 200%; 绘制一个正方形并且尺寸大于父元素防止动画时背景不能完全覆盖父元素。
渐变边框
使用 ::after 伪元素作为遮罩及背景遮住 ::before 伪元素使其仅展示出边框区域。
.container::after {content: ;position: absolute;inset: var(--border-size);background: var(--bg-color);border-radius: var(--border-radius);z-index: -1;
}添加动画
给 :before 添加旋转动画。
keyframes rotate {from {transform: translate(-50%, -50%) rotate(0deg);}to {transform: translate(-50%, -50%) rotate(-360deg);}
}.container::before {...,animation: rotate 3s linear infinite;
}边框追逐效果
通过设置分区的渐变背景即可完成边框上多线条相互追逐的炫酷效果。
.container {--border-color: conic-gradient(from 180deg at 50% 50%,#e92a67 0deg, transparent 90deg, transparent 180deg, #2a8af6 180deg, transparent 270deg);
}
