16.纯 CSS 创作一个渐变色动画边框
原文地址: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 创作一个渐变色动画边框的更多相关文章
- 前端每日实战:16# 视频演示如何用纯 CSS 创作一个渐变色动画边框
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/odpRKX 可交互视频教程 此视频 ...
- 如何用纯 CSS 创作一个渐变色动画边框
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/odpRKX 可交互视频教 ...
- 3.纯 CSS 创作一个容器厚条纹边框特效
原文地址:3.纯 CSS 创作一个容器厚条纹边框特效 没有啥好点子呀,不爽 HTML代码: <div class="box"> <div class=" ...
- 2.纯 CSS 创作一个矩形旋转 loader 特效
原文地址:2.纯 CSS 创作一个矩形旋转 loader 特效 扩展后地址:https://scrimba.com/c/cNJVWUR 扩展地址:https://codepen.io/pen/ HT ...
- 1.纯 CSS 创作一个按钮文字滑动特效 + 弹幕(残缺)
原文地址:1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效 扩展后地址:https://scrimba.com/c/cJkzMfd HTML代码: <html> <head& ...
- 前端每日实战:113# 视频演示如何用纯 CSS 创作一个赛车 loader
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/mGdXGJ 可交互视频 此视频是可 ...
- 如何用纯 CSS 创作一个容器厚条纹边框特效
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/YLqbXy 可交互视频教程 此视 ...
- 53.纯 CSS 创作一个文本淡入淡出的 loader 动画
原文地址:https://segmentfault.com/a/1190000015305861 感想:关于两侧动画不在同一水平线上的原因是因为设置其多余高,旋转180度呈现的. HTML code: ...
- 52.纯 CSS 创作一个小球绕着圆环盘旋的动画
原文地址:https://segmentfault.com/a/1190000015295466 感想:重点在小球绕环转动. HTML code: <div class="contai ...
随机推荐
- MySQL 5.7.16 字符串拆分 -> 单列变多行记录(转发)
http://blog.csdn.net/mchdba/article/details/53889803 ----------------------------------------------- ...
- 黄聪:实用WordPress SQL查询方法
为所有文章和页面添加自定义字段 这段代码可以为WordPress数据库内所有文章和页面添加一个自定义字段. 你需要做的就是把代码中的‘UniversalCutomField‘替换成你需要的文字,然后把 ...
- ##Truncated incorrect DOUBLE value: 'E#4' 的问题解决
给sql语句 加了个引号,问题就这么轻易解决了,猜想,应该是mysql 做where对比的时候,把数字5 与数据库里的数据”OABF” 比较,应该是这时的问题.
- 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 ...
- vagrant 本地添加box 支持带版本号
众所周知,vagrant添加box的时候要从外网下载,那速度...(说多了都是泪),所以只好用下载工具下载到本地之后再添加. 一般处理方案 vagrant box add boxName ./down ...
- 易出错的bug避免
1:for(var i:int=0;i<p.numChildren;i++) { p.removeChildAt(i); } 或 for(var i:int=0;i& ...
- [转]SuperSocket
public class SocketServer : AppServer<AppSession> { public SocketServer() : base(new DefaultRe ...
- go语言学习--指针数组和数组指针
数组指针(也称行指针)定义 int (*p)[n];()优先级高,首先说明p是一个指针,指向一个整型的一维数组,这个一维数组的长度是n,也可以说是p的步长.也就是说执行p+1时,p要跨过n个整型数据的 ...
- ZBench: 服务器一键测试脚本 / 自带结果导出vps网络测试
zbench主站: https://blog.liyuans.com/archives/Zbench.html 脚本来自友链 主机博客,项目地址为 https://github.com/Functio ...
- python:数据类型set
一.集合 集合是无序的,不重复的数据集合,它里面的元素是可哈希的(不可变数据类型),但是集合本身是不可哈希(所以集合做不了字典的键)的.以下是集合最重要的两点: 去重,把一个列表变成集合,就自动去重了 ...