原文地址:https://segmentfault.com/a/1190000014785816

感想:边框是伪元素::after来的;

HTML代码:

<div class="box">
you are my<br>
FAVORIFE
</div>

CSS代码:

html, body,.box {
margin:;
padding:;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
body{
background: #222;
}
.box{
width: 10em;
height: 5em;
border-radius: 0.2em;
line-height: 1.5em;
font-size: 2.5em;
/* 字体系列:无衬线;*/
font-family: sans-serif;
color: white;
background: #111;
position: relative;
animation: animate_text 2s linear infinite alternate;
}
@keyframes animate_text{
from{
color: lime;
}
to{
color: yellow;
}
}
/* 用伪圆增加一个背板 */
.box::after{
content: '';
position: absolute;
width: 102%;
height: 104%;
background-image: linear-gradient(60deg, aquamarine, cornflowerblue, goldenrod, hotpink, salmon, lightgreen, sandybrown, violet);
background-size: 300%;
border-radius: 0.2em;
z-index: -1;
animation: animate_bg 5s infinite;
}
@keyframes animate_bg{
0%{
background-position: 0%, 50%;
}
50%{
background-position: 100%, 50%;
}
100%{
background-position: 0%, 50%;
}
}

16.纯 CSS 创作一个渐变色动画边框的更多相关文章

  1. 前端每日实战:16# 视频演示如何用纯 CSS 创作一个渐变色动画边框

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/odpRKX 可交互视频教程 此视频 ...

  2. 如何用纯 CSS 创作一个渐变色动画边框

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/odpRKX 可交互视频教 ...

  3. 3.纯 CSS 创作一个容器厚条纹边框特效

    原文地址:3.纯 CSS 创作一个容器厚条纹边框特效 没有啥好点子呀,不爽 HTML代码: <div class="box"> <div class=" ...

  4. 2.纯 CSS 创作一个矩形旋转 loader 特效

    原文地址:2.纯 CSS 创作一个矩形旋转 loader 特效 扩展后地址:https://scrimba.com/c/cNJVWUR  扩展地址:https://codepen.io/pen/ HT ...

  5. 1.纯 CSS 创作一个按钮文字滑动特效 + 弹幕(残缺)

    原文地址:1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效 扩展后地址:https://scrimba.com/c/cJkzMfd HTML代码: <html> <head& ...

  6. 前端每日实战:113# 视频演示如何用纯 CSS 创作一个赛车 loader

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/mGdXGJ 可交互视频 此视频是可 ...

  7. 如何用纯 CSS 创作一个容器厚条纹边框特效

    效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/YLqbXy 可交互视频教程 此视 ...

  8. 53.纯 CSS 创作一个文本淡入淡出的 loader 动画

    原文地址:https://segmentfault.com/a/1190000015305861 感想:关于两侧动画不在同一水平线上的原因是因为设置其多余高,旋转180度呈现的. HTML code: ...

  9. 52.纯 CSS 创作一个小球绕着圆环盘旋的动画

    原文地址:https://segmentfault.com/a/1190000015295466 感想:重点在小球绕环转动. HTML code: <div class="contai ...

随机推荐

  1. MySQL 5.7.16 字符串拆分 -> 单列变多行记录(转发)

    http://blog.csdn.net/mchdba/article/details/53889803 ----------------------------------------------- ...

  2. 黄聪:实用WordPress SQL查询方法

    为所有文章和页面添加自定义字段 这段代码可以为WordPress数据库内所有文章和页面添加一个自定义字段. 你需要做的就是把代码中的‘UniversalCutomField‘替换成你需要的文字,然后把 ...

  3. ##Truncated incorrect DOUBLE value: 'E#4' 的问题解决

    给sql语句 加了个引号,问题就这么轻易解决了,猜想,应该是mysql 做where对比的时候,把数字5 与数据库里的数据”OABF” 比较,应该是这时的问题.

  4. what's the difference between grouping and facet in lucene 3.5

    I  found in lucene 3.5 contrib folder two plugins: one is grouping, the other is facet. In my option ...

  5. vagrant 本地添加box 支持带版本号

    众所周知,vagrant添加box的时候要从外网下载,那速度...(说多了都是泪),所以只好用下载工具下载到本地之后再添加. 一般处理方案 vagrant box add boxName ./down ...

  6. 易出错的bug避免

    1:for(var i:int=0;i<p.numChildren;i++)   {       p.removeChildAt(i);   }   或   for(var i:int=0;i& ...

  7. [转]SuperSocket

    public class SocketServer : AppServer<AppSession> { public SocketServer() : base(new DefaultRe ...

  8. go语言学习--指针数组和数组指针

    数组指针(也称行指针)定义 int (*p)[n];()优先级高,首先说明p是一个指针,指向一个整型的一维数组,这个一维数组的长度是n,也可以说是p的步长.也就是说执行p+1时,p要跨过n个整型数据的 ...

  9. ZBench: 服务器一键测试脚本 / 自带结果导出vps网络测试

    zbench主站: https://blog.liyuans.com/archives/Zbench.html 脚本来自友链 主机博客,项目地址为 https://github.com/Functio ...

  10. python:数据类型set

    一.集合 集合是无序的,不重复的数据集合,它里面的元素是可哈希的(不可变数据类型),但是集合本身是不可哈希(所以集合做不了字典的键)的.以下是集合最重要的两点: 去重,把一个列表变成集合,就自动去重了 ...