css
小番水源
其实人跟树一样,越是向往高处的光明,它的根就越要伸向黑暗的地底
展开
-
动画
补间动画就是两个状态之间要完整的过度)原创 2022-07-15 15:33:32 · 54 阅读 · 0 评论 -
移动适配rem
移动适配:rem:目前绝多数企业在用的移动端适配解决方案vw/vh:biibili部分大厂开始使用vw/vh移动端适配解决方案(未来可能的移动端适配解决方案) 目标:能够使用rem单位设置网页元素的尺寸网页效果:屏幕宽度不同,网页元素尺寸不同(等比缩放)px单位或者百分比布局可以实现吗?px单位是绝对单位百分比布局特点是宽度自适应,高度固定适配方案:remvw/vh rem单位相对单位rem单位是相对于HTML标签的字号(根元素的字体大小)计算结果1rem=1HTML字号大小rem的使用:在使用rem的原创 2022-07-07 15:20:22 · 843 阅读 · 1 评论 -
flex布局
flex布局/弹性布局1.是一种浏览器提倡的布局模型2.布局网页更加简单、灵活3.避免浮动脱标的问题flex布局模型的构成:作用:1.基于flex精确灵活控制块级盒子的布局方式,避免浮动布局中脱离文档流现象发生2.flex布局非常适合结构化布局设置方式:父元素设置display:flex,子元素可以自动的挤压或者拉伸组成部分:1弹性容器(父元素)2弹性盒子(子元素)3.主轴(一般来说是x轴)4.侧轴/交叉轴(一般来说是y轴) 常见父项属性:flex- flex-direction:设置主轴的方向justi原创 2022-07-02 12:00:36 · 1023 阅读 · 0 评论 -
空间转换(3D)
起到的效果是改变位置,同时z位置改变(视觉效果大小改变)立体呈现:(立方体显示效果)实现方法:使用transform-style:preserve-3d;添加给父级使得子级元素真正的3d空间看大佬做了一个例子:还有一个3D导航:htmlcss可以在3D导航里面加上这个3D缩放效果;...原创 2022-06-21 10:28:21 · 45 阅读 · 0 评论 -
华为缩放-渐变案例
鼠标经过变大,同时出现阴影渐变,同时文字从下面显现出来。主要小图标,子绝父相、文字上移等代码;原创 2022-06-18 10:28:53 · 116 阅读 · 0 评论 -
渐变效果(颜色慢慢变化)
渐变效果原创 2022-06-18 10:15:54 · 92 阅读 · 0 评论 -
iconfont字体图标的使用
iconfont是阿里巴巴旗下的,应该是国内最大最全的字体图标库,使用字体图标如果商用,非开源,请和作者联系!!!一、找到相应的图标,加入购物车。二、添加到项目三、unicode和Font class无颜色,Symbol有颜色,下载至本地。引入css样式即可使用无颜色的四、有颜色的引入......原创 2022-06-15 08:46:03 · 377 阅读 · 0 评论 -
背景图片大小
设置背景图片的大小语法:background-size:宽度 高度取值: 场景:数字·+px 简单方便,常用百分比 相当于当前盒子自身的宽高百分比contain 包含,将背景图片等比例缩放,原创 2022-06-13 21:54:29 · 89 阅读 · 0 评论 -
精灵图/雪碧图介绍
为啥精灵图又叫雪碧图?精灵图(英语:Sprite),又被称为雪碧图或拼合图。在计算机图形学中,当一张二维图像集成进场景中,成为整个显示图像的一部分时,这张图就称为精灵图[1]。常见碳酸饮料雪碧的英文名也是 Sprite,因此也有人会使用雪碧图的非正式译名场景:项目中将多张小图片,合并为一张大图片,这张大图片就是精灵图优点:减少服务器接收发送次数,减轻服务器的压力,提高页面加载速度。例如把八张小图片的请求变成一张图片的请求,减少请求,减轻带宽,减少服务器压力精灵图的使用:1.创建一个盒子,设置盒子大原创 2022-06-13 20:24:22 · 2338 阅读 · 1 评论 -
阴影div压在图片效果实现
在写一个小栗子的时候遇见的:可以通过调节阴影div的权重层级大小,来压住图片就能实现阴影div压住图片的效果。注意:z-index仅能在定位元素上奏效。原创 2022-06-13 19:46:51 · 101 阅读 · 1 评论 -
鼠标经过出现div
技术点:子绝父相、显示隐藏overflow:hidden、过渡,过渡初始位置、:hover尤为注意:hover和过渡初始位置通过子绝父相和overflow:hidden来实现隐藏效果,通过:hover来实现鼠标经过效果,通过过渡是缓慢加载效果...原创 2022-06-13 19:40:39 · 390 阅读 · 1 评论 -
CSS transition属性不生效,没有效果
在做小兔鲜儿项目遇见该项目是从下面过渡transition上来。我们设置transition无效果一般是始末位置忘记设置。设计始末位置即可。非常简单,过渡的必要条件。你从哪里来,到哪里去,从什么方向去,花多少时间到达。...原创 2022-06-13 19:27:59 · 2584 阅读 · 0 评论