CSS教程

Web——day04——css2D

本文主要是介绍Web——day04——css2D,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

2D:默认向右为正方向,顺时针为旋转方向
向下的三角旋转180°到向上

仓鼠转圈

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			img{
				width: 120px;
				border: 3px solid pink;
				border-radius: 50%;
			}
			img:hover{
				transition: all 1s;
				transform: rotate(360deg);
			}
		</style>
	</head>
	<body>
		<img src="img/pic.jpg" />
	</body>
</html>

代码运行结果:
在这里插入图片描述
在这里插入图片描述

三角旋转

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>三角旋转</title>
		<style>
			.box{
				width: 300px;
				height: 60px;
				border: 2px solid;
			}
			/*垂直的三角*/
			.box::after{
				content: "";
				display: block;
				width: 15px;
				height: 15px;
				
				border-right: 3px solid red;
				border-bottom: 3px solid red;
				transform: translate(260px,20px) rotate(45deg);
			}
			.box:hover::after{
				transform: translate(260px,20px) rotate(225deg);
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>

代码的运行结果:
在这里插入图片描述
在这里插入图片描述

长方形旋转

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				height: 40px;
				width: 300px;
				border: 2px solid;
				/* transform-origin: left top; */
				transform-origin: 0 0;/*旋转中心点:沿左上角进行旋转,同上*/
			}
			div:hover{
				transition: all 1s;
				transform: rotate(360deg);
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

代码运行结果:
在这里插入图片描述

图片放大

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 533px;
				height: 300px;
				background-color: #FFC0CB;
				margin: 100px auto;/*中心放大*/
				overflow: hidden;
			}
			div:hover img{
				transition: all 0.5s;
				transform: scale(1.2,1.2);/*缩放1,1是它本身  放大不会影响下面的位置
				2,2是放大 0.2,0.2是缩小*/
				/*width: 400px; 
				height: 200px; *//*这种放大影响下面的位置*/
			}
			/*div>img{
				margin-left: 10px;
				margin-top: 15px;
			}*/
		</style>
	</head>
	<body>
		<div>
			<img src="img/移动城堡.jpg" />
		</div>
	</body>
</html>

代码运行结果:
在这里插入图片描述
请添加图片描述

自定义动画

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>自定义动画</title>
		<style>
			div{
				width: 100px;
				height: 100px;
				border: 2px solid;
				animation: mydh 3s 3;/*执行3s,然后执行三次,infinite是执行无数次*/
			}
			/*设置动画 红变绿变蓝*/
			@keyframes mydh{
				0%{background-color: #FF0000;}
				50%{background-color: aqua;height: 200px; transform: translateX(50px);}
				100%{background-color: chartreuse}
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

在这里插入图片描述
在这里插入图片描述

Test——遮罩效果1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>遮罩效果</title>
		<style>
			.box{
				border: 1px solid black;
				width: 533px;
				height: 300px;
				color: red;
				overflow: hidden;
				
			}
			img{
				vertical-align: middle;/*垂直对齐方式*/
				display: block; /*行级元素改成块元素*/
				
			}
			/*遮罩层*/
			.box::after{
				content: "移动城堡";
				width: 533px;
				height: 300px;
				display: block;
				background-color: rgba(0,0,0,0.2);
				/*旋转中心点:原图左下角*/
				transform-origin: left top;
				transform: translateX(300px) rotate(90deg);
				
			}
			/*悬停box块,遮罩层设置效果 不能乱加括号*/
			.box:hover::after{
				transition: all 1s;
				transform: translateY(-300px) rotate(0deg);
			}
		</style>
	</head>
	<body>
		<div class="box">
			<img src="img/移动城堡.jpg" />
			<!-- <div class="mask"></div> -->
		</div>
	</body>
</html>

在这里插入图片描述

Test——遮罩效果2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>遮罩效果</title>
		<style>
			.box{
				border: 1px solid black;
				width: 533px;
				height: 300px;
				color: red;
				overflow: hidden;
			}
			img{
				vertical-align: middle;/*垂直对齐方式*/
				display: block; /*行级元素改成块元素*/
				position: relative;
				transform: translateY(-300px);
				z-index: 1;
			}
			/*遮罩层*/
			.box::before{
				position: relative;
				z-index: 2;  /*遮罩层的层级在上,必须与position连用*/
				content: "移动城堡";
				width: 533px;
				height: 300px;
				display: block;
				background-color: rgba(0,0,0,0.2);
				transform-origin: left bottom;
				transform: rotate(180deg);
				
			}
			.box:hover::before{
				transition: all 1s;
				transform: rotate(0deg);
			}
		</style>
	</head>
	<body>
		<div class="box">
			<img src="img/移动城堡.jpg" />
		</div>
	</body>
</html>

代码运行结果:
在这里插入图片描述

圆球放大

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 100px;
				height: 90px;
				border: 3px solid pink;
				border-radius: 50%;
				font-size: 50px;
				text-align:center;
				padding-top: 10px;
				margin: 50px;
				float: left;
			}
			div:hover{
				transition: all 0.5s;
				transform: scale(1.2,1.2);
			}
		</style>
	</head>
	<body>
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
		<div>5</div>
		<div>6</div>
		<div>7</div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.pagination{
				width: 600px;
				height: 50px;
				border: 1px solid;
				padding-top: 5px;
				padding-bottom: 5px;
			}
			.pagination>div{
				width: 40px;
				height: 40px;
				border: 2px solid pink;
				border-radius: 50%;
				/*文字居中 */
				text-align: center;
				/*2倍的行高=line-height=高度可以实现单行文字垂直*/
				line-height: 40px;
				float: left;
				margin-left: 32px;
				margin-top: 5px;
			}
			.pagination>div:hover{
				transition: all 0.5s;
				transform: scale(1.2,1.2);
			}
		</style>
	</head>
	<body>
		<div class="pagination">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
			<div>6</div>
			<div>7</div>
		</div>
	</body>
</html>

代码的运行结果:
请添加图片描述

作业:旋转遮罩效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>遮罩效果</title>
		<style>
			.box{
				border: 1px solid;
				width: 533px;
				height: 300px;
				overflow: hidden;
			}
			img{
				vertical-align: middle;/*垂直对齐方式*/
				display: block; /*行级元素改成块元素*/
			}
			/*遮罩层*/
			.box::after{
				content: "";
				width: 100%;
				height: 100%;
				display: block;
				background-color: rgba(0,0,0,0.2);
			}
			/*悬停box块,遮罩层设置效果*/
			.box:hover::after{/*不能乱加括号*/
				transition: all 1s;
				transform: translateY(-300px) rotate(360deg);
			}
		</style>
	</head>
	<body>
		<div class="box">
			<img src="img/移动城堡.jpg" />
			<!-- <div class="mask"></div> -->
		</div>
	</body>
</html>

代码运行结果:
请添加图片描述

——The End

这篇关于Web——day04——css2D的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!