CSS高级

2021-11-20 22:35:30 阅读：184 来源： 互联网

标签：box rotate 2s 100px 高级 transform height CSS

1.transform()方法

通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标）和 top（y 坐标）位置参数：

1 transform: translate(100px,200px);   /*translate移动*/

transform-origin

transform-origin: 50% 0; /*X轴Y轴坐标,改变转的焦点*/

2.rotate()方法

rotate() 方法通过指定一个角度，改变了画布坐标和 Web 浏览器中的 <Canvas> 元素的像素之间的映射，使得任意后续绘图在画布中都显示为旋转的。它并没有旋转 <Canvas> 元素本身。注意，这个角度是用弧度指定的。

1  @keyframes move {
2             0%{
3                 transform: rotate(0);  }
4                 100%{
5                     transform: rotate(360deg);
6                 }
7         }

1  @keyframes fanZhuan {
2             from{
3                 transform: rotate(360deg);
4             }
5             to {
6                 transform: rotate(0);
7             }
8         }

3.animation属性

1  #div1{
2             width: 300px;
3             height: 300px;
4             margin: 100px auto 0;
5             background: lightcoral;
6             animation: move 2s linear 2s infinite; /* linear 匀速  infinite 无限的*/
7         }

4.transition属性

 1 #box{
 2             width: 475px;
 3             height: 308px;
 4             border: 5px solid red;
 5             margin: 100px auto 0;
 6             overflow: hidden;/*超出部分隐藏*/
 7         }
 8         #box>img{
 9             width: 100%;
10             height: 100%;
11             transition: all 2s;
12             /*all也可以改成transform*/
13             /*谁动给谁加时间*/
14         }
15         #box>img:hover{
16             transform: scale(1.2); /*放大倍数*/
17         }

标签：box,rotate,2s,100px,高级,transform,height,CSS
来源： https://www.cnblogs.com/luyanyan/p/15582856.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

CSS高级