CSS进阶

最新推荐文章于 2024-07-18 20:18:47 发布

henrenzhengdere

最新推荐文章于 2024-07-18 20:18:47 发布

阅读量115

点赞数

分类专栏：前端文章标签： css css3 html

本文链接：https://blog.csdn.net/m0_65552590/article/details/126125723

版权

前端专栏收录该内容

31 篇文章 0 订阅

订阅专栏

CSS3

文章目录

CSS3

一、字体图标

1.字体图标简介

字体图标展示的是图标，本质是字体

字体图标的优点：

(1) 灵活性：灵活地修改样式，例如：尺寸、颜色

(2) 轻量级：体积小、渲染快、降低服务器请求次数

(3) 兼容性：几乎兼容所有主流浏览器

(4) 使用方便：1. 下载字体包 2. 使用字体图标

2.使用字体图标-类名：

(1)引入字体图标样式表

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Sh8eIjof-1659430032050)(C:\Users\25397\AppData\Roaming\Typora\typora-user-images\image-20220601203124776.png)]

(2) 调用图标对应的类名，必须调用2个类名

*** iconfont类：基本样式，包含字体的使用等**

*** icon-xxx：图标对应的类名**

案例使用：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="iconfont.css">
		<style>
			.look{
				display: none;
			}
			.box:hover > .look{
				display: block;
			}
			.box:hover > .off{
				display: none;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="look">
				<input type="text" value="123456"> <i class="iconfont icon-xianshi"></i>
			</div>
			<div class="off">
				<input type="password" value="123456"><i class="iconfont icon-yincang"></i>
			</div>
		</div>
	</body>
</html>

二、2D转换位移

1.平面转换-位移

（1）改变盒子在平面内的状态(位移、旋转、缩放)

（2）2D转换

（3）平面转换属性：tranform

1.1语法：

tranform : translate(水平移动距离，垂直移动距离)

1.2取值 (正负均可)：

(1)像素单位数值

(2)百分比(参照物为盒子自身尺寸)

注意：X轴正向为右，Y轴正向为下

1.3技巧

（1）sranslate()如果只给出一个值，表示x轴方向移动距离

（2）单独设置某个方向的移动距离：translateX()&translateY()

2.平面转换-盒子定位居中

2.1 实现代码：

方法一：

div{
    position:absolute;
    left:50%;
    right:50%;
    transform:translate(-50%,-50%);
    width:200px;
    height:100px;
    background-color:pink;
}

方法二：

div{
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-100px;
    margin-top:-50px;
    width:200px;
    height:100px;
    background-color:pink;
}

3.双开门案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box{
				width: 1366px;
				height: 600px;
				margin: 0 auto;
				background-image: url(images/bg.jpg);
				overflow: hidden;
			}
			.box::before,
			.box::after{
				float: left;
				content: '';
				width: 50%;
				height: 600px;
				background-image: url(./images/fm.jpg);
				transition: all 0.5s;
			}
			.box::after{
				background-position: right 0;
			}
			.box:hover::before{
				transform: translate(-100%);
			}
			.box:hover::after{
				transform: translate(100%);
			}
		</style>
	</head>
	<body>
		<div class="box">
			
		</div>
	</body>
</html>

三 2D转换-旋转和缩放

1.平面转换旋转

（1）语法：transform: rotate(角度);

注意：角度单位是deg

(2) 技巧：取值正负均可

img{
    width:250px;
    transition: all 2s;
}
img:hover{
    transform: rotate(360deg)
}

2.转换圆点

（1）语法：

默认圆点是盒子中心点

transform-origin:原点水平位置原点垂直位置

（2）取值：

方位名词（left、top、right、bottom、center）

像素单位数值

百分比(参照盒子自身尺寸计算)

img{
    width:250px;
    transition: all 2s;
    transform-origin: right bottom;
}
img:hover{
    transform: rotate(360deg)
}

3.多重转换

3.1 实现代码：

.box{
    width:800px;
    height:200px;
    border:1px solid #3333;
}
img {
    width:200px;
    transition:all 8s;
}
.box:hover > img{
    transform: translate(100%) rotate(360deg)
}

4. 缩放

（1）语法：

transform: scale(x轴缩放倍数，y轴缩放倍数);

（2）技巧

一般情况下，只为scale设置一个值,表示x轴和y轴等比例缩放

transform:scale(缩放倍数)

.box{
    width:300px;
    height:200px;
    margin: 100px auto;
    background-color:pink;
}
.box img {
    width:100%;
    transition: all 0.5s;
}
.box:hover > img{
    transform:scale(1.2);
}

5.图片缩放案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			.box{
				position: relative;
				width: 600px;
				height: 600px;
				margin: 50px auto;		
			}
			.hy{
				width: 100%;
				height: 100%;
			}
			.winer{
				position: absolute;
				top: 50%;
				left: 50%;
				width: 300px;
				height: 100px;
				opacity: 0;
				transition: all 0.5s;
			}
			.box:hover .winer{
				transform: translate(-50%,-50%) scale(2);
				opacity: 1;
			}
			
		</style>
	</head>
	<body>
		<div class="box">
			<img src="images/hy.jpeg" alt="" class="hy">
			<img src="images/winer.jpeg" alt="" class="winer">
		</div>
	</body>
</html>

四、渐变

1.渐变背景

（1）渐变是多个颜色逐渐变化的视觉效果

（2）一般用于设置盒子的背景

2.语法：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ViZj2wnR-1659430032051)(C:\Users\25397\AppData\Roaming\Typora\typora-user-images\image-20220602202844789.png)]

