- 博客(43)
- 资源 (1)
- 收藏
- 关注
原创 JS中 focus 和 blur 焦点事件
JS中 focus 和 blur 焦点事件,以及addEventListener事件监听第三个参数true,false
2024-01-04 16:25:18 1692
原创 动画设计方法
transition-timing-function:设置过渡速度。ease-in-out 设置慢开始和结束。transition:简写 必须要包含变化的属性和过渡时间。transition-property:设置改变的属性。/* 简写:必须要写改变属性,过渡时间 */transition-duration:设置过渡时间。transition-delay:设置过渡延迟。/* 设置元素前后改变的属性 */all:设置所有改变的属性。/* 设置过渡完成时间 *//* 设置过渡延迟 *//* 设置速度函数 */
2023-07-17 11:37:27 59
原创 2d css设计
scale:设置缩小放大,数值,代表当前元素的宽高的倍数,二个值:第一个代表宽,第二个代表高。只写一值:代表宽高的缩放倍数相同。transform-origin:设置旋转的定点。只写一个值代表水平方向,垂直为0。translate:平移,简写。-- 设置鼠标悬停向右平移100px -->skew:设置倾斜,单位deg。水平:正值向右,负值向左。垂直:正值向下,负值向上。只写一个值:水平方向。-- 设置鼠标悬停进行旋转 -->-- 设置鼠标悬停进行放大 -->-- transform:变形。
2023-07-17 11:36:55 63
原创 背景设置方法
包括:background-repeat-x(水平方向)和background-repeat-y(垂直方向)background-image: url(./img/gaitubao_大图_png.png);二个值:第一个值代表图片离元素左边的距离,第二个值代表图片离元素顶部的距离。background-image: url(./img/小图.webp);background-image: url(./img/小图.webp);background-image: url(./img/小图.webp);
2023-07-17 11:35:31 208
原创 精灵图写法方法
background: url(./img/小图.webp) no-repeat 100px 100px/center;background: url(./img/小图.webp) no-repeat center/100%;①将多个图片整合为一张图片,浏览器只需要发送一次请求,就可以同时加载多个图片,提高访问效率,提高用户体验。background-image: url(./img2/喜怒哀乐.webp);②将多个图片整合为一张图片,减少图片的总大小,提高请求的速度,增加了用户体验。
2023-07-17 11:33:43 90
原创 文字样式写法
与-webkit-line-clamp一起连用。rgba(red,green,blue,alpha) alpha [0,1]设置不透明度 0 完全透明 1完全不透明。我妄不珍,人骂智完身我仍见评也车向盲考。连人死将让必斯,己。我妄不珍,人骂智完身我仍见评也车向盲考。2.设置几行省略 -webkit-line-clamp。生承嗣,壬 月判能,未。
2023-07-17 11:32:46 71
原创 关于定位设置
偏移时参考位置:离他最近的开启定位的祖先元素,如果没有祖先元素开启定位,参考变为body。3.原来位置不会继续占用,后面标准文档流中的兄弟元素上移。3.原来位置不会继续占用,后面标准文档流中的兄弟元素上移。一般作为绝对定位的参考是是将祖先元素设置为相对定位。2.设置绝对定位的元素脱离标准文档流。1.设置绝对定位的元素脱离标准文档流。定位元素的偏移:left 、right、top、bottom。3.会覆盖标准文档流里面的文本内容。fixed:固定定位,就是特殊的绝对定位。偏移时参考位置:元素本身的初始位置。
2023-07-15 11:48:20 115
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人