CSS共42篇 第2页

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

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

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

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

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

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

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

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

微信小程序view居中显示

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

纯CSS流星雨效果

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

微信小程序点击自动滚动到指定元素位置

微信小程序点击自动滚动到指定元素位置-雪哥尔
官方文档:前往查看 可以直接套用官方的示例js代码,将.xulgr修改成滚动目标的CSS值即可 scrollTo() { // 1.使用wx.createSelectorQuery()查询到需要滚动到的元素位置 wx.createSelectorQuery()...
2年前
01180

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

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

CSS同行并排显示

CSS同行并排显示-雪哥尔
我一直都在用的是 display: flex; 直接在父级元素加上display: flex,元素内的样式都会响应式并排显示,非常简单。   还有一种用行内块 display: inline-block 这种是把两个要并排的元素都...
2年前
01150

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