- 博客(33)
- 收藏
- 关注
RSS订阅原创 定义关键帧
* 在25%的时候进行的一个动画 *//* 在50%的时候进行的一个动画 */from,to表示开始、结束状态，也可以使用0%,100%定义。@keyframes 动画名称（英文） {/* 动画的开始 *//* 动画结束 *//* 动画开始 *//* 动画结束 */@keyframes 动画名称（英文） {
2022-10-25 20:47:02
96
原创 引用帧动画
animation: 动画名称 动画执行时间 动画速度曲线 延迟时间 动画播放次数 动画运动方向 动画结束之后显示的状态。动画播放方式 暂停。3.animation-timing-function 规定动画运动的速度曲线。1.animation-name 动画名称 是定义关键帧是所定义的动画名称。- 允许负值，（-2s 使动画马上开始，但跳过 2 秒进入动画)7.animation-fill-mode d动画结束之后的显示状态。2.ease 默认值 慢速度开始--速度变快--慢速度结束。
2022-10-25 20:46:08
75
原创 3D坐标轴
transform-style属性和perspective属性放在父元素中,有时候perspective属性放在body中。perspective属性：景深（透视），属性值为透视点到元素的距离，近大远小；preserve-3d， 如果搭配overflow: hidden/scroll/auto使用，相当于2D效果。z轴：垂直于屏幕，向外为正，向内为负。父元素有3D变形，子元素也有3D变形。x轴：水平，向右为正，向左为负。y轴：垂直，向下为正，向上为负。3D立体空间的3根轴线。什么时候搭建3d舞台？
2022-10-25 20:44:35
229
原创 2D变形：倾斜
* skew(30deg,45deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 45 度 */单位deg(角度) 正值，向左上角和右下角倾斜；负值，向右上角和左下角倾斜。transform: skew(x,y) 沿着x轴和y轴倾斜。transform: skewX(x) 沿着x轴倾斜。transform: skewY(y) 沿着y轴倾斜。/* 为一个值的时候，只沿着水平方向位移 */4）transform: skew() 倾斜。为一个值的时候，只沿着水平方向倾斜。
2022-10-25 20:43:14
130
原创 2D变形：缩放
* 先翻转，然后 沿着水平方向和垂直方向都放大1.5倍 *//* 沿着水平方向和垂直方向都放大1.5倍，等比例缩放 */取值范围0~1之间表示缩小，1表示正常大小，1以上表示放大，默认值为1 取值为负值表示先翻转后缩放。transform: scale(x,y) 沿着x轴和y轴缩放。transform: scaleX(x) 沿着x轴缩放。transform: scaleY(y) 沿着y轴缩放。为一个值的时候，沿着水平方向和垂直方向等比例缩放。3）transform: scale() 缩放。
2022-10-25 20:42:05
153
原创 2D变形：旋转
单位：deg 当角度值为正数时，元素沿着顺时针方向旋转 当角度值为负数时，元素沿着逆时针方向旋转。沿着中心点旋转，默认值。2) transform: rotate(ndeg) 旋转。
2022-10-25 20:39:41
72
原创 2D变形：平移
transform: translate(x,y) 沿着x轴和y轴移动。transform: translateX(x) 沿着x轴移动。transform: translateY(y) 沿着y轴移动。1) transform: translate()平移。说明：允许负值，正值默认向右向下，负值向左向上。当为一个值的时候，只沿着水平方向位移。百分比（强调相对于元素本身计算）水平向右为正值，垂直方向向下正值。/* 沿着水平方向位移 */
2022-10-25 20:38:13
94
原创 线性渐变 linear-gradient
background: linear-gradient(方向, 颜色1 范围1, 颜色2 范围2,...);方向：数值（单位deg)、关键词（left|right top|bottom)颜色：关键词、十六进制色值、rgb(r,g,b)、rgba(r,g,b,a)- to right bottom 方向朝向右下角。方向：加前缀需要把to去掉，方向是相反的。- to right top 方向朝向右上角。- to left bottom方向朝向左下角。- to top left 方向朝向左上角。
2022-10-17 20:02:14
256
原创 背景颜色绘制区域
背景被裁剪到边框区域，在内容区、内填充区、边框区域显示，默认值。背景被裁剪到内填充区域，在内容区、内填充区显示。背景被裁剪到内容区域，仅在内容区域显示。/* 背景被裁剪到边框区域，在内容区、内填充区、边框区域显示，默认值 *//* 背景被裁剪到内填充区域，在内容区、内填充区显示 *//* 背景被裁剪到内容区域，仅在内容区域显示 */
2022-10-17 19:57:04
57
原创 背景图定位区域
默认值，背景图相对于内填充区域来定位。背景图片相对于边框区域来定位。背景图相对于内容来定位。/* 默认值，背景图相对于内填充区域来定位 *//* 背景图片相对于边框区域来定位 *//* 背景图相对于内容来定位 */
2022-10-17 19:56:15
128
原创 背景图尺寸设置
contain:包含，等比例缩放背景图片到完整显示在盒子中，有一边到达边界就停止放大, 可能导致另一边留白 但是背景图可能在区域范围内铺不满（宽高给大点）/* contain:包含，等比例缩放背景图片到完整显示在盒子中，但是背景图可能在区域范围内铺不满（宽高给大点） *//* cover:覆盖，等比例缩放背景图片到铺满整个盒子，但是背景图可能会无法完整显示在盒子中（宽高给大点） */cover:覆盖，等比例缩放背景图片到铺满整个盒子，但是背景图可能会无法完整显示在盒子中（宽高给大点）
2022-10-17 19:55:08
847
原创 calc（）函数
浏览器支持 在IE9+、Firefox、chrome、safari可以正常呈现。calc()函数支持 "+", "-", "*", "/" 运算；/* calc运算 */任何长度值都可以使用calc()函数进行计算；calc()函数使用标准的数学运算优先级规则；/* 左右两栏 */利用calc()实现三栏自适应布局。运算符前后都需要保留一个空格。运算符前后都需要保留一个空格。用于动态计算长度值，值灵活。语法： calc(表达式)
2022-10-17 19:52:38
56
原创 双飞翼实现步骤
centerbox内部嵌套.center，不定宽度，通过定义左右margin留出左侧列的宽和右侧列宽。.centerbox固定宽度100%，left，.right固定宽度。移动.right通过margin-left:-200px；.centerbox与.left，.right浮动在一行排列。移动.left通过margin-left:-100%；
2022-10-13 13:56:24
59
原创 圣杯布局实现步骤
移动.right通过margin-left:-200px；配合相对定位position:relative；left:200px；移动.left通过margin-left:-100%；配合相对定位position:relative；结构上.center，.left，.right依次浮动在一行排列。.center宽度100%，.left，.right固定宽度。外框左右固定padding值，预留左侧列和右侧列的列宽。
2022-10-13 13:55:18
77
原创 等高布局的方法2
将.left，.center，.right盒子放入最内层的背景盒子.bg3里。准备三个负责背景的盒子.bg1，.bg2，.bg3，HTML结构上层层嵌套。将.left，.center通过margin负值移动到对应的背景处即可。盒子层层嵌套，利用内层盒子高度变化，外层盒子的高度也会同步变化。将.bg2，.bg3相对于当前位置进行移动，形成三列背景效果。最内层的盒子.bg3清浮动。1.3.2、实现步骤。
2022-10-13 13:54:14
59
原创 等高布局的方法1
每一列固定padding-bottom，同时指定一个margin负值，抵销padding的占位。等高布局是指多列子元素在父元素中实现等高视觉效果的布局技巧。通过浮动创建一个正常的三列布局（不同列背景不同）利用margin负值抵销padding的占位。利用padding和margin负值相抵消。合理的控制padding和margin值。父容器overflow:hidden。其中任意一列变高，其它列同步变高。利用padding提前延伸背景。1.1、实现要点（需求）可以实现任意列等高布局。1.2.2、实现步骤。
2022-10-13 13:52:31
64
原创 项目文件夹
---- /page 其他页面的css。|---- /page/pagename.css 单独某个页面的css。|---- /user/ 与用户相关的页面。|---- /page/pagename.js 单独书写的js。|---- /page/wap/wap_icon.png 手机端图标。|---- /user/login.html 登录页。
2022-10-09 18:24:10
54
原创 圆角的使用
border-top-left-radius 定义了左上角的弧度 border-top-right-radius 定义了右上角的弧度 border-bottom-right-radius 定义了右下角的弧度 border-bottom-left-radius 定义了左下角的弧度。四个值：左上角、右上角、右下角、左下角 水平和垂直半径 三个值：左上角、右上角和左下角，右下角 两个值：左上角与右下角、右上角与左下角 一个值： 四个圆角值相同。语法： border-*-radius。作用：为元素添加圆角边框。
2022-10-09 18:22:14
45
原创 圆角的使用
border-top-left-radius 定义了左上角的弧度 border-top-right-radius 定义了右上角的弧度 border-bottom-right-radius 定义了右下角的弧度 border-bottom-left-radius 定义了左下角的弧度。四个值：左上角、右上角、右下角、左下角 水平和垂直半径 三个值：左上角、右上角和左下角，右下角 两个值：左上角与右下角、右上角与左下角 一个值： 四个圆角值相同。语法： border-*-radius。作用：为元素添加圆角边框。
2022-10-09 18:21:22
51
原创 阿里矢量图标
6.引入iconfont.css文件或者iconfont.js文件。4.选择下载代码，下载完成后解压文件。2.搜索想要的图标且加到购物车。5.把下载的文件放到你的项目中。1.登录阿里矢量图标网站。3.点击右上角的购物车。使用三种方式：下载代码。
2022-10-09 18:19:37
63
原创 CSS块级格式化
它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。内部的Box会在垂直方向，一个接一个地放置 Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠。每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)，BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。float属性不为none。
2022-09-29 19:22:02
29
原创 css显示隐藏
设置opacity元素的所有后代元素会随着一起具有透明性， 【一般用于调整图片或者模块的整体不透明度】hidden 隐藏该元素但是该元素所占的内存空间还存在，即“隐身效果”。【取值：0-1】 0表示全透明，1表示全不透明，0-1之间表示半透明。兼容性：IE6、7、8【不支持】，IE9及以上版本和标准浏览器都支持。none：隐藏该元素并且该元素所占的空间也不存在了。visible 显示元素。
2022-09-28 19:40:03
105
原创 精灵图的原理
适用于一般小图片（如小图标，小背景），不适合大背景大布局背景。减少网页的 http 请求，从而大大的提高页面的性能。必须要限定容器大小符合背景图元素位置。2.1.1 实现步骤。2.1.3 应用场景。
2022-09-28 19:38:22
66
原创 元素类型的转换
特殊情况下我们需要进行元素的模式转换，改变默认元素模式使其拥有另一种元素模式的特性，使用display属性能够将三者任意转换。display:inline-block转换为行内块状元素 【比较常用】display:inline转换为行内元素 【不常用】display:block转换为块状元素 【常用】
2022-09-27 20:09:10
120
原创 定位的实现
定位模式通过position属性来设置，以下为常用四种定位模式静态定位，相对对定位，绝对定位，固定定位。使用定位需要指定一个元素在文档中的定位模式，配合设置【边偏移量】决定元素最终的显示及位置。通常水平位置通过left或right控制，垂直位置通过top或bottom控制。bottom：设置距离包含块底部的距离。right：设置距离包含块右侧的距离。left：设置距离包含块左侧的距离。top：设置距离包含块顶部的距离。边偏移定位元素的位置，使用。百分比：相对于包含块计算。长度值：px/em等。
2022-09-27 20:07:03
77
原创 浮动的特性总结
生成了一个块级框即 （1）支持宽高 （2）支持垂直方向的margin,padding （3）支持行高、text-align等文本属性。未定宽度的块元素适应内容。脱离文档流不脱离文档流。
2022-09-26 19:16:19
34
原创 并集选择器
作用： 使用逗号分隔的列表来对选择器进行分组，给列表中每一个选择器选中的元素设置样式。描述：【逗号】连接一个或多个选择器。/*使用并集选择器——精简代码*//*不使用并集选择器*/
2022-09-25 19:01:19
129
原创 border-color边框颜色
设置所有边框颜色，或者单独地为各边边框设置颜色。4个值 设置上、右、下、左。3个值 设置上、左右、下。2个值 设置上下、左右。1个值 设置所有边框。
2022-09-21 20:24:35
294
2
原创 color的用法
白色： rgb(255,255,255) 、黑色 : rgb(0,0,0) 红色： rgb(255,0,0) 、绿色： rgb(0,255,0) 、蓝色： rgb(0,0,255)白色（#ffffff）、黑色（#000000） 红色（#ff0000）、绿色(#00ff00)、蓝色(#0000ff)说明：rgb(r,g,b) r,g,b取值范围为0-255。说明：#rrggbb r,g,b取值范围为00-ff。颜色名称：如red、blue等。语法：rgb(255,0,0)语法：color:颜色值；
2022-09-20 19:05:28
1009
原创 HTML的基本结构
定义文档的头部，包含文档的标题（title），可以包含文档脚本（script），样式（style），meta信息以及更多的其他信息。在标签内,通过 标签的 charset 属性来规定 HTML 文档应该使用哪种字符编码。-- 网页的主体内容 定义文档的主体，在浏览器窗口中可以看到的所有内容都包含在它内部。- GBK包含全部中文字符，是GB2312的扩展，加入对繁体字的支持，兼容GB2312。- UTF-8被称为万国码，包含全世界所有国家需要用到的字符。
2022-09-15 21:27:57
58
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人