CSS共43篇 第2页
排序
CSS延迟hover消失时间
一般情况下我们会直接用transition来设置动画效果，如 a{ transition: all 1s linear; } a:hover{ transform: scale(1.1); transition: all 1s linear; } 其中all为transition-property属性的值...
响应式居中-在整个屏幕最中间的位置
方法一：具有固定定位的屏幕居中 .XulgrCenter{ position: fixed; top: 0; bottom: 0; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; justify-content: cen...
纯CSS让文字行数限制超出显示省略号
直接用CSS来控制文字或字符的整行，比如先在父级控制一个绝对高度和宽度的框，然后用下面的CSS来控制一段文字行数，超出则显示省略号... 方法1：单行情况下，规定长度，超出部分显示省略号 .Xul...
CSS隐藏内容点击展开
css .xulgr-checkbox{display: block;} .xulgr-checkbox+input{display: none;} .xulgr-checkbox+input+div{display:none;} .xulgr-checkbox+input:checked+div{display:block;} html <label...
JQ选项卡Tab非同级切换并同步下划线滑动效果
上次我写了 简单的JS实现选项卡Tab非同级切换-雪哥尔 (xulgr.com) 的这篇博文，用起来感觉还不够丝滑，这次添加了下划线（也就是border-bottom）样式，达到切换任意相邻或不相邻的TAB时都能实现...
CSS hover按钮背景色渐变
自定义鼠标hover按钮时,botton的背景颜色渐变效果 <!DOCTYPE html> <html lang='en'> <head> <meta http-equiv='Content-Type' content='text/html; charset=UTF-8'> &...
简单的CSS+JS实现鼠标指针附带图标
html部分直接在body开头加上img图标地址即可 <img src='图标地址' class='xg-mouse'> 图标建议使用透明背景的png或svg CSS部分直接定义图标大小和绝对定位即可 .xg-mouse {width:40px;hei...
自己在别人css抠出来的btn按钮样式
具体查看：https://code.xulgr.com/pub/css/btn/
使用CSS和JS实现带圆形扩展的动画效果的日间夜间切换功能黑白主题切换组件[附源码下载]
![使用CSS和JS实现带圆形扩展的动画效果的日间夜间切换功能黑白主题切换组件[附源码下载]-雪哥尔](/xulgr/image/1158/01.gif)
点击按钮后从按钮向外圆形扩散渐渐变化颜色，可自定义CSS变量来控制，JS部分无需任何库的引入纯JS实现，动画效果可自定义速度和圆曲率。
css中的flex（弹性）布局，并排显示
1、flex-direction 此属性决定主轴的方向 .flex{ flex-direction: row; // (默认值) 主轴水平方向，从左往右 如图： flex-direction: row-reverse; // 主轴水平方向的逆方向，从右往左 flex-dir...
