CSS3随笔2进阶

CSS高级技巧

元素的显示与隐藏

display 显示

display:block 除了转换为块级元素之外，同时还有显示元素的意思。
display : none 隐藏对象
特点： 隐藏之后，不再保留位置。
悬停显示

opacity和display：none区别
什么时候使用 display:none
在不涉及到js情况下，想让一个元素做显示或者隐藏要实现动画，使用display：none
什么时候使用opacity
在涉及js中，要让元素显示和隐藏，做动画，opacity:0，对应，两个都可以，不做动画对应的是show和hide

visibility 可见性

visible : 　对象可视
hidden : 　对象隐藏
特点： 隐藏之后，继续保留原有位置。

overflow 溢出

visible : 　不剪切内容也不添加滚动条。
auto : 　 超出自动显示滚动条，不超出不显示滚动条
hidden : 　不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll : 　不管超出内容否，总是显示滚动条

鼠标样式curso

1
cursor :  default  小白 | pointer  小手  | move  移动  |  text  文本

轮廓 outline

1
outline : outline-color ||outline-style || outline-width

但是我们都不关心可以设置多少，我们平时都是去掉的
最直接的写法是 ： outline: 0; 或者 outline: none;

1
<input  type="text"  style="outline: 0;"/>

防止拖拽文本域resize

resize：none 这个单词可以防止 火狐 谷歌等浏览器随意的拖动 文本域。

1
<textarea  style="resize: none;"></textarea>

vertical-align 垂直对齐3

vertical-align : baseline |top |middle |bottom
vertical-align 不影响块级元素中的内容对齐，它只针对于 行内元素或者行内块元素，特别是行内块元素， 通常用来控制图片/表单与文字的对齐。

去除图片底侧空白缝隙

解决方法
给img vertical-align:middle | top等等。 让图片不要和基线对齐
给img 添加 display：block; 转换为块级元素就不会存在问题了。

溢出的文字隐藏

white-space
normal : 　默认处理方式
nowrap : 　强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。

可以处理中文

text-overflow 文字溢出

clip : 　
不显示省略标记（…），而是简单的裁切
ellipsis :
当对象内文本溢出时显示省略标记（…）

CSS精灵技术（sprite） 小妖精 雪碧

<style>
    div {
        width: 25px;
        height: 26px;
        border: 1px solid red;
        background: url(images/sprite1.png) no-repeat 0 -351px;
        background-position: 0 50px;
    }
</style>
</head>
<body>
    <div></div>
</body>
</html>

伪类选择器

​ ::before 在被选元素的内容前面插入内容
attr(属性名) 将元素某一个属性的内容作为插入的内容
::after 在被选元素的内容后面插入内容
attr(属性名) 将元素某一个属性的内容作为插入的内容
:empty 选择内容为空的元素
:not 排除选择器
:last-child 选择某一个元素父级下的最后一个子元素
:first-child 选择某一个元素父级下的第一的子元素
:nth-child(length) 选择某个元素父级下面的第length个子元素

背景设置

背景尺寸

background-size 设置背景图片尺寸
auto： 背景图像的真实大小。
cover： 背景图片等比例缩放到铺满盒子子主题 3
contain： 背景图片拉伸以适应盒子大小直接设置大小 background-size: 100px 100px; 或者backgound-size: 10% 10%;

背景重复

round

如果背景图片在平铺的时候 有部分区域被截取 round会将图片本身缩小 以达到完全显示图片的目的

space

在水平方向上和竖直方向上 能平铺多少张图片就平铺多少张图片 剩余的空隙平均分配

多背景

1
2
3
4
5
6
7
.el {
    background: 
        url(img/bg1.png) no-repeat left top,
        url(img/bg2.png) no-repeat right top,
        url(img/bg3.png) no-repeat left bottom,
        url(img/bg4.png) no-repeat right bottom;
}

background-origin 定义背景显示区域

参数
border-box背景从边框开始，也就是压在边框上
padding-box背景从内边距开始（相当于默认值）
content-box背景从内容区开始（比如内边距是20px那就会在盒子内20px的位置开始渲染背景）

background-clip

参数
border-box默认值，从边框向外裁剪

padding-box向内填充向外裁剪
content-box从内容区域外裁剪背景
no-clip不裁切

background-size

auto

自适应

长度值px

可以设置宽高值，当只有一个值时默认为宽度高度等比缩放

百分比

将背景图标的宽高变成容器宽高的百分比

cover

背景缩放到覆盖整个容器

contain

背景缩放到覆盖容器的一边为止

内减盒模型

1
box-sizing： content-box / border-box;

过渡

过渡属性

transition-property: 过渡属性;
transition-duration: 动画时间;
transition-timing-function: 动画执行的速度效果;
transition-delay: 延迟

复合属性

transition: all 1s linear 1s;

动画速度效果

linear：匀速运动
ease： 慢快慢（默认值）
ease-in： 由慢到快
ease-out： 由快到慢
steps(integer)： 分多少步完成

