有用的css3特性——过渡和2D变换
时间：2023-03-30 23:19:22
CSS
css3中有很多非常有用的特性，今天总结一下动画相关的特性，包括过渡和2D变换。首先，让我们介绍一下过渡。转换是更改期间的缓冲区。如果没有过渡，当元素的位置和大小发生变化时，变化会瞬间完成。添加过渡后，将显示更改过程。出来。例如，在下面的gif中，当鼠标移入框内时，我们想将框的宽度和高度加倍，并改变颜色。没有过渡，过渡在用户体验上明显不同。transition的写法也很简单，只需要在change的基础上加一个transition即可。transition:transition属性transitiontimetransitioncurvedelaytime(1)transition属性，可以设置width、height、transform等。当有多个transition效果时，可以用逗号分隔，或者用all表示所有效果（必填）(2)Transitiontime，单位s，表示需要多长时间才能达到变化的效果(必填)(3)Transitioncurve，默认ease，即逐渐减速，还有下面的选项选择linearUniformease-inAccelerateease-outDecelerateease-in-out先加速再减速(4)延迟时间，表示延迟多长时间执行过渡效果，默认为0s，即不延迟，你可以自定义过渡曲线不容易理解。这里演示了ease、ease-in、ease-out和ease-in-out之间的区别。理解了转场的语法后，可以这样定义如上图的转场效果，创建一个Emptydiv标签，然后为其定义宽高背景色。框{宽度：100px;高度：100px；背景色：粉色；//这里用来定义transition，默认内容可以省略，实际transition:all1sease0stransition:all1s;}.box:hover{width:200px;高度：200px；background-color:skyblue}除了改变宽高，如果我们需要移动元素的位置怎么办？有两种方法可以帮助我们达到这种效果。以下示例在1秒后在x和y轴上移动100px。方法一，直接修改top/left的值//csscode.box{position:relative;顶部：0；左：0；背景色：粉色；高度：100px；宽度：100px；过渡：全1；//增加过渡，让变化不那么突兀}//html代码
//js代码constbox=document.getElementsByClassName('box')[0]setTimeout(()=>{box.style.left="100px"box.style.top="100px"},1000)方法二，通过css3提供的2D变换属性，transform，通过translate移动元素//翻译语法transform:translate(x,y)//括号中的两个属性分别是x轴方向和y轴方向//只需要在x轴上移动transform:translateX(x-axisdistancetomove)//只需要在y轴上移动transform:translateY(movingdistanceonthey-axis)//移动宽度和高度的一半，可以用实现纵横居中变换：translate(50%,50%)需要注意的还有，x轴向右的方向为正方向，y轴向下的方向为上面的实现方法要求//css代码.box{transform:translate(0,0);背景色：粉色；高度：100px；宽度：100px；过渡：全1；//增加过渡，使变化不那么突兀}//html代码
//js代码constbox=document.getElementsByClassName('box')[0]setTimeout(()=>{box.style.transform="translate(100px,100px)"},1000)既然有了移动的方式，那css3为什么要增加新的移动方式，这两者有什么区别呢？要理解它们的区别，首先要理解重绘和重排的概念。以前绝对定位/相对定位的方式移动元素会导致浏览器重绘和重排，而css3新的transform只会重绘而不会重排，我们可以通过谷歌浏览器的性能观察到这种差异。浏览器布局和绘制需要一定的时间。大量的重绘和重排会影响程序的性能，所以如果没有兼容性需求，我们可以通过translate改变元素的位置。那么翻译可以应用于什么样的场景呢？试想一下，在一些PC端的电商项目中，当鼠标移入某个商品时，该商品可能会出现上下移动的动画，说明你的鼠标正在移入其中，如果鼠标移开，该项目返回到其原始位置。图形效果如下。实现的代码可以结合transform移动和transition实现转场效果。img{边距：100px；宽度：200px；transition:transform.6s}img:hover{transform:translate(0,50px);}transform还有两个很有用的属性，就是scale和rotate，先来说说scale缩放。如果没有缩放，我们想让一个元素变大2倍，直接改变元素的宽高就可以了。与直接修改宽高相比，缩放不会像上面的translate那样引起重排，还有一点就是不需要设置绝对定位，不会挤压其他元素，会沿着自己缩放center，并且这个缩放的中心位置也可以通过transform-origin自己设置，区别如下图。scale缩放transform的语法：scale(x,y)//x和y分别表示横轴和纵轴的缩放比例，用数字表示，如0.81.2transform:scale(rate)//只写一、表示纵轴的比例尺可以和横轴的比例尺一样用什么？例如，当我们需要对数据进行分页时，鼠标移到哪个按钮上，就会放大显示，如下图所示。实现代码如下//cssul{display:flex;}li{list-style-type:none;宽度：30px；高度：30px；行高：30px；边框：1px实心#000；边界半径：50%；文本对齐：居中；边距：10px；游标：指针；transition:transform.1s;}li:hover{transform:scale(1.3)}//html
最后一个transform的属性是rotation，也是一个很有用的属性.语法如下transform:rotate(deg)//deg表示旋转的度数。使用rotate可以模拟各个方向的箭头。展开或折叠时，箭头方向发生变化实现代码如下div{position:relative;边框：1px实心#000；宽度：260px；高度：30px；margin:100pxauto;}div::after{position:absolute;顶部：6px；右：块10px:;展示;内容：””;宽度：10px；高度：10px；border-right:1pxsolid#000;border-bottom:1pxsolid#000;变换：旋转（45度）；transition:all1s;}div:hover::after{变换：旋转（225度）平移（-6px，-4px）；//transform属性可以叠加使用}以上是transition和2D变化的结合使用，下一篇总结动画和3D变化的使用
