CSS共42篇 第2页

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

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

CSS字体引入格式

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

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

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

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

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

CSS滑动到某位置元素固定住不动或滚动到顶部然后固定

CSS滑动到某位置元素固定住不动或滚动到顶部然后固定-雪哥尔
此代码为纯CSS的基本样式,进阶方法查看:点击前往查看 其实只需要用position:sticky就够了,然后用top在设置距顶位置即可。 position: -webkit-sticky; /* 使Safari浏览器兼容 */ position: st...
2年前
01320

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

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

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

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

微信小程序view居中显示

微信小程序view居中显示-雪哥尔
使用align-items:center和justify-content:center都可以让元素居中显示,值得注意的是,居中样式需放在整个样式的最前位置才能生效,我试过加上!important优先显示可不行。 .xg-list{ display: ...
2年前
03680

CSS hover按钮背景色渐变

CSS hover按钮背景色渐变-雪哥尔
自定义鼠标hover按钮时,botton的背景颜色渐变效果 <!DOCTYPE html> <html lang='en'> <head> <meta http-equiv='Content-Type' content='text/html; charset=UTF-8'> &...
2年前
026013

纯CSS流星雨效果

纯CSS流星雨效果-雪哥尔
最近在我的小程序授权登录页加了一些好看的小样式,顺便分享出来 CSS .xulgrrainbox { position: relative; width: 100%; height: 100%; transform: rotateZ(45deg); position: fixed; top: 0; ...
2年前
01070