- 博客(24)
- 收藏
- 关注
原创 css3过渡动画——transition属性
1.linear 相同的速度从开始到结束,也就是匀速 2.ease 默认值 慢速度开始--速度变快--慢速度结束 3.ease-in 慢速度开始的过渡效果,也就是以低速度开始 4.ease-out 慢速度结束的过渡效果,也就是以低速结束 5.ease-in-out 以慢速度开始和结束的过渡效果。/* 参与过渡的css属性名称 */css样式:参与过渡的css属性名称|all表示所有属性。/* 动画执行时间 *//* 速度类型 *//* 延迟时间 *//* 复合写法 */延迟时间:默认0s,单位s|ms。
2022-10-25 21:50:04
131
原创 渐变的基础内容
ne-resize 此光标指示矩形框的边缘可被向上及向右移动(北/东)。nw-resize 此光标指示矩形框的边缘可被向上及向左移动(北/西)。se-resize 此光标指示矩形框的边缘可被向下及向右移动(南/东)。text 此光标指示文本。backgrond: repeating-radial-gradient(渐变形状/圆心, 颜色1 范围1, 颜色2 范围2, ...);background:repeating-linear-gradient(方向, 颜色1 范围1, 颜色2 范围2,...);
2022-10-25 21:48:12
276
原创 多背景的部分内容
background-image: url(图片路径), url(图片路径);不同的背景图像【逗号】隔开,也可以给不同的图片设置多个不同的属性(如背景位置,背景重复等)书写顺序越靠前,显示越靠上单独定义.box {}简写.box {}
2022-10-25 21:44:43
100
原创 弹性盒子是什么
弹性盒子是CSS3的一种新的布局模式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行 排列、对齐和分配空白空间操作方便,布局简单,移动端使用广泛PC端浏览器支持情况较差IE11或更低版本中,不支持或部分支持在盒模型中较为灵活弹性盒模型的内容包括:弹性容器、弹性子元素——项目原理:为父元素设置flex属性,控制子元素的位置及排列方式应用场景 : 移动端。
2022-10-24 19:31:09
85
原创 子元素如何在父元素中居中
子父元素宽度固定,父元素设置 text-align:center,子元素设置display:inline-block,并且子元素不能设置浮动,否则居中失效。子元素相对于父元素绝对定位,子元素 top,left 设置 50%,子元素margin-top 和 margin-left 减去各自宽高的一半。子父元素宽度固定,子元素设置 margin:auto,并且子元素不能设置浮动,否则居中失效。子元素相对于父元素绝对定位,子元素上下左右全为 0,然后设置子元素margin:auto。
2022-10-24 19:15:54
212
原创 css3基础
是css技术的升级版本,在css2的基础上,新增了许多特性,弥补了css2的不足,使web页面的开发变得更加高效、便捷css3按模块化进行设计,比较重要的css3模块包含、 选择器、框模型、背景和边框、文本效果、2D|3D转换、动画、多列布局、用户界面css3优点: CSS3是完全向后兼容,所以没有必要修改现在的设计来让它们继续运作。网络浏览器也还将继续支持CSS2。
2022-10-14 19:09:12
65
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人