前端每日实战:34# 视频演示如何用纯 CSS 创作在文本前后穿梭的边框
效果预览
按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
https://codepen.io/comehope/pen/qYepNv
可交互视频教程
此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
请用 chrome, safari, edge 打开观看。
https://scrimba.com/p/pEgDAM/cQ73Vt8
源代码下载
每日前端实战系列的全部源代码请从 github 下载:
https://github.com/comehope/front-end-daily-challenges
代码解读
定义 dom,容器中包含文本:
<div class="warning">ERROR 404</div>
居中显示:
body {margin: 0;height: 100vh;display: flex;align-items: center;justify-content: center;background-color: rgb(20%, 20%, 20%);
}
定义文字样式:
.warning {color: whitesmoke;font-size: 100px;font-family: sans-serif;font-weight: bold;
}
用伪元素定义边框尺寸:
.warning {position: relative;padding: 0.6em 0.4em;
}.warning::before,
.warning::after {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;border: 0.2em solid;box-sizing: border-box;
}
把边框分为两部分,拼在一起:
.warning::before,
.warning::after {border: 0.2em solid transparent;color: orangered;
}.warning::before {border-top-color: currentColor;border-right-color: currentColor;
}.warning::after {border-bottom-color: currentColor;border-left-color: currentColor;
}
把上边框和右边框下沉一层:
.warning::before {z-index: -1;
}
为下边框和在边框加上阴影:
.warning::after {box-shadow: 0.3em 0.3em 0.3em rgba(20%, 20%, 20%, 0.8);
}
最后,让边框转起来:
.warning::before,
.warning::after {animation: rotating 10s infinite;
}@keyframes rotating {to {transform: rotate(360deg);}
}
大功告成!
前端每日实战:34# 视频演示如何用纯 CSS 创作在文本前后穿梭的边框相关推荐
- 前端每日实战:45# 视频演示如何用纯 CSS 创作一个菱形 loader 动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/eKzjqK 可交互视频教程 此视频 ...
- 前端每日实战:93# 视频演示如何用纯 CSS 创作一根闪电连接线
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/RBjdzZ 可交互视频 此视频是可 ...
- 前端每日实战:100# 视频演示如何用纯 CSS 创作闪闪发光的霓虹灯文字
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/GBwvxw 可交互视频 此视频是可 ...
- 前端每日实战:60# 视频演示如何用纯 CSS 创作一块乐高积木
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/qKKqrv 可交互视频 此视频是可 ...
- 前端每日实战:140# 视频演示如何用纯 CSS 创作文本的淡入动画效果
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ZMwgqK 可交互视频 此视频是可 ...
- 前端每日实战:151# 视频演示如何用纯 CSS 创作超能陆战队的大白
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ReGRaO 可交互视频 此视频是可 ...
- 前端每日实战:62# 视频演示如何用纯 CSS 创作一只蒸锅
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/YvOzNy 可交互视频 此视频是可 ...
- 前端每日实战:73# 视频演示如何用纯 CSS 创作一只卡通狐狸
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/OEKZed 可交互视频 此视频是可 ...
- 前端每日实战:123# 视频演示如何用纯 CSS 创作一架双冀飞机
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/yxVYRL 可交互视频 此视频是可 ...
最新文章
- 如何在wine下为Source Insight配置字体
- linux下安装oracle sqlplus以及imp、exp工具
- Homebrew OS X 不可或缺的套件管理器
- 压缩 js/css 的工具
- JQuery放大镜效果
- 【HTML/CSS】display相关属性
- .net 集合分成几个等数量集合_[C#.NET 拾遗补漏]08:强大的LINQ
- 【2】最简单的Laravel5.1程序分析
- 招商银行王龙:金融科技银行数据架构设计的13条守则(含PPT)
- [Android Pro] 判断Uri对应的ContentProvider所操作的数据库u存在,及DownloadManager的暂停,继续...
- 新建一个C#控制台应用程序
- raid数据恢复,Raid5磁盘阵列数据恢复案例,服务器数据恢复
- IP Camera 基础知识
- 单样本t检验之汽车引擎排放是否达标
- QT Review之 QSlider(滑块)
- Windows Server 2012R2 启用网络发现失败
- php表格调整行间距,excel如何调整行距
- 卸载oracle方法
- 大数据技术原理与应用 实验6 Spark数据处理系统的搭建
- C盘不够了怎么办!将其他盘空间怎么分给C盘!
热门文章
- BugkuCTF-MISC题宽带信息泄露
- 计算机课件比赛总结,课件制作比赛活动总结
- c语言鼠标环绕特效,C语言写的鼠标有残影,急需解决方案,在线等待!
- java 排序api_用java api进行sort
- 脉冲宽度调制pdm_PWM (脉冲宽度调制)原理与实现
- python开源项目新手_10大Python开源项目推荐(Github平均star2135)
- mysql workbench 1064_MySQL Workbench:查询错误(1064):第1行“ VISIBLE”附近的语?mysql-问答-阿里云开发者社区-阿里云...
- html还原ui,前端高度还原设计稿(字体篇)
- 怎么在linux中查询yum,linux - 如何使用YUM列出包的内容?
- 云计算机具体应用场景,云计算的定义、类型及应用场景