Web——day04——css2D

最新推荐文章于 2024-06-13 10:27:10 发布
最新推荐文章于 2024-06-13 10:27:10 发布
阅读量61 收藏
点赞数
分类专栏： Web学习 文章标签： css3 web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45792414/article/details/119219745
版权

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

子曰礼
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
移动web——学习笔记整理
Thaley的博客
01-22 3151
学习笔记整理——移动web(黑马的)
文件上传漏之Durian靶场练习——渗透day13
qq_62716256的博客
09-14 1793
文件上传漏之Durian靶场练习——渗透day13
Web——day03——CSS
weixin_45792414的博客
07-28 58
自定义字体 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> /*自定义字体*/ @font-face { font-family:"myfont01"; /*字体的名字，自定义*/ src: url(fonts/icomoon.ttf); /*文件夹名*/
HTML5+CSS——Day4
weixin_51273795的博客
07-20 208
今天学习HTML5新元素
黑马程序员——移动Web——day01
qq_56444564的博客
02-14 890
作用：为元素添加动态效果，一般与过渡配合使用概念：改变盒子在平面内的形态（位移、旋转、缩放、倾斜）平面转换也叫 2D 转换，属性是transform。
初学Web笔记 css day09
qq_40185402的博客
09-01 65
transform: rotateX(角度deg) 沿着x轴旋转。transform: rotateY(角度deg) 沿着y轴旋转。transform: translate(水平方向, 垂直方向)播放状态，默认是播放，running，暂停是paused。transform: translateX(水平方向)transform: translateY(垂直方向)transform: skew(水平方向, 垂直方向)transform: skewX(水平方向)transform: skewY(垂直方向)
2020年蓝旭工作室暑期前端培训班Day1——HTML5 & CSS3
weixin_44085543的博客
07-03 1786
HTML5新特性 语义化标签 article, section, header, footer, nav, aside等，无额外样式。 目的：便于清晰的展现页面结构，方便维护，有利于SEO，方便其他设备的解析 音视频 audio音频标签，video视频标签视频 使用video标签： <!-- controls开启暂停、播放等控件 --> <video width="320" height="240" controls> <source src="movie.mp4" t
给 Web 开发人员推荐的开源图形库 —— 2D/3D
weixin_33958366的博客
07-20 1295
2019独角兽企业重金招聘Python工程师标准>>> ...
廖雪峰webAPP实战——Day1-8总结 \ 剖析Day5
qq_43149373的博客
08-06 1308
廖雪峰webAPP实战——Day1-8总结过一遍 大家可能都卡在day5, 其中的web的框架真是让头疼，day4 还不容易搞明白了orm，没想到day5 还更加难，多了3个py文件，可以说是4个，其中app.py都差不多全改了。。。 过一遍 我们跟着代码跑一遍，程序开头是在app.py的 init（loop）函数。 #app.py async def init(loop): await ...
Oracle学习笔记——day04
09-02
在Oracle学习笔记的第四天，我们探讨了数据库管理和操作的一些核心概念，主要集中在DDL（数据定义语言）、DML（数据操作语言）、DCL（数据控制语言）以及事务管理。以下是对这些内容的详细阐述： ...
一起学Java——Day04.md
04-05
该资源为md格式，需下载typora可打开，该内容讲述的是Java中的循环结构，其中有while循环do-while循环以及for循环，还有break，conrinue两个跳转语句的区别以及Rondom产生随机数字的基本知识
一起学java——Day01.txt
04-03
从0开始一起学java，互帮互助 本文主要讲述变量，数据类型，Scanner类的应用以及printf()的相关知识
Oracle学习笔记——day01
09-02
Oracle数据库是世界上最流行的数据库管理系统之一，广泛用于企业级的数据存储和管理。在Oracle学习的第一天，我们主要关注了SQL语句，这是与Oracle交互的基础。SQL主要包括三种类型的语言：DML（数据操作语言）、DDL...
Oracle学习笔记——day02
09-02
在Oracle数据库的学习过程中，Day02涵盖了基础的SQL语句，主要包括数据表的创建、数据插入、查询以及多表之间的关联操作。以下是对这些知识点的详细解析： 1. 数据表创建： 在Oracle中，创建数据表是通过`CREATE ...
css3新增伪元素有哪些？
tianxianghuiwei的博客
06-13 561
这些伪元素允许开发者通过 CSS 控制页面上特定部分的样式和内容，例如添加装饰性内容或改变选中文本的样式。使用伪元素可以增强页面的视觉效果和交互性。CSS3 中引入了一些新的伪元素，用于向文档添加特定样式或内容。
Three.js的渲染器：WebGLRenderer、CSS3DRenderer、SVGRenderer
2401_82881178的博客
06-13 509
在Three.js中，渲染器（Renderer）是用于将3D场景呈现到屏幕上的组件。它负责处理3D对象的渲染、光照、阴影、材质等方面的细节，最终将场景呈现为图像或动画。渲染器是连接Three.js场景和浏览器窗口之间的桥梁，它将场景中的3D对象转换为2D图像，然后显示在屏幕上。1. 将3D场景中的几何体、光源、材质等元素转换为屏幕上的像素，实现真实感的渲染效果。2. 处理视图投影、相机视角等方面的计算，确保场景在屏幕上的正确呈现。3. 处理光照、阴影等光学效果，使得3D场景具有逼真的外观。
ChatGPT原理1-3
06-20
ChatGPT原理1-3
aiohttp-3.4.0b2.tar.gz
最新发布
06-20
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
jQuery插件之——简单日历
05-23
} else if (day > daysInMonth) { html += '<td></td>'; } else { html += '<td>' + day + '</td>'; day++; } } html += '</tr>'; if (day > daysInMonth) { break; } } html += '</table>'; var ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值