# web前端html和css笔记2&&代码

最新推荐文章于 2024-10-04 21:00:38 发布

爱喝橙汁的兔兔～

最新推荐文章于 2024-10-04 21:00:38 发布

阅读量156

点赞数

分类专栏： web前端文章标签：前端

本文链接：https://blog.csdn.net/weixin_46039828/article/details/127825823

版权

web前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

web前端html和css笔记

文章目录

web前端html和css笔记
一、过渡

一、过渡

1. 过渡的功能

用于设置元素从一个状态变化到另一个状态的变化方式

2. 过渡的属性

transition-property: all; 参与过渡属性
transition-duration: 5s; 过渡完成时间
transition-delay: 1s; 延迟时间
transition-timing-function: cubic-bezier(0.96, 0.14, 0.19, 0.96); 过渡方式
transition：后面跟着四个参数，按顺序分别是上面1~4.
能够参与过渡的属性：
文本颜色字体大小盒子尺寸背景色内外边距边框定位位置 .

3. 例子1

实现在鼠标移入时改变块盒子的背景颜色和大小。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css过渡练习1</title>
		<style>
			#box{
				width:200px;
				height: 200px;
				background-color: red;
				
				/* 过渡的属性*/
				
				transition-property: all;
				/* all 所有css样式属性*/
				transition-duration: 5s;
				transition-delay: 1s;
				transition-timing-function: cubic-bezier(0.96, 0.14, 0.19, 0.96);
				
				/* transition: all 1s linear; */
			}
			#box:hover {
				background-color: darkblue;
				width: 500px;
				height: 500px;
			}
		</style>
	</head>
	<body>
		<div id="box">
			这是一个盒子
		</div>
	</body>
</html>

4. 例子2

实现鼠标移入时改变登录按钮的颜色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css过渡练习1</title>
		<style>
			button {
				width: 140px;
				height: 40px;
				background-color: #00008B;
				color: #FFF;
				cursor: pointer;
				
				transition: all .5s cubic-bezier(0.96, 0.14, 0.19, 0.96);
			}
			
			button:hover {
			
				background-color: red;
			
			}
			
			
			/*  */
		</style>
	</head>
	<body>
		<button>登录按钮</button>
	</body>
</html>

5. 例子3

鼠标移入后盒子变圆角。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css过渡练习1</title>
		<style>
			/* 能够参与过渡的属性
			  
			     文本颜色  字体大小   盒子尺寸  背景色  内外边距 边框  定位位置 .
			  
			  */			
			.box {
				position: relative;
				width: 100px;
				height: 100px;
				background-color: red;
				transition: all 1s linear;
			}
			
			.box:hover {			
				/* 开启过渡之后圆角从0渐变到50%圆角，会变成圆 */
				border-radius: 50%;
				/* 设置过渡之后top从0渐变到20 */
				margin-top: 20px;
			}

		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
	
</html>

6. 例子4

设置阴影：内外阴影(默认外阴影 inset设置内阴影) 1水平偏移值 2垂直偏移值 3模糊半径 4阴影大小 5阴影背景颜色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css过渡练习1</title>
		<style>
			/* 能够参与过渡的属性			  
			文本颜色  字体大小   盒子尺寸  背景色  内外边距 边框  定位位置 
			*/			
			.content {
				width: 234px;
				height: 300px;
				background-color: #FFF;
				margin: 0 auto;
				/* 内外阴影(默认外阴影  inset设置内阴影) 1水平偏移值   2垂直偏移值  3模糊半径  4阴影大小  5阴影背景颜色*/
				/* box-shadow:inset  -10px -10px 100px 10px #00008B ; */
				transition: all .5s linear;
			}
			.content:hover {
				/* 向上平移 */
				margin-top: -10px;
				/* 设置元素阴影 */
				box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
			}

		</style>
	</head>
	<body>
		<div class="content">
			这是一句简单的文案
			这是一句简单的文案
			这是一句简单的文案
			这是一句简单的文案
			这是一句简单的文案
			这是一句简单的文案
		</div>
	</body>
	
</html>

7. 例子:阴影

一个好看的圆

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css过渡练习1</title>
		<style>
			.box-2 {
				width: 100px;
				height: 100px;
				margin: 0 auto;
				/* 50%呈现圆的形态 */
				border-radius: 50%;
				background-color: transparent;
				/* 设置多个阴影使用逗号分隔 */
				box-shadow: 0 -20px 10px red,
							-20px 0 10px blue,
							20px 0 10px orange,
							0 20px 10px hotpink;
			}
		</style>
	</head>
	<body>
		<br />
		<br />
		<div class="box-2"></div>
	</body>
	
</html>

8. 例子：文字阴影

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css过渡练习1</title>
		<style>
			.text {

				font-size: 100px;
				text-align: center;
				font-weight: bold;
				letter-spacing: 30px;
				color: #FFFFFF;
				transition: all .5s;
			}

			.text:hover {
				/* 水平偏移值  垂直偏移值  模糊半径  阴影颜色*/
				text-shadow: 5px 5px 0px rgba(0, 0, 0, .3),
					-5px -5px 2px orange;
			}
		</style>
	</head>
	<body>
		<br />
		<br />
		<div class="text">
			深圳大学
		</div>

	</body>

</html>