前端笔记3

最新推荐文章于 2024-08-21 14:09:37 发布

灯莘

最新推荐文章于 2024-08-21 14:09:37 发布

阅读量26

点赞数

文章标签：前端笔记 css

本文链接：https://blog.csdn.net/2201_75867247/article/details/133531424

版权

一、2D转换可以对元素进行移动、缩放、转动、拉长或拉伸
（1）、基本语法transform
（2）、transform-origin 设置旋转的中心点
示例：

<body>
 <button type="button" onclick="func1()">按钮1</button>
 <div class="box1">123123123</div>
 </body>
 <script type="text/javascript">
 var box1 = document.getElementsByClassName("box1")[0];
 function func1(){
          box1.style.transformOrigin = "150% 0%";
}
 </script>

（3）、正数顺时针方向，反而负值就是逆时针
（4）、单独设置某一个轴值，只会作用最后一个

1、translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
（1）、 translate(X,Y) translateX(X) translateY(Y)
示例：

<body>
 <button type="button" onclick="func1()">按钮1</button>
 <button type="button" onclick="func2()">按钮2</button>
 <div class="box1">123123123</div>
 </body>
 <script type="text/javascript">
 var box1 = document.getElementsByClassName("box1")[0];
 function func1(){
          box1.style.transform = "translate(200px,200px)";
          box1.style.transform = "translateX(300px)";
			box1.style.transform = "translateY(100px)";
}
 function func2(){
          box1.style.transform = "translate(0px,0px)";
          box1.style.transform = "translateX(0px)";
			box1.style.transform = "translateY(300px)";
}
 </script>

2、 rotate(角度deg)方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。
（1）、rotate() rotateX() rotateY()
示例：

<body>
 <button type="button" onclick="func1()">按钮1</button>
 <button type="button" onclick="func2()">按钮2</button>
 <div class="box1">123123123</div>
 </body>
 <script type="text/javascript">
 var box1 = document.getElementsByClassName("box1")[0];
 function func1(){
         box1.style.transform = "rotate(30deg)";
         box1.style.transform = "rotateX(30deg)";
		 box1.style.transform = "rotateY(60deg)";
}
 function func2(){
    box1.style.transform = "rotateY(90deg)";
}
 </script>

3、 scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数：
（1）、scale(宽度倍数,高度倍数) scaleX(宽度倍数) scaleY(高度倍数)
示例：

<body>
 <button type="button" onclick="func1()">按钮1</button>
 <button type="button" onclick="func2()">按钮2</button>
 <div class="box1">123123123</div>
 </body>
 <script type="text/javascript">
 var box1 = document.getElementsByClassName("box1")[0];
 function func1(){
         box1.style.transform = "scale(0.5,1)";
         box1.style.transform ="scaleX(1.5)";
}
 function func2(){
 box1.style.transform = "scale(1,1)";
  box1.style.transform ="scaleY(1.5)";
}
 </script>

4、skew(X,Y): 包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。
(1)、skewX(X) skewY(Y)
示例：

<body>
 <button type="button" onclick="func1()">按钮1</button>
 <button type="button" onclick="func2()">按钮2</button>
 <div class="box1">123123123</div>
 </body>
 <script type="text/javascript">
 var box1 = document.getElementsByClassName("box1")[0];
 function func1(){
      box1.style.transform = "skew(30deg,90deg)";
      box1.style.transform = "skewX(30deg)";
}
 function func2(){
box1.style.transform = "skew(90deg,60deg)";
box1.style.transform = "skewY(90deg)";
}
 </script>

5、matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能，matrix(宽度缩放,Y倾斜,X倾斜,高度缩放,X平移,Y平移)方法和2D变换方法合并成一个。 matrix()
示例：

<body>
 <button type="button" onclick="func1()">按钮1</button>
 <div class="box1">123123123</div>
 </body>
 <script type="text/javascript">
 var box1 = document.getElementsByClassName("box1")[0];
 function func1(){
     box1.style.transform = "matrix(1,0,0,1,0,1)";
}
 </script>

二、过渡（transition: css过渡样式过渡时间运动曲线开始时间）例如：transition: all 5s linear 2s;
1、transition-property 指定CSS属性的name，transition效果。
2、transition-duration transition效果需要指定多少秒或毫秒才能完成。
3、transition-timing-function 指定transition效果的转速曲线。
4、linear 匀速。
5、ease 规定慢速开始，然后变快，然后慢速结束的过渡效果。
6、ease-in 规定以慢速开始的过渡效果。
7、ease-out 规定以慢速结束的过渡效果。
8、ease-in-out 规定以慢速开始和结束的过渡效果。
9、transition-delay 定义transition效果开始的时候。

三、CSS3动画（要创建 CSS3 动画，你需要了解 @keyframes 规则）
1、animation: 选择器的关键名称动画时间运动曲线开始的时间播放次数，是否反复播放是否运用最后一帧动画的样式是否暂停或播放。
示例：

<style type="text/css">
.box1 {
			width: 200px;
			height: 200px;
			background-color: red;
			animation: move 3s linear 0s 1 normal forwards;
			}
@keyframes move{
	 from{
			width: 200px;
			background-color: red;
			}
	   to{
			width: 500px;
			height: 500px;
			background-color: orange;
			}
			}
</style>
<body>
<div class="box1">11111111</div>
</body>

2、animation-name 指定要绑定到选择器的关键帧的名称
3、animation-duration 动画指定需要多少秒或毫秒完成
4、animation-timing-function 设置动画将如何完成一个周期
5 animation-delay 设置动画在启动前的延迟间隔。
6、animation-iteration-count 定义动画的播放次数。
7、animation-direction 指定是否应该轮流反向播放动画。
8、animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
9、animation-play-state 指定动画是否正在运行或已暂停。
示例：

<body>
 <button type="button" onclick="func1()">按钮1</button>
 <button type="button" onclick="func2()">按钮2</button>
 <div class="box1">11111111</div>
 </body>
  <script type="text/javascript">
  var box1= document.getElementsByClassName("box2")[0];
		function func1(){
		box1.style.animationPlayState ="paused";
		}
		function func2(){
		box1.style.animationPlayState ="running";
		}
  </script>

灯莘

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
前端笔记3

1、animation: 选择器的关键名称动画时间运动曲线开始的时间播放次数，是否反复播放是否运用最后一帧动画的样式是否暂停或播放。8、animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。3、transition-timing-function 指定transition效果的转速曲线。6、animation-iteration-count 定义动画的播放次数。6、ease-in 规定以慢速开始的过渡效果。
复制链接

扫一扫