原文地址: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. Android app内存限制OOM

    Android系统的每个app做了内存限制,版本的android系统,不同的设备对每个app的内存限制可能有所不同,从早期的16M ,32M到现在的256M,384M...虽然内存增大了,但是不代表就 ...

  2. 一文全解:利用谷歌深度学习框架Tensorflow识别手写数字图片(初学者篇)

    笔记整理者:王小草 笔记整理时间2017年2月24日 原文地址 http://blog.csdn.net/sinat_33761963/article/details/56837466?fps=1&a ...

  3. LeetCode——10. Regular Expression Matching

    一.题目链接:https://leetcode.com/problems/regular-expression-matching/ 二.题目大意: 实现一个正则表达式,该正则表达式只有两种特殊的字符— ...

  4. Lucene - CustomScoreQuery 自定义排序

    在某些场景需要做自定义排序(非单值字段排序.非文本相关度排序),除了自己重写collect.weight,可以借助CustomScoreQuery. 场景:根据tag字段中标签的数量进行排序(tag字 ...

  5. mysql获取某个表的所有属性名及其数据

    MYSQL类实现从数据库相应的表中获取所有属性及其数据,数据为元组类型.返回结果存放在字典中 import pymysql class MYSQL: def __init__(self): pass ...

  6. [转载]领域驱动设计(Domain Driven Design)参考架构详解

    摘要 本文将介绍领域驱动设计(Domain Driven Design)的官方参考架构,该架构分成了Interfaces.Applications和Domain三层以及包含各类基础设施的Infrast ...

  7. maven不同环境的profile配置

    1.开发的时候经常需要加载不同的环境,比如本地开发环境dev,生产环境product.如果需要手动去修改的话就太麻烦了,自己实现了maven资源替换,然后多环境下的配置文件管理的demo,在此贴出来. ...

  8. 廖雪峰Java5集合-3Map-1使用Map

    廖雪峰的视频不全,以下是疯狂Java关于Map的讲解 1.Map定义 Map是一种键值映射表,可以通过key快速查找value,同python的dict.key不允许重复,value可以重复. Map ...

  9. php中的各种http报错的报错的状态码的分析

    HTTP常见错误 HTTP 错误 400 400 请求出错 由于语法格式有误,服务器无法理解此请求.不作修改,客户程序就无法重复此请求. HTTP 错误 401 401.1 未授权:登录失败 此错误表 ...

  10. Html5弹幕视频播放器插件

    Danmmu Player是一个具备弹幕功能的Html5视频播放器.我们在观看视频的时候,可以对视频发表自己的观点,当点击发送按钮后,发表的内容会在视频屏幕上以彩弹的形式发出,并做滚动展示动画效果,即 ...