cool_css

返回：完美CSS

动画

🔝back

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

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

文本

🔝back

• 利用background-clip:text配合color实现渐变文字效果
  • Shining Text | code
  • Menu Hover Fill Text | code
• 利用动态hsl颜色实现彩虹文字效果
  • Rainbow Color Text
• 利用text-shadow实现发光文字效果
  • Neon Text | code
  • Staggered Glow In Text | code
• 利用text-shadow实现伪3D文字效果
  • Staggered Bouncing 3D Loading | code
• 利用web animation实现冒泡文字效果
  • Bubbling Text
• 利用动态max-width实现文本展开效果
  • Abbr Expansion
• 利用绝对定位、3D变换和JS实现翻转文字
  • Rotating Text | code

视觉

🔝back

• 利用backdrop-filter实现毛玻璃背景效果
  • Frosted Glass | code
• 利用背景、绝对定位和filter实现毛玻璃景深效果
  • Frosted Glass Depth of Field
• 利用blur和contrast滤镜实现融合效果
  • Snow Scratch
• 利用元素叠加blur滤镜实现日光效果
  • Eclipse Loader | code
  • Glowing List Hover
  • Glowing Gradient Border
  • Glowing Gradient Button | code
• 利用mix-blend-mode:screen实现文本遮罩效果
  • Video Mask Text
• 利用-webkit-box-reflect实现倒影效果
  • Card Flip Reflection

页面

🔝back

• 利用3D变换实现视差效果
  • Parallax
• 利用position:sticky实现粘性滚动效果
  • Sticky Sections

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

Ken Burns Effect

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

Animated Image Slider

组件 利用border-radius实现曲边导航栏

Nav Tab

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

Burger Menu

• 利用伪元素和动画实现动态划线效果
  • Menu Hover Underline | code
  • Menu Hover Magnify
    
  • Button Hover Border Stroke With Float Text
    
  • Header With Slide Bar

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

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

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

Confirm Modal

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

Button Hover Shining

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

Snake Border Button

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

Gradient Border

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

Accordion Menu Accordion Panel

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

Carousel

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

Todo List Radio Button Checkbox Toggle Elevator Switch

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

Button Collection Share Button Login Button One-Field Login Form

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

Glowing Menu Buttons

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

Progress Bar

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

Gradient Range Slider

利用伪类校验表单

Transparent Material Login Form

利用动画实现卡片展开

Card Hover Expand Body

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

Name Card Hover Expand

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

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

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

3D Dropdown Menu

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

Pagination

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

Tabs

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

Star Rating

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

Flip Card Clock

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

Menu Hover Image