如何用纯 CSS 创作一个渐变色动画边框
效果预览
在线演示
按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
https://codepen.io/comehope/pen/odpRKX
可交互视频教程
此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
请用 chrome, safari, edge 打开观看。
https://scrimba.com/c/cmQV7Hd
源代码下载
本地下载
请从 github 下载。
https://github.com/comehope/front-end-daily-challenges/tree/master/016-colorful-gradient-animated-border
代码解读
定义 dom,一个容器中包含一些文字:
<div class="box">you are my<br>FAVORITE
</div>
居中显示:
html,
body,
.box {height: 100%;display: flex;align-items: center;justify-content: center;
}
设置页面背景色:
body {background: #222;
}
设置容器和文字样式:
.box {color: white;font-size: 2.5em;width: 10em;height: 5em;background: #111;font-family: sans-serif;line-height: 1.5em;text-align: center;border-radius: 0.2em;
}
用伪元素增加一个背板:
.box {position: relative;
}.box::after {content: '';position: absolute;width: 102%;height: 104%;background-color: orange;z-index: -1;border-radius: 0.2em;
}
把背板设置为渐变色的:
.box::after {/*background-color: orange;*/background-image: linear-gradient(60deg, aquamarine, cornflowerblue, goldenrod, hotpink, salmon, lightgreen, sandybrown, violet);
}
为背板设置动画效果:
.box::after {background-size: 300%, 300%;animation: animate_bg 5s ease infinite alternate;
}@keyframes animate_bg {0% {background-position: 0%, 50%;}50% {background-position: 100%, 50%;}100% {background-position: 0%, 50%;}
}
最后,再为文字增加变色效果:
.box {animation: animate_text 2s linear infinite alternate;
}@keyframes animate_text {from {color: lime;}to {color: yellow;}
}
大功告成!
知识点
- z-index https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
- background-image https://developer.mozilla.org/en-US/docs/Web/CSS/background-image
- background-size https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
- background-position https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
原文地址:https://segmentfault.com/a/1190000014785816
如何用纯 CSS 创作一个渐变色动画边框相关推荐
- 如何用纯 CSS 创作一个小球上台阶的动画
如何用纯 CSS 创作一个小球上台阶的动画 效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/come ...
- 前端每日实战:45# 视频演示如何用纯 CSS 创作一个菱形 loader 动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/eKzjqK 可交互视频教程 此视频 ...
- 如何用纯 CSS 创作一个文本淡入淡出的 loader 动画
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ERwpeG 可交互视频 ...
- 前端每日实战:160# 视频演示如何用纯 CSS 创作一个打开内容弹窗的交互动画...
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/GYXvez 可交互视频 此视频是可 ...
- 前端每日实战:119# 视频演示如何用纯 CSS 创作一个接扎啤的动画(内含2个视频)...
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/rZeOQp 可交互视频 此视频是可 ...
- 如何用纯 CSS 创作一个方块旋转动画
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/gjgyWm 可交互视频 ...
- html鼠标拖尾效果,前端每日实战:25# 视频演示如何用纯 CSS 创作一个慧星拖尾效果的 loader 动画...
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. 可交互视频教程 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码. 请用 chrome, s ...
- 如何用纯 CSS 创作一个失落的人独自行走的动画
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/MqpOdR/ 可交互视频 ...
- 如何用纯 CSS 创作一个失落的人独自行走的动画 1
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/MqpOdR/ 可交互视频 ...
最新文章
- Lifting Transformer: 基于跨步卷积Transformer的高效三维人体姿态估计
- 写一个迷你版Smarty模板引擎,对认识模板引擎原理非常好(附代码)
- android webview tel:,Android WebView“tel:”和“mailto:”链接显示未找到网页
- 一根Express Route同时支持ARM和ASM的VNET
- Android的一些布局小知识点
- oracle 10.2.0.1 升级 10.2.0.5,Oracle10.2.0.1RAC 升级 Oracle10.2.0.5案例分享 -DATABASE篇
- 解决在Windows10没有修改hosts文件权限
- 2018.12.31 NOIP训练 czy的后宫5(树形dp)
- linux目录硬链接,linux查看硬链接对应的所有文件
- 3-3-ServletContext接口
- math库是python语言的数学模块_Python入门-函数库(模块)
- Apache Mina的用法
- 指向类对象的指针非空但是部分对象成员不存在原因分析
- 通用扫码技术方案(微信扫码、浏览器扫码、app内部扫码)
- 企业微信商户号是什么?如何开通?
- 卧槽!逆天了,Python竟然能打造一款扫描全能王,实现图片纠正!
- 天津大学智能车队大一培训前准备(2022)
- 自用的一些平时记录. 时不时更新
- VC,DirectX8开发实例(画面的清除和描画)
- 每日启程——2019.12.11日(草木有本心,何求美人折)