标签：Hover 实现 Text 利用 炫酷 72 Menu CSS 3D

1、前言

CSS是一门很特殊的语言，不像一般的编程语言那样需要抽象的思维和严密的逻辑，它真正需要的是想象力——将你脑中所想的意象用代码来表现出来。那么意象又是如何产生的呢？最常用的方法就是探索和观察。举个例子，笔者平时热爱看番，每看到有意思的场景画面总会下意识地记录下来，这对动画创作会非常有帮助；同样地，一旦笔者发现一个制作精良的网站，也会将网站上那些吸引人的元素仔细审查一遍，灵感也自然就有了。

演示网址1：codepen

演示网址2：shiroi

源码地址：github

本文的技巧将不会止步于72个。灵感不息，创作不止。

2、注意

2.1、兼容性

本文的所有技巧都未考虑兼容性，因为个人认为兼容性是一种束缚，它会妨碍你写出优秀的作品。如果硬是要考虑的话请自行解决，这个网站或许能帮到你。

2.2、框架

本文所用到的技巧皆是SCSS+TypeScript。如果想移植到React或Vue上的话请根据框架本身的特点自行适配。笔者不用这类框架的原因很简单：框架很容易就会过时，原生CSS+JS才是王道。

2.3、教程

笔者实在是不擅长写这类东西，不过倒是可以把常用的属性和模式列出来，供大家参考参考。

常用属性：猛戳这里

常用模式：猛戳这里

3、动画

3.1、利用不同的delay实现交错动画

• Reveal Text
• Staggered Stair Loading
• Staggered Square Loading
• Staggered Wave Loading
• Gleaming Loading
• Particle Burst
• Gleaming Heading
• Staggered Shrinking Loading
• Snow
• Staggered Rise In Text
• Staggered LandIn Text

4、文本

4.1、利用background-clip:text配合color实现渐变文字效果

• Shining Text
• Menu Hover Fill Text

4.2、利用动态hsl颜色实现彩虹文字效果

• Rainbow Color Text

4.3、利用text-shadow实现发光文字效果

• Neon Text
• Staggered Glow In Text

4.4、利用text-shadow实现伪3D文字效果

• Staggered Bouncing 3D Loading

4.5、利用web animation实现冒泡文字效果

• Bubbling Text

4.6、利用动态max-width实现文本展开效果

• Abbr Expansion

4.7、利用绝对定位、3D变换和JS实现翻转文字

• Rotating Text

5、视觉

5.1、利用backdrop-filter实现毛玻璃背景效果

• Frosted Glass

5.2、利用背景、绝对定位和filter实现毛玻璃景深效果

• Frosted Glass Depth of Field

5.3、利用blur和contrast滤镜实现融合效果

• Snow Scratch

5.4、利用元素叠加blur滤镜实现日光效果

• Eclipse Loader
• Glowing List Hover
• Glowing Gradient Border
• Glowing Gradient Button
• Crimson Crescent Loading

5.5、利用mix-blend-mode:screen实现文本遮罩效果

• Video Mask Text

5.6、利用-webkit-box-reflect实现倒影效果

• Card Flip Reflection

6、页面

6.1、利用3D变换实现视差效果

• Parallax

6.2、利用position:sticky实现粘性滚动效果

• Sticky Sections

6.3、利用绝对定位和交错动画实现镜头拉伸背景效果

• Ken Burns Effect

6.4、利用伪元素、绝对定位和动画实现滑动幻灯片

• Animated Image Slider

7、组件

7.1、利用border-radius实现曲边导航栏

• Nav Tab

7.2、利用动画和绝对定位实现汉堡菜单

• Burger Menu

7.3、利用伪元素和动画实现动态划线效果

• Menu Hover Underline
• Menu Hover Magnify
• Button Hover Border Stroke With Float Text
• Header With Slide Bar
• Button Hover Multiple Border Stroke

7.4、利用伪元素和overflow:hidden实现交错分割文本菜单

• Split Text Menu
• Staggered Float Text Menu
• Shinchou Menu（慎重勇者风格菜单）

7.5、利用伪元素和overflow:hidden实现填充按钮

• Confirm Modal

7.6、利用伪元素、渐变和overflow:hidden实现闪光按钮

• Button Hover Shining

7.7、利用绝对定位、动画、渐变和overflow:hidden实现蛇形边框按钮

• Snake Border Button

7.8、利用伪元素、渐变、背景运动实现动态渐变边框

• Gradient Border

7.9、利用oveflow:hidden、max-height和:target实现手风琴菜单

• Accordion Menu
• Accordion Panel

7.10、利用overflow:hidden和scroll相关属性实现无缝轮播图

• Carousel

7.11、利用兄弟选择器配合伪元素自定义单复选框

• Todo List
• Radio Button
• Checkbox
• Toggle
• Elevator Switch

7.12、利用各种属性实现各种按钮特效

• Button Collection
• Share Button
• Login Button
• One-Field Login Form

7.13、利用多重box-shadow阴影实现发光按钮菜单

• Glowing Menu Buttons

7.14、利用counter在伪元素的content中显示var的值

• Progress Bar

7.15、利用-webkit-slider-thumb定制滑块

• Gradient Range Slider

7.16、利用伪类校验表单

• Transparent Material Login Form

7.17、利用动画实现卡片展开

• Card Hover Expand Body

7.18、利用clip-path实现卡片多方向展开

• Name Card Hover Expand

7.19、利用没有perspective的transform-style:preserve-3d实现等距3D效果

• 3D Cube
• Isometric Icon Hover
• Isometric Images Hover
• Isometric Icon Nav Bar

7.20、利用3D变换实现3D下拉菜单

• 3D Dropdown Menu

7.21、利用动画和JS实现简单的分页栏

• Pagination

7.22、利用伪元素、overflow:hidden、动画、JS实现标签页

• Tabs

7.23、利用伪元素、:checked、~兄弟选择器实现5星评分

• Star Rating

7.24、运用伪元素、层叠关系、3D变换、JS实现翻牌时钟

• Flip Card Clock

7.25、利用鼠标事件监听和web animation实现图片悬浮菜单

• Menu Hover Image

7.26、利用conic-gradient，伪元素和CSS变量实现圆盘度量计

• Gauge (No SVG)、

原文：https://juejin.cn/post/6844904031513477128

标签：Hover,实现,Text,利用,炫酷,72,Menu,CSS,3D
来源： https://www.cnblogs.com/tc310/p/16029560.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。