2D转换

​ 缩放 scale()
平移translate(x, y)
旋转rotate(0deg)
变形- skew(x, y)
中心点transform-origin

缩放 scale()

1
2
3
4
- scale(x, y) ：在x、y轴上对元素进行缩放，如果第二个参数未提供，取第一个参数的值。 
- scaleX() ：指定元素在X轴的缩放（水平方向） 
- scaleY() ：指定元素在Y轴的缩放（垂直方向） 
- 以自己的中心点进行缩放

平移translate(x, y)

1
2
3
4
5
- translate(x, y)： 在x、y轴上对元素进行移动，如果第二个参数未提供，则默认值为0。
- translateX()： 指定元素在X轴的移动 （水平方向）
- translateY()： 指定元素在Y轴的移动 （垂直方向）
- 中心点水平或垂直移动

旋转rotate(0deg)

1
rotate(0deg)： 指定元素的旋转角度。

变形- skew(x, y)

1
2
3
4
- skew(x, y)： 在x、y轴上对元素进行扭曲（斜切）操作。如果第二个参数未提供，则默认值为0。
- skewX()： 指定元素在X轴的扭曲（水平方向） 
- skewY()： 指定元素在Y轴的扭曲（垂直方向）

中心点transform-origin

1
2
3
4
5
transform-origin： 指定元素在2D转换中的中心点。

- 语法： transform-origin: x y;
- 值可以是关键字 left right top bottom 也可以是具体的像素值

动画

定义动画

用@keyframes 动画名 {}定义一个动画

1
2
3
4
5
6
7
8
9
10
@keyframes Hello {
			from {
				transform: translateX(0);
			}
			to {
				transform: translateX(500px);
			}
		}
	from  to   也可写成 0% 10%  100%
可以被多个元素重复使用

调用动画

animation: 动画名称 执行时间 运动形式 延迟时间 执行次数 是否反向运动;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
元素 {
						animation: 动画名称 执行时间 运动形式 延迟时间 执行次数 是否反向运动;
					}



.box {
			width: 100px;
			height: 100px;
			background: green;
			/*animation: Hello 2s;*/
			animation: world 5000ms linear infinite alternate;
		}


毫秒,秒都行

动画属性介绍

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
- animation-name：动画名称 
- animation-duration：动画的持续时间
- animation-timing-function： 动画的过渡类型 
  - linear： 线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0) 
  - ease： 平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0) 
  - ease-in： 由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0) 
  - ease-out： 由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0) 
  - ease-in-out： 由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0) 
- animation-delay： 动画延迟的时间 
- animation-iteration-count： 动画的循环次数 默认1次  infinite永久
- animation-direction： 动画是否反向运动 
  - normal： 正常方向 
  - reverse： 反方向运行, 从动画结束状态运行到动画开始状态 
  - alternate： 动画先正常运行再反方向运行，并持续交替运行 
  - alternate-reverse： 动画先反运行再正方向运行，并持续交替运行
- animation-fill-mode： 动画结束状态
  - forwards： 保存结束时状态
  - backwards：结束还原
- animation-play-state 设置动画的运行状态
  - paused 暂停
  - running 播放
- animation: 复合写法
  - anmatiton： boxAnimation 1s linear 2s 10 reverse forwards;
  - 解释： 延迟两秒(2s)， 匀速(linerar) 反方向(reverse) 执行 boxAnimation 动画， 时长为1秒(1s)， 重复10次(10)。

CSS中的渐变

形状

1
2
circle  圆形，中心点保持圆形
ellipse	(默认值)渐变颜色形状会随着容器而变化

位置

1
2
3
4
5
left
right
top
bottom
可以直接写像素值

大小

定义：从起点到终点过渡，一个颜色过渡到另一个颜色
closest-side：最近边，从中心点网最近的地方去拉
farthest-side: 最远边，从中心往最远的地方去拉
closest-corner: 最近角
farthest-corner : 最远角（默认值）
background-image: radial-gradient()–>方向
background-image: linear-gradient(to top, red, blue, green);*/
/background-image: linear-gradient(45deg, red 0%, red 50%, blue 50%, blue 100%);/
/background-image: linear-gradient(to right, red 0%, blue 30%, yellow 80%, pink 100%);/
/background-image: radial-gradient(ellipse at 100px 100px, red 0%, blue 50%, pink 100%);/
background-image: radial-gradient(circle farthest-corner at 100px 100px, red, blue);

阴影

文字阴影

text-shadow
text-shadow: offsetX offsetY blur color;
阴影x轴位置偏移 阴影y轴位置偏移 阴影的模糊程度 阴影颜色

盒子阴影

box-shadow

H5C3
#H5C3
CSS3随笔2进阶
http://www.dwyblog.cn/2018/10/29/CSS3随笔2/
作者
幸福来敲门
发布于
2018年10月29日
许可协议