搜索[CSS],共找到47个文章

纯CSS流星雨效果

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

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

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

CSS同行并排显示

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

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年前
010310

css中的flex(弹性)布局,并排显示

css中的flex(弹性)布局,并排显示-雪哥尔
1、flex-direction 此属性决定主轴的方向 .flex{ flex-direction: row; // (默认值) 主轴水平方向,从左往右 如图: flex-direction: row-reverse; // 主轴水平方向的逆方向,从右往左 flex-dir...
2年前
018911

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悬浮固定效果-雪哥尔
<style> /*设置了高度,可以上下滚动*/ body { height: 1800px; background:#dddddd; } /*div通用样式*/ div{ background: #1a59b7; color:#ffffff; overflow: hidden; z-index: 9999; po...
4年前
08580

CSS居屏幕正中

CSS居屏幕正中-雪哥尔
<style> body{ background-color:#000; } .xulgr-table{ width:100%; height:100%; border:0; text-align:center; cellpadding:0; cellspacing:0; }.xulgr-table td{ text-align:center; ...
4年前
07490

CSS对象图片

CSS对象图片-雪哥尔
width: 80px;height: 80px; /*对象宽高*/ background-image: url(https://imgs.xulgr.com/xg800.png); /*图片路径*/ background-size:80px 80px; /*调整background-image图片大小*/ background-...
4年前
07100

CSS用图片作为文字的背景

CSS用图片作为文字的背景-雪哥尔
  background:url(图片路径); background-attachment: fixed; background-size: cover; -webkit-text-fill-color:transparent; -webkit-background-clip: text; 运行代码 $('#302').on('cl...
4年前
04890