CSS共42篇

JQ选项卡Tab非同级切换并同步下划线滑动效果

JQ选项卡Tab非同级切换并同步下划线滑动效果-雪哥尔
上次我写了 简单的JS实现选项卡Tab非同级切换-雪哥尔 (xulgr.com) 的这篇博文,用起来感觉还不够丝滑,这次添加了下划线(也就是border-bottom)样式,达到切换任意相邻或不相邻的TAB时都能实现...
7个月前
02557

CSS延迟hover消失时间

CSS延迟hover消失时间-雪哥尔
一般情况下我们会直接用transition来设置动画效果,如 a{ transition: all 1s linear; } a:hover{ transform: scale(1.1); transition: all 1s linear; } 其中all为transition-property属性的值...
7个月前
018914

纯CSS让文字行数限制超出显示省略号

纯CSS让文字行数限制超出显示省略号-雪哥尔
直接用CSS来控制文字或字符的整行,比如先在父级控制一个绝对高度和宽度的框,然后用下面的CSS来控制一段文字行数,超出则显示省略号... 方法1:单行情况下,规定长度,超出部分显示省略号 .Xul...
2年前
021912

CSS的Flex布局并排间距换行间距和每几个元素换行间隔

CSS的Flex布局并排间距换行间距和每几个元素换行间隔-雪哥尔
直接上例子,每4个元素换行并设置10px的间距 ul{ display: flex; flex-wrap: wrap; /*flex弹性换行*/ margin: -10px; /*父元素抵消掉子元素的间距*/ } ul li{ margin: 10px; /*子元素之间的间距...
8个月前
017610

响应式居中-在整个屏幕最中间的位置

响应式居中-在整个屏幕最中间的位置-雪哥尔
方法一:具有固定定位的屏幕居中 .XulgrCenter{ position: fixed; top: 0; bottom: 0; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; justify-content: cen...
2年前
03166

简单的JS实现选项卡Tab非同级切换

简单的JS实现选项卡Tab非同级切换-雪哥尔
网上大部分选项卡代码是在同个父级下实现的,这样对前端比较难设计显示出来的样式,所以我就简单记录一下我设计的两个父级或者同级都能使用的选项卡代码。 思路 将所有选项按钮定义点击事件,然...
9个月前
01117

CSS粘滞定位:页面滑动到某位置时使其固定不动,随父元素结束解除固定

CSS粘滞定位:页面滑动到某位置时使其固定不动,随父元素结束解除固定-雪哥尔
先在父元素加上(如果没有父元素,可直接用body添加) position: relative; 然后在需要粘滞的元素加上 position: sticky; top: 0px; 即可生效。   需要注意的是: 父元素不能有overflow:hi...
1年前
034714

CSS凸出感按钮,按钮凹陷感效果

雪哥尔
分享一组非常简约好看的CSS凹凸感按钮样式 HTML代码:(可以是图片,也可以用font图标,自己引入样式即可) <div class='container'> <div class='box'> <div class='img'> &...
1年前
05425

CSS响应式屏幕宽度自动适应

CSS响应式屏幕宽度自动适应-雪哥尔
.XulgrMax{ font-size: 32px; font-weight: 600; margin: 20% 50px 0 50px; color: red; } @media screen and (max-width: 900px){ .XulgrMax{ font-size: 24px; font-weight: 500; margin: 40p...
1年前
02197

9个纯CSS字体样式

9个纯CSS字体样式-雪哥尔
.XulgrFont{position:relative;letter-spacing:.07em;font-size:3em;font-weight:normal;margin:0 auto} .XulgrFont:before,.hcqFont:after{position:absolute;top:0;left:0;right:0} .xulgr-te...
2年前
012410