CSS共38篇

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

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

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...
20天前
0677

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

CSS粘滞定位:页面滑动到某位置时使其固定不动,随父元素结束解除固定-雪哥尔
只需使用position: sticky即可实现 position: sticky; top: 0px; 需要注意的是: 父元素不能有overflow:hidden或者overflow:auto属性; 必需指定top、bottom、left、right这4个值之一,否则只会...
1个月前
0590

简单的JS返回顶部和一键切换背景色和颜色(日间夜间模式)

简单的JS返回顶部和一键切换背景色和颜色(日间夜间模式)-雪哥尔
HTML <button id='xgtotop'><i class='xulgricon'>&#xe621;</i></button> <button id='xglink'><i class='xulgricon'>&#xe692;</i></but...
1个月前
0370

CSS字体引入格式

CSS字体引入格式-雪哥尔
几个免费字体下载网站: https://ztxz.org.cn/ https://font.chinaz.com/ https://www.foundertype.com/   一般下载下来是单个ttf或otf字体文件,很多都体积比较大,直接引入单个字体文件...
2个月前
0420

制作一个页面载入loading加载完毕动画收缩

制作一个页面载入loading加载完毕动画收缩-雪哥尔
粗糙的制作一个loading加载完用CSS动画方式结束 HTML部分: <div id='XGloader'> <div class='XGloader_Bg'></div> <div class='XGloader'> <div class='XGloader_i...
4个月前
0770

简单的CSS+JS实现鼠标指针附带图标

简单的CSS+JS实现鼠标指针附带图标-雪哥尔
html部分直接在body开头加上img图标地址即可 <img src='图标地址' class='xg-mouse'> 图标建议使用透明背景的png或svg CSS部分直接定义图标大小和绝对定位即可 .xg-mouse {width:40px;hei...
9个月前
0430

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

纯CSS让文字行数限制超出显示省略号-雪哥尔
直接用CSS来控制文字或字符的整行,比如先在父级控制一个绝对高度和宽度的框,然后用下面的CSS来控制一段文字行数,超出则显示省略号...   display: -webkit-box; overflow: hidden; word-...
11个月前
0560

CSS3鼠标:hover经过元素呼出显示图片

CSS3鼠标:hover经过元素呼出显示图片-雪哥尔
当鼠标停留在设置的元素时呼出图片,移开后隐藏。 CSS代码 .xulgr-hovershow .xulgr-hovershow-img { opacity:0; transform:translateY(6px); transition:.4s; } .xulgr-hovershow:hover .xulgr...
1年前
0350

[进阶方法]JS+CSS滑动到某位置元素固定住不动或滚动到顶部然后固定的进阶方法

[进阶方法]JS+CSS滑动到某位置元素固定住不动或滚动到顶部然后固定的进阶方法-雪哥尔
进阶方法有个好处就是悬浮前和滚动悬浮后的样式都可以自定义,比如没有滚动到设置的元素时,样式的宽度是100px,然后当用户滚动屏幕到设置的元素时,设置的元素就可以又以另一种自定义样式悬浮...
1年前
0480