原文地址: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. [3] 注解(Annotation)-- 深入理解Java:注解(Annotation)--注解处理器

    转载 http://www.cnblogs.com/peida/archive/2013/04/26/3038503.html 深入理解Java:注解(Annotation)--注解处理器 如果没有用 ...

  2. python基本知识点

    1.基本数据类型 1.1int 字符串转换为数字,比如 a = “123” print(type(a) , a) b = int(a) print(type(b),b) num = “b” v = i ...

  3. ThinkPHP 介绍及安装 -1

    一.ThinkPHP的介绍 MVC M - Model 模型                工作:负责数据的操作 V - View  视图(模板)        工作:负责前台页面显示 C - Con ...

  4. 黄聪:利用ImageMagicK给图片加水印

    1 图片水印处理 假设把名为logo.gif的水印图标添加在原始图片(src.jpg)右下角,且水印的下边缘距原始图片10像素.右边缘距原始图片5像素.使用如下命令即可: convert src.jp ...

  5. SQL优化系列——查询优化器

    大多数查询优化器将查询计划用“计划节点”树表示.计划节点封装执行查询所需的单个操作.节点被布置为树,中间结果从树的底部流向顶部.每个节点具有零个或多个子节点 - 这些子节点是输出作为父节点输入的节点. ...

  6. Java-Runoob-高级教程-实例-方法:02. Java 实例 – 输出数组元素

    ylbtech-Java-Runoob-高级教程-实例-方法:02. Java 实例 – 输出数组元素 1.返回顶部 1. Java 实例 - 输出数组元素  Java 实例 以下实例演示了如何通过重 ...

  7. 以太网安全技术ACL原理+配置

    一.以太网访问控制列表 主要作用:在整个网络中分布实施接入安全性 访问控制列表ACL(Access Control List)为网络设备提供了基本的服务安全性.对某个服务而言,安全管理员首先应该考虑的 ...

  8. JS的正则表达式简介

    1.JS的正则表达式 1.1 简介 JS的正则表达式比较简单,总体上只分为两个功能:一个是test——用于匹配字符串是否符合规定的正则表达式规则:另外一个是exec——用于获取匹配到的数据. 1.2 ...

  9. [UE4]时间轴线TimeLine,Lerp插值

    一.TimeLine时间轴线 勾选“User Last Keyframe”表示使用时间轴最后一个关键帧所在时间点作为结束时间,而不是使用设置的5秒作为结束时间点. 二.Lerp插值 Lerp插值一般与 ...

  10. delphi正则表达式学习笔记(三)

    Delphi 中经常使用的正则表达式 在 Delphi 中使用正则表达式, 目前 PerlRegEx 应该是首选, 准备彻底而细致地研究它.  官方网站: http://www.regular-e x ...