原文地址:https://segmentfault.com/a/1190000015192218

感想: 伪元素作为背景变化。

HTML code:

<nav>
<ul>
<li>
<span>h</span>
<span>o</span>
<span>m</span>
<span>e</span>
</li>
<li>
<span>p</span>
<span>r</span>
<span>o</span>
<span>d</span>
<span>u</span>
<span>c</span>
<span>t</span>
<span>s</span>
</li>
<li>
<span>s</span>
<span>e</span>
<span>v</span>
<span>i</span>
<span>c</span>
<span>e</span>
<span>s</span>
</li>
<li>
<span>c</span>
<span>o</span>
<span>n</span>
<span>t</span>
<span>a</span>
<span>c</span>
<span>t</span>
</li>
</ul>
</nav>

CSS code:

html, body,ul {
margin:;
padding:;
}
ul{
list-style: none;
}
body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(to right bottom, dimgray, black);
}
/* 单词左侧加一条鼠标悬停时变亮的竖线 */
li{
margin: 1em 0;
padding-left: 2em;
border: 2px solid transparent;
border-left-color: silver;
text-align: center;
transition: 50ms;
}
li:hover{
border-left-color: white;
} li:hover span{
color: #333;
transition-delay: calc(80ms * var(--n) + 10ms);
}
li span{
position: relative;
color: white;
font-size: 50px;
font-family: monospace;
text-transform: uppercase;
letter-spacing: 0.1em;
/* 定义过渡所花时间 */
transition: 500ms;
}
li span::before{
position: absolute;
content:'';
height: 100%;
width:;
z-index: -1;
transition: 500ms;
}
li:hover span::before{
width: 70%;
transform: rotate(-25deg);
background: white;
transition-delay: calc(80ms * var(--n));
}
li span:nth-child(1) {
--n:;
}
li span:nth-child(2) {
--n:;
}
li span:nth-child(3) {
--n:;
}
li span:nth-child(4) {
--n:;
}
li span:nth-child(5) {
--n:;
}
li span:nth-child(6) {
--n:;
}
li span:nth-child(7) {
--n:;
}
li span:nth-child(8) {
--n:;
}

44.纯 CSS 创作背景色块变换的按钮特效的更多相关文章

  1. 如何用纯 CSS 创作背景色块变换的按钮特效

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

  2. 72.纯 CSS 创作气泡填色的按钮特效

    原文地址:https://segmentfault.com/a/1190000015560736 感想:过渡效果+xyz中一轴. HTML code: <nav> <ul> & ...

  3. 4. 纯 CSS 创作一个金属光泽 3D 按钮特效

    原文地址:https://segmentfault.com/a/1190000014599280 HTML代码: <div class="box">BUTTON< ...

  4. 如何用纯 CSS 创作一个金属光泽 3D 按钮特效

    效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/full/MGeRRO 可交互视频教程 此 ...

  5. 前端每日实战:4# 视频演示如何用纯 CSS 创作一个金属光泽 3D 按钮特效

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

  6. 如何用纯 CSS 创作气泡填色的按钮特效

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

  7. 前端每日实战:72# 视频演示如何用纯 CSS 创作气泡填色的按钮特效

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

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

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

  9. 33.纯 CSS 创作牛奶文字变换效果

    原文地址:https://segmentfault.com/a/1190000015037234 感想:transform: translateY(50% & -50%);  animatio ...

随机推荐

  1. hadoop HA分布式集群搭建

    概述 hadoop2中NameNode可以有多个(目前只支持2个).每一个都有相同的职能.一个是active状态的,一个是standby状态的.当集群运行时,只有active状态的NameNode是正 ...

  2. HTML和CSS的静态页面

    链接:https://pan.baidu.com/s/1fGajigyQJDLIHqxJn2LXsQ 提取码:7sry 复制这段内容后打开百度网盘手机App,操作更方便哦 设计思路,把网页分成几个模块 ...

  3. Maven Gradle 区别

    Maven面临的挑战 软件行业新旧交替的速度之快往往令人咂舌,不用多少时间,你就会发现曾经大红大紫的技术已经成为了昨日黄花,当然,Maven也不会例外.虽然目前它基本上是Java构建的事实标准,但我们 ...

  4. ALGO-22_蓝桥杯_算法训练_装箱问题(DP)

    问题描述 有一个箱子容量为V(正整数,<=V<=),同时有n个物品(<n<=),每个物品有一个体积(正整数). 要求n个物品中,任取若干个装入箱内,使箱子的剩余空间为最小. 输 ...

  5. android 退出程序解决内存释放so的问题

    做Android程序的时候发现一个问题,由于用到了so库,当应用程序退出了,但是手机变得很卡,点击"设置"查看应用程序,界面显示着可以点击"强制关闭". 由于这 ...

  6. Qt QDateTime QTimer的简单实用

    转载:N3verL4nd qttimer.h #ifndef QTTIMER_H #define QTTIMER_H #include <QDialog> namespace Ui { c ...

  7. Windump教程-参数介绍

    1 应用 Windump是tcpdump的Windows版本,主要的参数如下: -D 列出所有的接口 -i interface 指定用于抓包的接口 -c packetcount 指定抓包的个数 -w ...

  8. bzoj5019: [Snoi2017]遗失的答案

    Description 小皮球在计算出答案之后,买了一堆皮肤,他心里很开心,但是一不小心,就忘记自己买了哪些皮肤了.==|||万 幸的是,他还记得他把所有皮肤按照1-N来编号,他买来的那些皮肤的编号( ...

  9. bzoj4940: [Ynoi2016]这是我自己的发明

    用dfs序把询问表示成询问dfs序的两个区间中的信息 拆成至多9个询问(询问dfs序的两个前缀),对这些询问用莫队处理,时间复杂度$O(n\sqrt{m})$ #include<bits/std ...

  10. Java-Runoob-高级教程-实例-数组:12. Java 实例 – 数组差集

    ylbtech-Java-Runoob-高级教程-实例-数组:12. Java 实例 – 数组差集 1.返回顶部 1. Java 实例 - 数组差集  Java 实例 以下实例演示了如何使用 remo ...