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 ...
随机推荐
- ubuntu--Supervisor进程管理工具
安装,这个程序使用python写的 sudo apt-get install supervisor 配置一个你需要的配置文件 //进入 /etc/supervisor/conf.d文件目录,配置一个r ...
- svn hooks post-commit钩子自动部署
#!/bin/sh #修改为服务编码 export LANG=zh_CN.utf- #Set variable REPOS="$1" REV="$2" SVN= ...
- HTML5本地存储之Web Storage实例篇,最有用的是localStorage
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- Redis集群事物提交异常Multi-key operations must involve a single slot
redis做完集群后不同键在同一事物中提交,因为key的hash计算结果不同不能分配到同一个分片上,因此出现此异常. 解决方案:在本次事物的key内添加"{tag}",这时redi ...
- P1258小车问题
传送 很多人质疑它是二分,但其实它就是二分(我会说我不会解方程吗) 据说有很多人没看懂题干在说些什么,那就不要管题干了.拿样例算一遍,我们看看样例的答案是怎么算出来的. 这是样例.看到这个数,我们很懵 ...
- 峰Redis学习(6)Redis 数据结构(sorted-set的操作)
第六节:Redis 数据结构之sorted-set 类型 存储Sorted-Set Sorted-Set和Set的区别 Sorted-Set中的成员在集合中的位置是有序的 存储Sorted-s ...
- IDC:IDC 清单
ylbtech-IDC:IDC 清单 1.返回顶部 2.返回顶部 3.返回顶部 4.返回顶部 5.返回顶部 6.返回顶部 作者:ylbtech出处:http://ylbte ...
- 跨域CORS原理及调用具体示例
原文: https://www.cnblogs.com/keyi/p/6726089.html 上篇博客介绍了JSONP原理,其不足,就是只能使用GET提交,若传输的数据量大,这个JSONP方式就歇菜 ...
- PHPer常见的面试题总结
1.平时喜欢哪些php书籍及博客?CSDN.虎嗅.猎云 2.js闭包是什么? 3.for与foreach哪个更快? 4.php鸟哥是谁?能不能讲一下php执行原理? 5.php加速器有哪些?apc.z ...
- tf.nn.conv_2d
tf.nn.conv2d(input, filter, strides, padding, use_cudnn_on_gpu=None, name=None) 结果返回一个Tensor,这个输出,就是 ...