HTML+CSS学习Day18笔记

最新推荐文章于 2024-10-03 20:14:40 发布

怒锤狗男人

最新推荐文章于 2024-10-03 20:14:40 发布

阅读量129

点赞数 1

分类专栏：一阶段文章标签：前端 html5 css3

本文链接：https://blog.csdn.net/qq_57479061/article/details/117421150

版权

一阶段专栏收录该内容

19 篇文章 0 订阅

订阅专栏

本文概述了3D属性transform中的translate3d, rotate3d, scale3d和skew，以及动画animation的用法，包括关键帧定义。还介绍了calc计算属性、背景尺寸和区域、粘性定位，以及多列布局和文本转换等CSS新特性。

摘要由CSDN通过智能技术生成

Day18笔记

一、3D属性transform变形

translate3d(值1, 值2, 值3) 3D新增的属性
1、值1表示X轴位移，单位px
2、值2表示Y轴位移，单位px
3、值3表示Z轴位移，单位px
			
rotate3d(值1, 值2, 值3, 值4) 3D新增的属性
1、前三个值分别表示X、Y、Z轴，值只有1和0。0表示不旋转、1表示旋转
2、值4表示的是度数
			
scale3d(值1, 值2, 值3) 3D新增的属性
1、值1表示X轴缩放
2、值2表示Y轴缩放
3、值3表示Z轴缩放
			
skew() 2D新增的属性 倾斜 斜切
1、X轴，单位deg（角度）
2、Y轴，单位deg（角度）

perspective  透视（景深）属性
近大远小的效果

二、动画animation

/*动画名称*/
animation-name: (自定义名称);

/*动画时间*/
animation-duration: 3s;

/*动画执行次数*/
animation-iteration-count:
/*属性值*/
infinite;循环
固定数值；固定次数

/*动画延迟时间*/
animation-delay: 3s;

/*动画类型*/
animation-timing-function: linear;

/*动画执行方向*/
animation-direction: 
/*属性值*/
normal 正序播放
reverse 倒序播放
alternate 交替播放
alternate-reverse 反向交替播放

/*动画暂停*/
animation-play-state:
/*属性值*/
paused;暂停
running;播放

/*动画执行体，关键帧，定义动画在不同阶段的状态*/
@keyframes （自定义名称）{

/*定义动画阶段可以用百分比来定义动画执行时间段；
    form等于0%*/
    from{

/*动画修改的元素属性为transform，3d旋转；
   也可以使用margin，进行平面移动，*/
        transform: translateX(0px) rotateZ(0deg);
	}

/*to等于100%*/
	to{
		transform: translateX(800px) rotateZ(360deg);
	}
}

动画animation属性缩写形式

animation:

[animation-name] 动画的名称

[animation-duration] 持续时间

[animation-timing-function] 播放速度类型

[animation-delay] 延迟时间

[animation-iteration-count] 播放次数

[animation-direction] 播放顺序

[animation-play-state] 控制动画运行或暂停

[step-start/end]/[steps(1,start/end)]第一帧动画结束/开始时的状态

三、calc计算属性

不需要自己去计算
width:calc(数值加减乘除数值)

四、背景尺寸属性

background-size:
属性值：
cover  按最大尺寸缩放，容器不够大时，显示不完整。
contain  按最小尺寸缩放，容器会留有空白区域。

五、背景区域属性

background-origin:
属性值：
border-box  图片从边框位置开始显示
padding-box  默认值，从padding位置开始显示
content-box  从内容区域开始显示

六、背景裁剪属性

background-clip:
属性值：
border-box  默认值，裁剪边框外的背景
padding-box  裁剪padding外的背景
content-box  裁剪content外的背景

七、多重背景属性

/*注意点：前面的背景会把后面的背景遮挡住*/
background:url(img/dog.jpg) no-repeat right bottom, url(img/15.jpg) no-repeat left top;

background-size: 100px 100px;

八、粘性定位

position: sticky;

粘性定位：一半是固定定位，一半是相对定位，到底是什么定位要根据你设置的值来判断。

需要与top/bottom/left/right配合使用。

表示当于网页的距离为设置值时，会变成固定定位。

九、大小写转换

/*把大写英文转成小写*/
text-transform: lowercase;

/*把小写转成大写*/
text-transform: uppercase;

/*首字母大写*/
text-transform: capitalize;

/*把小写转成大写的小型字体*/
font-variant: small-caps;

十、多列布局

每列宽度
columns-width:数值px;

定义列数
columns-count:数值;

缩写
columns: 每列宽度 定义列数;

每列之间的间隔
columns-gap:数值px;

每列之间的边框
columns-rule:边框宽度数值px solid/dashed/dotted/double 颜色；

脱离列
column-span:all;