【无标题】

最新推荐文章于 2022-10-19 20:17:27 发布

萧筱~

最新推荐文章于 2022-10-19 20:17:27 发布

阅读量189

点赞数

文章标签： html css css3

本文链接：https://blog.csdn.net/qqrr918812/article/details/123341094

版权

css3 2D/3D转换

transform单独设置x或者y时，不能一起单个设置，否则只会执行最后设置轴的移动
1. transform: translate(20px,50px);移动的位置是沿x轴和y轴移动，两个值之间用逗号分隔，可以设置一个值，表示x轴移动,为正值时沿x轴和y轴的正直方向，负值为相反方向。
2. transform: rotate(30deg);必须使用角度单位deg;正直时为顺时针旋转，负值为相反方向
3. transform: scale(2,3);第一个参数缩放是x轴(宽度)第二个参数缩放是y轴(高度）
x轴为负值时，沿y轴翻转当前元素
y轴为负值时，沿x轴翻转当前元素
4. transform: skew(50deg,0deg);第一个值为x轴，第二个值为y轴，单位是角度deg
正直为顺时针倾斜，负值则相反，倾斜会拉伸当前元素大小
5. matrix 2D转换简写形式
transform: matrix(1,2,-2,1,2,1);不需要添加单位
x缩放，y轴倾斜，x轴倾斜，y轴缩放，x轴平移，y轴平移
transform-origin: 10px 50px;改变旋转中心点，可以为上下左右
transform-style: preserve-3d;呈现3D空间
perspective: 200px;设置3D透视图，值越小，成像越大
backface-visibility:visible;默认状态能看见反面，
设置为hidden反面内容及颜色不能看见

过渡

transition:css属性名称 过渡的时间(s,ms,1s=1000ms) 运动的曲线 开始等待的时间
	 ease	规定慢速开始，然后变快，然后慢速结束的过渡效果
	 ease-in	规定以慢速开始的过渡效果
	 ease-out	规定以慢速结束的过渡效果
	 ease-in-out	规定以慢速开始和结束的过渡效果

动画

 @keyframes创建一个动画
	 创建动画可以使用form...to代表0%和100%
	  animation：name duration timing-function 
	  delay iteration-count  direction fill-mode play-state简写形式 
	 animation-name:name ;设置动画名称
	 animation-duration: 2s;设置动画运动的时间
	 animation-fill-mode:forwards动画停止的位置
									 forwards停止在最后一帧动画
									 backwards停留在第一帧动画
									 both最后运动的位置，就是停留的位置
	 animation-delay: 2s;动画开始时间
	 animation-iteration-count: 2;动画执行的次数
											 infinite无限循环
	 animation-direction:normal; 
									 reverse动画反向播放
									 alternate奇数正向播放，偶数反向播放
									 alternate-reverse奇数反向播放，偶数正向播放
	 animation-play-state: paused;(轮播原理的暂停和播放)设置动画是否播放或暂停
										 paused暂停
										 running开始

视频音频

<!DOCTYPE html>
<html> 
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
		</style>
	</head>
	<body>
		<!-- autoplay设置视频立马播放（加载完成以后）
		 controls设置播放的进度条和按钮等
		 width和height可以设+置视频播放器的宽度和高度，值可以带单位和不带单位
		 loop循环播放
		 muted设置视频播放时静音播放
		 poster设置视频播放的封面
		 preload页面加载时加载播放视频，如果出现autoplay，那么这个属性就会失效
		 -->
		
		<video src="mov_bbb.mp4" poster=""  width="800" height="" autoplay controls loop muted>
			<!-- <source src="myvideo.mp4" type="video/mp4"></source> -->
		</video>
		<audio  ></audio>
	</body>
</html>

input

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="text" />
		<input type="button" />
		<input type="password" />
		<input type="number" />
		<input type="color" />
		<input type="date" />
		<!-- datetime选择日期时间，只支持苹果和Opera -->
		<input type="datetime" />
		<!-- datetime-local选择日期时间,只支持谷歌，苹果和Opera -->
		<input type="datetime-local" />
		<input type="email" />
		<input type="month" />
		<!-- range可调节输入区域 -->
		<input type="range" max="10" min="5"/>
		<!-- search搜索域(多了可全部删除符号) -->
		<input type="search"/>
		<!-- tel电话，不兼容5大浏览器 -->
		<input type="tel"/>
		<!-- 打电话拨号的 -->
		<a href="" type="tel">543785769</a>
		<input type="time" />
		<input type="url" />
		<!-- week第几周 -->
		<input type="week" />
		<input type="submit" />
		<hr />
		<!-- disabled禁止 
		max，min通常使用在number类型或者range-->
		<input type="button" disabled="" />
		<!-- maxlength最大输入长度，通常与text和password
		minlength最小输入长度 -->
		<!-- pattern设置正则表达式验证
				 readonly只读模式
				 required设置必填项
				 size设置input的显示宽度，默认值为20
				 step设置number字符间隔为XX，默认间隔为1 -->
		<form action="" method="">
			<input type="text" minlength="5" />
			<input type="submit"  />
		</form>
	</body>
</html>

萧筱~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【无标题】

css3 2D/3D转换transform单独设置x或者y时，不能一起单个设置，否则只会执行最后设置轴的移动1. transform: translate(20px,50px);移动的位置是沿x轴和y轴移动，两个值之间用逗号分隔，可以设置一个值，表示x轴移动,为正值时沿x轴和y轴的正直方向，负值为相反方向。2. transform: rotate(30deg);必须使用角度单位deg;正直时为顺时针旋转，负值为相反方向3. transform: scale(2,3);第一个参数缩放是x轴(宽度)第
复制链接

扫一扫