web前端day5-----transform属性和动画

最新推荐文章于 2023-06-10 14:24:25 发布

OrdnAry

最新推荐文章于 2023-06-10 14:24:25 发布

阅读量790

点赞数

分类专栏：学习文章标签： css

本文链接：https://blog.youkuaiyun.com/OrdnAry/article/details/107431536

版权

学习专栏收录该内容

59 篇文章

订阅专栏

<!--
transform属性：调整元素在页面上的位置，大小，角度，倾斜度。（自由变换）
自由变化中心点 transform-origin属性：默认 center center
可取值：方向词 left/right/top/bottom  数字px  百分比
1.位置：transform：translate(x)(x,y)  translateX（数字px）translateY（数字px）
	  取值 数字px 为正 向右向下 为负 向左向下
	  调整前位置依旧占据（没有脱离文档流），调整后位置脱离文档流
	  相对定位：position:relative 效果等同（微调做效果）
2.大小：transform:scale(value)取值 数字 默认值为1 value<1 等比缩小 value>1 等比放大 scaleX（数字） scaleY（数字）；
	  做效果 图片hover放大缩小：可视化窗口中放张图片，鼠标悬停，图片放大缩小
	  1.图片放大后超出可视化窗口部分，看不到
		溢出隐藏：子元素尺寸超出父元素尺寸，会出现溢出，默认可见的
				  不可见 overflow:hidden(父元素设置)
	  2.图片放大看不到过程，只能看到结果 使用过渡属性
过渡属性：transition：all 时间 linear
作用：当样式属性值发生变化，利用过渡可以看到过程（可取值为数值型）
注意：属性变化前和变化后设置过渡属性有区别
	  变化前设置过渡属性，全阶段都有过渡效果
	  变化胡设置过渡属性，变化前阶段有过渡效果，变化后阶段没有过渡效果
-->
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
	#d1{
		width:200px;
		height:200px;
		background-color:red;
		transform:translate(200px,400px);
/*		transform:translate(0px,100px);*/
/*		transform:translate(200px);*/
/*		position:relative;*/
/*		left:0;*/
/*		top:100px;*/
		
	}
	#d2{
		width:200px;
		height:200px;
		background-color:green;
/*		transform:translate(200px) scale(2);*/
		transform-origin:left bottom;
		transform:scale(2);
	}
  </style>
 </head>
 <body>
  <div id="d1"></div>
  <div id="d2"></div>
 </body>
</html>

在这里插入图片描述

<!--
transform属性： 和坐标轴关联  2D/3D自由变换
4.倾斜：skew(数字deg)	deg角度单位
  定义一个值，看上去X轴拉伸变长，实际上Y轴旋转和倾斜
5.角度  rotate(数字deg)  默认效果2D变换 等同于rotateZ()
		rotateX rotateY  围绕坐标轴旋转
动画效果animation属性：
1.定义动画
@keyframes 动画名称 {
	关键帧
	from{样式声明}   0%  {样式声明}
	to  {样式声明}   25%
				     50%
				     100%{样式声明}
}
2.调用动画
animation：动画名称 动画时长 动画播放模式(linear) 动画播放次数(默认1 infinite)
-->
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
	#d1{
		width:200px;
		height:200px;
		background-color:red;
		transform:skewY(-45deg);
/*		transform-origin:left top;*/
		}
	#d2{
		width:200px;
		height:200px;
		background-color:green;
		transform:rotateX(45deg);
/*		transform-origin:left top;*/
		}
/*动画效果*/
	#d4{
	width:200px;
	height:200px;
	background-color:blue;
	animation:dh 2s linear  infinite/* 调用动画 */
}
/* 定义动画 */
@keyframes dh{
	0%	{transform:translateX(0px);  background-color:blue;}
	50% {transform:translateX(400px);background-color:red;}
	100%{transform:translateX(0px);  background-color:blue;}
}
  </style>
 </head>
 <body>
  <div id="d1"></div>
  <div id="d2"></div>
  <div id="d4"></div>
 </body>
</html>