前端日常实战：16#视频演示如何用纯CSS制作渐变动画边框
时间：2023-04-05 18:44:50
HTML5
效果预览。点击右边的“点击预览”按钮可以在当前页面进行预览，点击链接可以全屏预览。https://codepen.io/comehop??e/pen/odpRKX互动视频教程本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/c/cmQV7Hd请从github下载源码。https://github.com/comehop??e/front-end-daily-challenges/tree/master/016-colorful-gradient-animated-border代码解释定义了dom，一个包含一些文本的容器：你是我的
FAVORITE
显示在中心：html,body,.box{height:100%;显示：弹性；对齐项目：居中；justify-content:center;}设置页面背景颜色：body{background:#222;}设置容器和文本样式：.box{color:white;字体大小：2.5em；宽度：10em；高度：5em；背景：#111；字体系列：无衬线；行高：1.5em；文本对齐：居中；border-radius:0.2em;}添加带有伪元素的后面板：.box{position:relative;}.box::after{content:'';位置：绝对；宽度：102%；高度：104%；背景颜色：橙色；z-指数：-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{背景大小：300%，300%；animation:animate_bg5seaseinfinitealternate;}@keyframesanimate_bg{0%{background-position:0%,50%;}50%{背景位置:100%,50%;}100%{背景位置:0%,50%;}}最后给文字添加颜色变化效果：.box{animation:animate_text2slinearinfinitealternate;}@keyframesanimate_text{from{color:lime;}到{颜色：黄色；}}你完成了！知识点z-indexhttps://developer.mozilla.org/en-US/docs/Web/CSS/z-indexbackground-imagehttps://developer.mozilla.org/en-US/docs/Web/CSS/背景图像背景大小https://developer.mozilla.org/en-US/docs/Web/CSS/background-sizebackground-positionhttps://developer.mozilla.org/en-US/docs/Web/CSS/背景位置