五、3D转换

1.空间：

（1）是从坐标轴角度定义的。x、y和z三条坐标轴构成了一个立体空间。Z轴位置与视线方向相同。

（2）空间转换也叫3D转换

（3）属性：transform

2.位移

2.1语法：

transform: translate3d(x,y,z);

2.2取值（正负均可）：

（1）像素单位数值

（2）百分比

.box{
    width:200px;
    height:200px;
    margin 10px auto;
    background-color:pink;
    transition: all 0.3s;
}
.box:hover{    transform:translate3d(10px,20px,30px)
}

3.透视

3.1 默认情况下，为什么无法观察到Z轴位移效果？

答：Z走是实现移动方向，移动效果应该是距离的远或近，电脑屏幕是平面，默认无法观察远近效果

3.2 属性(添加给父级)

（1）perspective:值;

（2）取值：像素单位数值，数值一般在800-1200

（3）透视距离也称为是距，所谓的视距就是人的眼睛到屏幕的距离

.body{
    perspective: 1000px;
}
.box{
    width:200px;
    height:200px;
    margin 10px auto;
    background-color:pink;
    transition: all 0.3s;
}
.box:hover{    transform:translate3d(10px,20px,30px)
}

六、空间旋转

1.空间旋转-rotateZ

1.1 语法：

transform : rotateZ(值)

.box{
    width:200px;
    margin:20px auto;
}
img{
    width:300px;
    transition:all 0.3s;
}
.box img:hover{
    transform: rotetaZ(360deg);
}

2.空间转换-rotateX

2.1 语法：

transform:rotateX(值);

<head>
    <style>
        .box{
            width:200px;
            margin: 10px auto;
        }
        img{
            width:300px;
            transition: all 2s;
        }
        .box{
            perspective:1000px;
        }
        .box img:hover{
            transform : rotateX(60deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="./img/1.jpg">
    </div>
</body>

3.空间转换-rotateY

3.1 语法：

transform : rotateY(值);

<head>
    <style>
        .box{
            width:200px;
            margin: 10px auto;
        }
        img{
            width:300px;
            transition: all 2s;
        }
        .box{
            perspective:1000px;
        }
        .box img:hover{
            transfrom: rotateY(60deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="./img/1.jpg">
    </div>
</body>

4.左手法则

判断旋转方向：左手握住旋转轴，拇指指向正值方向，手指弯曲方向为旋转正直方向

5. rodate3d(x,y,z角度度数)

用来设置自定义旋转轴的位置及旋转的角度

x,y,z取值为0-1之间的数字

6.立体呈现

6.1实现方法：

（1）添加transform-style:preserve-3d;

（2）使子元素处于真正的3d空间

6.2 呈现立体图形步骤

（1）盒子父元素添加transfrom-style:preserve-3d

（2）按需求设置子盒子的位置(位移或旋转)

7.缩放

7.1语法：

（1）transform: scaleX(倍数)

（2）transform:scaleY(倍数)

（3）transform:scalseZ(倍数)

（4）transform:scale3d(x,y,z)

七、动画(重点)

动画的本质是快速切换大量图片时在人脑中形成的具有连续性的画面

构成动画的最小单元：帧或动画帧

1.实现步骤

（1）定义动画

两个状态变化：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uPR9PBKC-1659430032052)(C:\Users\25397\AppData\Roaming\Typora\typora-user-images\image-20220603175109825.png)]

多个状态变化：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WdnDbvxN-1659430032052)(C:\Users\25397\AppData\Roaming\Typora\typora-user-images\image-20220603175144201.png)]

（2）使用动画：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uw17pF8z-1659430032052)(C:\Users\25397\AppData\Roaming\Typora\typora-user-images\image-20220603175303414.png)]

2.动画 from…to

<head>
    <style>
        .box{
            width:200px;
            height:100px;
            background-color:pink;
            /*使用动画*/
            animation: change 2s;
        }
        /*定义动画*/
        @keyframes change{
            form{
                width:200px;
            }
            to{
                width:600px;
            }
        }
    </style>
</head>
<body>
    <div class="box">
        
    </div>
</body>

3.动画-百分比

<head>
    <style>
        .box{
            width:200px;
            height:100px;
            background-color:pink;
            /*使用动画*/
            animation: change 2s;
        }
        /*定义动画*/
        @keyframes change{
            0%{
                width:200px;
            }
            50%{
                width:500px;
                height:300px;
            }
            100%{
                width:800px;
                height:500px;
            }
        }
    </style>
</head>
<body>
    <div class="box">
        
    </div>
</body>

4. animation复合属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Mo8nYaDm-1659430032053)(C:\Users\25397\AppData\Roaming\Typora\typora-user-images\image-20220603180331581.png)]

注意：

(1)动画名称和动画时长必须赋值

(2)取值不分先后顺序

(3)如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间

5.逐帧动画（配合精灵图使用）

5.1精灵动画制作步骤：

（1）准备显示区域

设置盒子尺寸是一张小图的尺寸，背景图为当前精灵图

（2）定义动画

改变背景图的位置（移动的距离就是精灵图的宽度）

（3）使用动画

添加速度曲线steps(N),N与精灵图上小图个数相同

添加无线重复效果
{
width:500px;
height:300px;
}
100%{
width:800px;
height:500px;
}
}

</div>

```