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 ...
随机推荐
- [3] 注解(Annotation)-- 深入理解Java:注解(Annotation)--注解处理器
转载 http://www.cnblogs.com/peida/archive/2013/04/26/3038503.html 深入理解Java:注解(Annotation)--注解处理器 如果没有用 ...
- python基本知识点
1.基本数据类型 1.1int 字符串转换为数字,比如 a = “123” print(type(a) , a) b = int(a) print(type(b),b) num = “b” v = i ...
- ThinkPHP 介绍及安装 -1
一.ThinkPHP的介绍 MVC M - Model 模型 工作:负责数据的操作 V - View 视图(模板) 工作:负责前台页面显示 C - Con ...
- 黄聪:利用ImageMagicK给图片加水印
1 图片水印处理 假设把名为logo.gif的水印图标添加在原始图片(src.jpg)右下角,且水印的下边缘距原始图片10像素.右边缘距原始图片5像素.使用如下命令即可: convert src.jp ...
- SQL优化系列——查询优化器
大多数查询优化器将查询计划用“计划节点”树表示.计划节点封装执行查询所需的单个操作.节点被布置为树,中间结果从树的底部流向顶部.每个节点具有零个或多个子节点 - 这些子节点是输出作为父节点输入的节点. ...
- Java-Runoob-高级教程-实例-方法:02. Java 实例 – 输出数组元素
ylbtech-Java-Runoob-高级教程-实例-方法:02. Java 实例 – 输出数组元素 1.返回顶部 1. Java 实例 - 输出数组元素 Java 实例 以下实例演示了如何通过重 ...
- 以太网安全技术ACL原理+配置
一.以太网访问控制列表 主要作用:在整个网络中分布实施接入安全性 访问控制列表ACL(Access Control List)为网络设备提供了基本的服务安全性.对某个服务而言,安全管理员首先应该考虑的 ...
- JS的正则表达式简介
1.JS的正则表达式 1.1 简介 JS的正则表达式比较简单,总体上只分为两个功能:一个是test——用于匹配字符串是否符合规定的正则表达式规则:另外一个是exec——用于获取匹配到的数据. 1.2 ...
- [UE4]时间轴线TimeLine,Lerp插值
一.TimeLine时间轴线 勾选“User Last Keyframe”表示使用时间轴最后一个关键帧所在时间点作为结束时间,而不是使用设置的5秒作为结束时间点. 二.Lerp插值 Lerp插值一般与 ...
- delphi正则表达式学习笔记(三)
Delphi 中经常使用的正则表达式 在 Delphi 中使用正则表达式, 目前 PerlRegEx 应该是首选, 准备彻底而细致地研究它. 官方网站: http://www.regular-e x ...