原文地址: 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 创作在文本前后穿梭的边框的更多相关文章

  1. 前端每日实战:34# 视频演示如何用纯 CSS 创作在文本前后穿梭的边框

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

  2. 如何用纯 CSS 创作在文本前后穿梭的边框

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

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

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

  4. 如何用纯 CSS 创作一个文本淡入淡出的 loader 动画

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

  5. 前端每日实战:53# 视频演示如何用纯 CSS 创作一个文本淡入淡出的 loader 动画

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

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

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

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

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

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

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

  9. css实现input文本框的双边框美化

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

随机推荐

  1. ubuntu--Supervisor进程管理工具

    安装,这个程序使用python写的 sudo apt-get install supervisor 配置一个你需要的配置文件 //进入 /etc/supervisor/conf.d文件目录,配置一个r ...

  2. svn hooks post-commit钩子自动部署

    #!/bin/sh #修改为服务编码 export LANG=zh_CN.utf- #Set variable REPOS="$1" REV="$2" SVN= ...

  3. HTML5本地存储之Web Storage实例篇,最有用的是localStorage

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. Redis集群事物提交异常Multi-key operations must involve a single slot

    redis做完集群后不同键在同一事物中提交,因为key的hash计算结果不同不能分配到同一个分片上,因此出现此异常. 解决方案:在本次事物的key内添加"{tag}",这时redi ...

  5. P1258小车问题

    传送 很多人质疑它是二分,但其实它就是二分(我会说我不会解方程吗) 据说有很多人没看懂题干在说些什么,那就不要管题干了.拿样例算一遍,我们看看样例的答案是怎么算出来的. 这是样例.看到这个数,我们很懵 ...

  6. 峰Redis学习(6)Redis 数据结构(sorted-set的操作)

    第六节:Redis 数据结构之sorted-set 类型 存储Sorted-Set Sorted-Set和Set的区别   Sorted-Set中的成员在集合中的位置是有序的   存储Sorted-s ...

  7. IDC:IDC 清单

    ylbtech-IDC:IDC 清单 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部     6.返回顶部   作者:ylbtech出处:http://ylbte ...

  8. 跨域CORS原理及调用具体示例

    原文: https://www.cnblogs.com/keyi/p/6726089.html 上篇博客介绍了JSONP原理,其不足,就是只能使用GET提交,若传输的数据量大,这个JSONP方式就歇菜 ...

  9. PHPer常见的面试题总结

    1.平时喜欢哪些php书籍及博客?CSDN.虎嗅.猎云 2.js闭包是什么? 3.for与foreach哪个更快? 4.php鸟哥是谁?能不能讲一下php执行原理? 5.php加速器有哪些?apc.z ...

  10. tf.nn.conv_2d

    tf.nn.conv2d(input, filter, strides, padding, use_cudnn_on_gpu=None, name=None) 结果返回一个Tensor,这个输出,就是 ...