css3学习一些效果（一）

最新推荐文章于 2024-04-17 01:37:33 发布

Spider_man_

最新推荐文章于 2024-04-17 01:37:33 发布

阅读量397

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/chengmo123/article/details/109289155

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章目录

一.css三角的做法

原理将盒子设置为宽高为0，border值设置，每个边就有三角的效果。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{
				margin: 0;
				border: 0;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.container{
				position: relative;
				width: 100px;
				height: 160px;
				margin-top: 100px;
				background-color: gray;
			}
			.angle{
				/* 三角形 */
				position: absolute;
				top: -20px;
				right: 40px;
				width: 0;
				height: 0;
				border: 10px solid transparent;
				border-bottom-color: gray;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="container">
				<div class="angle"></div>
			</div>
		</div>
	</body>
</html>

效果图：
在这里插入图片描述

二.溢出文字省略号显示

（1）单行文字溢出省略号显示
步骤：

1.先强制一行内显示文本
white-space:nowrap （默认是normal自动换行）
2.超出的部分隐藏
overflow:hidden;
3.超出的部分用省略号显示
text-overflow:ellipsis

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box{
				width: 100px;
				height: 80px;
				/* 第一步强制一行显示 */
				white-space: nowrap;
				/* 第二步隐藏超出的文字 */
				overflow: hidden;
				/* 第三部显示省略号 */
				text-overflow: ellipsis;
				background-color: cyan;
			}
		</style>
	</head>
	<body>
		<div class="box">
			你好，这是测试单行的省略号效果
		</div>
	</body>
</html>

效果：
在这里插入图片描述
（2）多行省略号显示
多行文本溢出显示省略号，有较大的兼容性问题，适合于webKit浏览器或移动端（移动端大部分是webkit内核）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box{
				width: 100px;
				/* 调整盒子的高度,使其只显示到第二行,其他的被隐藏掉 */
				height: 45px;
				background-color: cyan;
				overflow: hidden;
				text-overflow: ellipsis;
				/* 弹性伸缩盒子模型显示 */
				display: -webkit-box;
				/* 限制在一个块元素显示的文本的行数 */
				-webkit-line-clamp: 2;
				/* 设置或检索伸缩盒子对象子元素的排列方式 */
				-webkit-box-orient: vertical;
			}
		</style>
	</head>
	<body>
		<div class="box">
			你好，这是测试单行的省略号效果,你好，这是测试单行的省略号效果
		</div>
	</body>
</html>

效果：
在这里插入图片描述

三.css3实现过渡效果（transition）

经常和:hover一起搭配使用
transition:要过渡的属性花费时间运动曲线何时开始
1.属性想要变化的css属性，宽度高度背景颜色、内外边距都可以，如果想要多有的属性都变化过渡，写一个all就可以
2.花费时间单位是秒（必须写单位）比如1s
3.运动曲线：墨人生四ease
4.何时开始：单位是秒（必须写单位）可以设置延迟触发的时间默认是0s
注意：谁过渡给谁加transition

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{
				margin: 0;
				padding: 0;
			}
			.box{
				position: relative;
				height: 40px;
				width: 40px;
				margin-left: 100px;
				margin-top: 100px;
				background-color: gray;
				overflow: hidden;
			}
			.child1{
				height: 40px;
				width: 40px;
				background-color: red;
				transition: all 1s ease;
			}
			.child2{
				height: 40px;
				width: 40px;
				background-color: green;
			}
			
		.box:hover > div:first-child{
			margin-top: -40px;
		}
			
			
		</style>
	</head>
	<body>
		<div class="box">
			<div class="child1">
			</div>
			<div class="child2">
			</div>
		</div>
	</body>
</html>

四.css 2D转换

转换（transform）可以实现元素的位移、旋转和缩放效果
移动：translate
旋转：rotate
缩放：scale
（1）移动：tanslate

语法
transform:tanslate(x,y) ；或者分开写
tansform:tanslateX(n);
transform:tanslateY(n);
注意：
$\color{red} {tanslate最大优点：不会影响其他元素的位置}$ ,不像其他的移动方式会影响其他元素位置
$\color{red}{translate中的百分比单位是相对于自身元素的tanslate（50\%，50\%）}$
$\color{blue}{对行内标签没有效果}$

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>transform的移动/旋转/缩放不影响其他的盒子</title>
	</head>
	<style type="text/css">
		div[class^='box']{
			width: 200px;
			height: 200px;
			margin: 100px auto;
		}
		.box1{
			background-color: #00FFFF;
			transform: translateY(200px);   /*这里移动到box2上面去，并不会影响box2的位置*/
		}
		.box2{
			background-color: #FFFF00;
		}
	</style>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
	</body>
</html>

例2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒子水平居中垂直居中</title>
	</head>
	<style type="text/css">
		.box1{
			position: relative;
			width: 500px;
			height: 500px;
			background-color: #00FFFF;
		}
		.box2{
			position: absolute;
			width: 100px;
			height: 100px;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			background-color: #FFFF00;
		}
	</style>
	<body>
		<div class="box1">
			<div class="box2">
				
			</div>
		</div>
		
	</body>
</html>

（2）旋转 rotate

语法：

tansform:rotate(度数)
注意：
$\color{red}{ 1.roatate里面跟度数，单位是deg，比如rotate(45deg)}$
$\color{red}{2.角度为正时，顺时针，负时为逆时针}$
$\color{red}{默认旋转的中心是元素的中心点}$

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>rotate实现小三角旋转</title>
	</head>
	<style type="text/css">
		.box1{
			position: relative;
			width: 200px;
			height: 30px;
			line-height: 30px;
			background-color: antiquewhite;
			cursor: pointer;
		}
		/* ::after创建一个新的元素 */
		.box1::after{
			position: absolute;
			top: 6px;
			left: 78px;
			content: "";
			height: 10px;
			width: 10px;
			transform: rotate(45deg);
			border-right: 1px solid #000;
			border-bottom: 1px solid #000;
			transition: all 0.4s;
		}
		
		.box1:hover::after{
			transform: rotate(225deg);
		}
	</style>
	<body>
		<div class="box1">
			北京
		</div>
	</body>
</html>

2d转化中心点（transform-origin）
语法：

tansform-origin:x y
注意：
$\color{red}{1.注意后面的参数x和y用空格隔开}$
$\color{red}{2.默认转换中心点是元素的中心点（50\%，50\%）}$
$\color{red}{3.还可以给x，y设置像素或者方位名词（top \ bottom \ left \ right \ center）}$

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>rotate实现小三角旋转</title>
	</head>
	<style type="text/css">
		.box1{
			width: 200px;
			height: 200px;
			margin: 100px auto;
			background-color: antiquewhite;
			cursor: pointer;
			overflow: hidden;
		}
		.box1::before{
			display: block;
			content: "123";
			height: 100%;
			width: 100%;
			background-color: #FFFF00;
			transform-origin: left bottom;  /*以左下角为旋转原点*/
			transform: rotate(90deg);
			transition: all 0.5s;
		}
		.box1:hover::before{
			transform-origin: left bottom;  /*以左下角为旋转原点*/
			transform: rotate(0deg);
		}
		
	</style>
	<body>
		<div class="box1">
		</div>
	</body>
</html>

（3）缩放scale

1.语法

transform:scale(x,y)

2.注意
其中x与y用逗号分隔
$\color{red}{1. transform:scale(1,1)表示宽和高都放大一倍，也就是没放大}$
$\color{red}{2. transform:scale(2,2)表示1宽和高都放大了2倍}$
$\color{red}{3.transform:scale(2)只写一个参数，第二个和第一个一样}$
$\color{red}{4.transform:scale(0.5,0.5)缩小}$
$\color{red}{5.scale缩放的最大优势，可以设置转换中心点缩放，而且不会影响其他的盒子}$

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.main{
				position: absolute;
				top: 50%;
				left: 50%;
			}
			li{
				float: left;
				height: 30px;
				width: 30px;
				line-height: 30px;
				text-align: center;
				list-style: none;
				border: 1px solid black;
				margin-left: 10px;
				border-radius: 50%;
				transition: all 1s;
				cursor: pointer;
			}
			li:hover{
				transform: scale(1.2);
			}
		</style>
	</head>
	<body>
		<div class="main">
			<ul>
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
			</ul>
		</div>
	</body>
</html>

（4）2D转换的综合写法
注意：
1.同时使用多个转换，其格式为transform:translate() rotate() scale()等
2.其顺序会影响转换的效果（先旋转会改变坐标轴方向）
$\color{red}{3.当同时又位移和其他属性的时候，记得要将位移放在最前面}$

五.动画

制作动画分为两步：
1.先定义动画。2.再使用动画
使用@keyframe定义动画

@keyframes 动画名称{
	0%{
	}
	100%{
	}
}

动画序列

0%是动画的开始，100%是动画的完成，这样的规则就是动画序列
在@keyframes中规定某项css样式，就能创建由当前样式逐渐改为新样式的动画效果
动画使元素从一种样式逐渐变化为另一种样式的效果，可以改变任意多的样式任意多的次数
用百分比来规定变化发生的时间，或者是from和to，相当于0%和100%

（2）元素使用动画

div{
	width:200px;
	height:200px;
	background-color:red;
	margin:100px auto;
	/*调用动画*/
	animation-name:动画名称;
	/*持续时间*/
	animation-duration:持续时间;
}

动画常见的属性

属性	描述
@keyframes	规定动画
animation	所有动画属性的简写属性，除了animation-play-state属性
animation-name	规定@keyframes动画名称
animation-duration	规定动画完成一个周期所花费的秒或毫秒默认是0（必须的）
animation-timing-function	规定动画的速度曲线，默认是‘ease’
animation-delay	规定动画何时开始，默认是0
animation-iteration-count	规定动画被播放的次数，默认是1，还有infinite
animation-direction	规定动画是否在下一周期逆向播放，默认是normal，alternate是逆播放
animation-play-state	规定动画是否运行或暂停，默认是running还有push
animation-fill-mode	规定动画结束后状态，保持forwarfs回到起始backwards

动画简写：

animation: 动画名称持续时间运动曲线何时开始播放次数是否反向动画起始或结束的状态

注意：1.暂停动画：animation-play-state：puased；经常和鼠标经过等其他配合使用
2.想要动画直接走回来，而不是直接跳到起始位置animation-direction:alternate
3.盒子动画结束后，停在结束位置animation-fill-mode:forwards

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>rotate实现小三角旋转</title>
	</head>
	<style type="text/css">
		body{
			height: 100vh;
			background-color: #FAEBD7;
		}
		.box1{
			position: relative;
			width: 5px;
			height: 5px;
			background-color: blue;
			margin: 200px auto;
			border-radius: 50%;
		}
		div[class^="pulse"]{
			width: 15px;
			height: 15px;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			box-shadow: 0 0 12px blue;
			border-radius: 50%;
		}
		.pulse1{
			animation: move 1s linear infinite;
			transition: all 1s;
		}
		.pulse2{
			animation: move 1s linear 0.5s infinite;
			transition: all 1s;
		}
		.pulse3{
			animation: move 1s linear 0.5s infinite;
			transition: all 1s;
		}
		
		@keyframes move{
			0%{
				/* 为什么不用scale进行放大,因为scale会把box-shadow也放大 */
				/* transform:translate(-50%,-50%) scale(1); */
			}
			50%{
				/* transform: translate(-50%,-50%) scale(2); */
				width: 30px;
				height: 30px;
				opacity: 1;
			}
			100%{
				/* transform: translate(-50%,-50%) scale(3); */
				width: 60px;
				height: 60px;
				opacity: 0;
			}
		}
	</style>
	<body>
		<div class="box1">
			<!-- 扩散的圆圈 -->
			<div class="pulse1">
			</div>
			<div class="pulse2">
			</div>
			<div class="pulse3">
			</div>
		</div>
		
	</body>
</html>

在这里插入图片描述
(3)速度曲线
animation-timing-function：规定动画的速度曲线，默认是ease

值	描述
linear	动画是匀速的
ease	默认，动画以低速开始，然后加快，在结束前变慢
ease-in	动画以低速开始
ease-out	动画以低速结束
lease-in-out	动画以低速开始和结束
step()	指定了时间函数中的间隔数量（步长）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>step()打字机效果</title>
	</head>
	<style type="text/css">
		body{
			height: 100vh;
			background-color: #FAEBD7;
		}
		.box1{
			height: 20px;
			font-size: 12px;
			white-space: nowrap;
			overflow: hidden;
			/* 分8步,一步打一个字 */
			animation: move 4s steps(7);
		}
		@keyframes move{
			0%{
				width: 0;
			}
			100%{
				width: 84px;
			}
		}
	</style>
	<body>
		<div class="box1">
			<!-- 扩散的圆圈 -->
			你好这里是北极
		</div>
		
	</body>
</html>

6.3D转换

（1）三维坐标系
在这里插入图片描述
(2)3D移动translate3D

transform:translateX(100px) 仅在x轴移动
transform:translateY(100px) 仅在y轴移动
transform:translateZ(100px) 仅在z轴移动
transform：transla3d（x,y,z）分别指定要移动轴的方向距离

(3)透视perspective

表示视点距离屏幕的长短。视点，用于模拟透视效果时人眼的位置。透视可以将一个2d平面，在转换过程中，呈现3d效果
$\color{blue}{比较通用的距离是设置为800px}$
$\color{red}{ ** 透视写在被观察元素的父盒子上面 **}$

语法：

.class{
perspective:800px;
}

(4)3D旋转rotate3d
让元素在三维平面内沿着x轴、y轴或z轴旋转
语法

transform:rotateX(45deg) 沿着x轴正方向旋转45度
transform：rotateY（45deg）沿着y轴正方向旋转45度
transform：rotateZ（45deg）沿着Z

注意：需要使用透视

如何判断旋转的正负向：左手定则

左手的手拇指指向 x 轴的正方向
其余手指的弯曲方向就是该元素沿着 x 轴旋转的方向

transform:rotate3d(x,y,z,deg)沿着自定义轴旋转deg为角度
x,y,z表示旋转轴的矢量，是标识是否沿该轴旋转，最后一个是旋转角度
transform:rotate3d(1,1,0,180deg)沿xy对角线旋转180度
transform:rotate3d(1,0,0,180deg)沿x轴旋转180度

7浏览器私有前缀

浏览器私有前缀为了兼容老版本的写法，比较新的浏览器无需添加
1.私有前缀

-moz-:代表firefox浏览器私有属性
-ms-：代表ie浏览器私有属性
-webkit-：代表safari、chrome私有属性
-o-：代表Opera私有属性

2.提倡的写法

-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
border-radius:!0px;

Spider_man_

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
css3学习一些效果（一）

文章目录一.css三角的做法二.溢出文字省略号显示三.css3实现过渡效果（transition）一.css三角的做法原理将盒子设置为宽高为0，border值设置，每个边就有三角的效果。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body{ margi
复制链接

扫一扫

专栏目录