css3 渐变边框动画效果
html + css 渐变边框动画
使用 css3 linear-gradient属性制作漂亮的渐变色的边框样式效果。适用于酷炫的网页文字边框元素。
HTML 代码:
<div class="gradient-border" id="box">Animated <br>CSS<br>Gradient Border</div>
CSS 代码:
@import url('https://fonts.googleapis.com/css?family=Raleway:200'); html, body { height: 100%; } body { display: flex; justify-content: center; align-items: center; height: 100%; background: #1D1F20; } #box { display: flex; align-items: center; justify-content: center; width: 400px; height: 200px; color: white; font-family: 'Raleway'; font-size: 2.5rem; } .gradient-border { --borderWidth: 3px; background: #1D1F20; position: relative; border-radius: var(--borderWidth); } .gradient-border:after { content: ''; position: absolute; top: calc(-1 * var(--borderWidth)); left: calc(-1 * var(--borderWidth)); height: calc(100% + var(--borderWidth) * 2); width: calc(100% + var(--borderWidth) * 2); background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82); border-radius: calc(2 * var(--borderWidth)); z-index: -1; animation: animatedgradient 3s ease alternate infinite; background-size: 300% 300%; } @keyframes animatedgradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » css3 渐变边框动画效果
码云笔记 » css3 渐变边框动画效果