[编程技术] 一行 CSS 代码实现响应式布局 – 使用 Grid 实现的响应式布局

本文讲解如何使用 CSS Grid(网格) 布局来创建一个超酷的图像网格，它会根据屏幕的宽度改变列的数量，以实现响应式布局。 而这篇文章中最漂亮的部分是：添加一行 CSS 代码即可实现响应式布局。 这意味着我们不必通过丑陋

[编程技术] 纯 html+css 实现点击元素隐藏操作功能

利用 label 的 for 属性绑定 checkbox，此方法对按钮与盒子的层级关系没有限制（需用到 CSS3 选择器） <style> ul,li{ list-style: none; } *{ padding: 0; margin: 0; } .nav-con{ display: none; } .nav-box{ display: none; } .nav-con:checked ~ .nav-box{ display: block; } .nav-btn{ padding: 10px 15px; background:; } </style> <label for="control" class="nav-btn&#3

[编程技术] github 的黑夜模式小猫咪动画源码

github 上的小猫咪黑夜模式切换很可爱，想要~ 。于是花了点时间扒了下来放在了自己的博客上。 秉着开源精神，将源码分享给大家。 废话少说，上代码 html: <!-- 暗黑模式 --> <div class="profile-color-modes js-promo-color-modes-banner-profile"> <svg aria-hidden="true" height="45" viewBox="0 0 106 60" fill="none" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"> <g class="profile-color-modes-illu-group profile-color-modes-illu-red"> <path d="M37.5 58.5V57.5C37.5 49.768 43.768 43.5 51.5 43.5V43.5C59.232 43.5 65.5

[编程技术] CSS抖音文字效果,文字彩色抖动效果

CSS抖音文字效果,文字彩色抖动效果 CSS代码（里面渐变颜色可以自己修改） .doudong{ animation: uk-text-shadow-glitch .65s cubic-bezier(1,-1.91,0,2.79) 0s infinite normal both running; } @keyframes uk-text-shadow-glitch { 0% { text-shadow: none } 25% { text-shadow: -2px -2px 0 #ff004f,2px 2px 0 #00f7ef } 50% { text-shadow: 2px -2px 0 #ff004f,-2px 2px 0 #00f7ef } 75% { text-shadow: -2px 2px 0 #ff004f,2px -2px 0 #00f7ef } 100% { text-shadow: 2px 2px 0 #ff004f,-2px -2px 0 #00f7ef }

[编程技术] 前端 | CSS 实现新拟态(Neumorphism) UI 风格

什么是新拟态(Neumorphism) UI 风格？ 网上似乎还没有一个准确统一的定义。按照我个人的通俗理解，就是将界面的一部分凸起来，另一部分凹下去，形成的一种错落有致的拟物风格。代表作是乌克兰设计师 Alexander Plyuto 在