34.纯 CSS 创作在文本前后穿梭的边框
原文地址: https://segmentfault.com/a/1190000015045700
感想: 动画 + z-index:n ;
HTML code:
<div class="warning">ERROR 404</div>
CSS code:
html, body {
margin:;
padding:;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(20%, 20%, 20%);
}
.warning{
position: relative;
padding: 0.6em 0.4em;
/* border: 1px solid red; */
/* 定义文字样式 */
color: whitesmoke;
font-size: 50px;
font-family: sans-serif;
font-weight: bold;
z-index:;
}
/* 用伪元素定义边框尺寸 */
.warning::before,
.warning::after{
position: absolute;
top:;
left:;
content: '';
width: 100%;
height: 100%;
border: 0.2em solid transparent;
box-sizing: border-box;
color: orangered;
animation: rotating 10s infinite;
}
@keyframes rotating{
to{
transform: rotate(360deg);
}
}
.warning::before{
border-top-color: currentColor;
border-right-color: currentColor;
/* 使其显示级数降级一点 */
z-index: -1;
}
.warning::after{
border-bottom-color: currentColor;
border-left-color: currentColor;
/* 加阴影 */
box-shadow: 0.3em 0.3em 0.3em rgba(20%, 20%, 20%, 0.8);
}
34.纯 CSS 创作在文本前后穿梭的边框的更多相关文章
- 前端每日实战:34# 视频演示如何用纯 CSS 创作在文本前后穿梭的边框
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/qYepNv 可交互视频教程 此视频 ...
- 如何用纯 CSS 创作在文本前后穿梭的边框
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/qYepNv 可交互视频教 ...
- 53.纯 CSS 创作一个文本淡入淡出的 loader 动画
原文地址:https://segmentfault.com/a/1190000015305861 感想:关于两侧动画不在同一水平线上的原因是因为设置其多余高,旋转180度呈现的. HTML code: ...
- 如何用纯 CSS 创作一个文本淡入淡出的 loader 动画
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ERwpeG 可交互视频 ...
- 前端每日实战:53# 视频演示如何用纯 CSS 创作一个文本淡入淡出的 loader 动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ERwpeG 可交互视频 此视频是可 ...
- 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& ...
- css实现input文本框的双边框美化
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
随机推荐
- delphi 关于 "高位" 与 "低位"
Longint = Integer WPARAM = Integer LPARAM = Integer LRESULT = Integer FARPROC = Pointer function Mak ...
- Set ARITHABORT Option设置为ON
MSDN注释中提到,应该总是将Set ARITHABORT Option设置为ON,原因有四: 1,如果SSMS和application client的设置不同,那么会导致application cl ...
- 黄聪:多个wordpress网站(不同域名)共享用户数据的方法
WordPress可以自定义用户数据表,这样多个wordpress网站就可以共享用户数据了,有时候这是非常方便的,这些Wordpress站点应该安装在同一个数据库下,数据表前缀各不相同.由于Wordp ...
- python中pip和pygame的安装
1.安装pip和pygame都很简单.首先咱们来安装pip,官网https://pypi.python.org/pypi/pip#download,下载pip的压缩文件,并将其解压. 我们在cmd的p ...
- spring 基本配置学习
1.bean的方式说明 作用: 用于配置对象让spring来创建的. 默认情况下它调用的是类中的无参构造函数.如果没有无参构造函数则不能创建成功. 属性: id:给对象在容器中提供一个唯一标识. ...
- [蓝桥杯]ALGO-122.算法训练_未名湖边的烦恼
问题描述 每年冬天,北大未名湖上都是滑冰的好地方.北大体育组准备了许多冰鞋,可是人太多了,每天下午收工后,常常一双冰鞋都不剩. 每天早上,租鞋窗口都会排起长龙,假设有还鞋的m个,有需要租鞋的n个.现在 ...
- ALGO-151_蓝桥杯_算法训练_6-2递归求二进制表示位数
记: 进制转换 AC代码: #include <stdio.h> #define K 2 int main(void) { ; scanf("%d",&n); ...
- 服务容错保护断路器Hystrix之五:配置
接着<服务容错保护断路器Hystrix之二:Hystrix工作流程解析>中的<2.8.关于配置>再列举重要的配置如下 一.hystrix在生产中的建议 1.保持timeout的 ...
- Ajax中最有名axios插件(只应用于Ajax)(post方法,官网写错了,应是字符串格式)
/* axios v0.18.0 | (c) 2018 by Matt Zabriskie */!function(e,t){"object"==typeof exports&am ...
- Oracle ORA 6510
解决方法待补充 咨询得到的解析是: plsql写的存储过程在导出后需要重新编译才能执行:需要处理好这方面的关系