devbox
2023面试高手
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

transition、transform、animation三个属性的使用与区别详解_transition: transform

作者：2023面试高手 | 2024-03-20 00:34:05

赞

踩

transition: transform

transition（过渡）

transform（变换）

animation（动画）

从三个属性就可以知道，tansition是一个过渡属性，就是一个属性从一个值过渡到另一个值，tansform变换，就是一个整体的位置（或整体大小）发生变换，animation动画，就是在一段时间内各种属性进行变化从而达到一个动画的效果。

 

一、transition（过渡）

W3C中对transition的描述是：css中的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑的以动画效果改变css的属性值。

 

transition主要包含四个值，transition-property（执行变换的属性），transition-duration（执行变换的持续时间）,transition-timing-function(变换的速率变化模式),transition-delay(变换延迟时间)。

 

（1）transition-property

这只属性是用来指定元素中哪一个属性执行过渡效果，取值有

  • none 没有属性需要执行过渡

  • all 所有属性发生变化（默认值）

  • indent 元素的某一个属性值

indent的取值覆盖了大部分的css取值，但是自适应的时候，宽度发生变化是不会触发的。

 

（2）transiton-duration

用来指定元素转换过程的持续时间，单位为s或ms，可以作用域任何元素。默认值为0

 

（3）transition-timing-function

transition-timing-function允许我们根据时间的推进去改变属性值的变换速率。主要有以下几个取值

  • ease（逐渐变慢）

  • linear（匀速）

  • ease-in（加速）

  • ease-out（减速）

  • ease-in-out（加速然后减速）

  • cubic-bezier（允许自定义一个时间曲线）

 

 

（4）transition-delay

用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多唱时间执行transition效果。

 

 

当我们想要改变不知一个css属性而是改变多个属性的时候，只要把几个transition的声明串在一起，用逗号分隔开，然后定义各自的效果。

 

因为transition-duration和transition-delay都是时间值，所以一定要把duration的值放在delay的前面。

 

 

transition的连写

transition: <property> <duration> <animation type> <delay

 

因为transition最早是有由webkit内核浏览器提出来的，mozilla和opera都是最近版本才支持这个属性，而我们的大众型浏览器IE全家都是不支持，另外由于各大现代浏览器Firefox,Safari,Chrome,Opera都还不支持W3C的标准写法，所以在应用transition时我们有必要加上各自的前缀

  1. .transform{
  2.  
  3.     width: 300px;
  4.  
  5.     height: 300px;
  6.  
  7.     position: absolute;
  8.  
  9.     font-size: 22px;
  10.  
  11.     color: white;
  12.  
  13.     background-color: brown;
  14.  
  15.     -webkit-transition: background-color 1s ease 0.1s,width 1s linear 0.1s,height 1s ease-in-out 0.1s;
  16.  
  17.     -moz-transition: background-color 1s ease 0.1s ,width 1s linear 0.1s,height 1s ease-in-out 0.1s;
  18.  
  19.     -ms-transition: background-color 1s ease 0.1s,width 1s linear 0.1s,height 1s ease-in-out 0.1s;
  20.  
  21.     -o-transition: background-color 1s ease 0.1s,width 1s linear 0.1s,height 1s ease-in-out 0.1s;
  22.  
  23.     transition: background-color 1s ease 0.1s,width 1s linear 0.1s,height 1s ease-in-out 0.1s;
  24.  
  25. }
  26.  
  27. .transform:hover{
  28.  
  29.     background-color: gray;
  30.  
  31.     width: 350px;
  32.  
  33.     height: 350px;
  34.  
  35. }

 

 

二、transform（变换）

transform就是变换，改变，主要的值有以下几种

transform的所有变换都是围绕着x轴,y轴，中心点来进行变换的，那么这三个元素在哪里呢？

 

任何一个元素都有一个中心点，其中心点就是居于元素x轴和y轴的交点，像下面这个元素，图中绿色的点就是中心点了。

如果没有设置transform-origin的话，这个中心点默认就是下图中的center，那么css变形进行的旋转，位移所发，扭曲等操作都是以元素自己中心位置进行变形。

 

transform-origin这个属性，不同浏览器渲染的情况不同，所以要在它前面加上各种浏览器前缀

 

 

 

 

有了这个概念，下面再来说tansform-origin的取值

 

关键词

在下图中的编号

top = top center = center top

1

right = right center= center right

2

bottom = bottom center = center bottom

3

left = left center = center left

4

center = center center

5

top left = left top

6

top right  =  right top

7

bottom left= left bottom

8

bottom right = right bottom

9

 

 

 

 

 

 

 

 

知道了坐标轴的结构以及中心点的位置，下面就来说说这四个值

 

1.rotate（* deg）：围绕中心点2D旋转若干度，单位为deg。

如果*中的值为正数则顺时针旋转，如果是负值则逆时针旋转

  1. .transform{
  2.  
  3.     width: 100px;
  4.  
  5.     height: 100px;
  6.  
  7.     position: absolute;
  8.  
  9.     font-size: 22px;
  10.  
  11.     color: white;
  12.  
  13.     background-color: brown;
  14.  
  15.     transform: rotate(30deg);
  16.  
  17. }
  18.  
  19. .transform2{
  20.  
  21.     width: 100px;
  22.  
  23.     height: 100px;
  24.  
  25.     position: absolute;
  26.  
  27.     font-size: 22px;
  28.  
  29.     color: white;
  30.  
  31.     background-color: brown;
  32.  
  33.     transform: rotate(-30deg);
  34.  
  35. }

2.translate（x,y）移动

translate有三种情况，translate(x,y),x轴和y轴同时移动（如果这里只设定一个值，证明x的值和y的值相同，同样的也是x轴和y轴同时移动），translateX(x),沿着x轴移动，translateY(y),沿着y轴移动。

当值为负数时，反方向移动物体，其基点默认为元素 中心点，也可以根据transform-origin进行改变基点

 

transform: translate(200px,100px);

 

 

 

transform: translateX(100px);

 

transform: translateY(120px);

 

 

 

3.scale缩放

缩放和移动是极其相似的，它也是具有三种情况：scale(x,y)使元素水平方向和垂直方向同时缩放（也就是x轴和y轴同时缩放）；scaleX(x)就只是水平方向进行缩放（x轴缩放）；scaleY（y）仅缩放垂直方向（y轴）。但它们具有相同的缩放中心点和技术，其中心点就是元素的中心位置，缩放基数就是1（也就是参数是相对于1的多少倍），如果参数大于1元素就放大，反之元素就缩小。

transform: scale(1.5);

transform: scale(0.5);

 

transform: scaleX(0.5);

transform: scaleX(1.5);

 

transform: scaleY(1.5);

transform: scaleY(0.5);

 

 

4.skew扭曲（倾斜）

扭曲在我看来就是拉动四个角，往外拉，在水平方向拉，在垂直方向拉，水平方向和垂直方向同时拉。

先来看看只在水平方向拉

 

（1）skewX(* deg)按给定的角度沿x轴指定一个斜切变换（就是四个角在水平方向发生translate移动）。skewX是使元素以其中心为几点，并且在水平方向（x轴）进行扭曲变换。当skew()只指定一个值的时候，发生的也是水平扭曲

transform: skewX(30deg);//transform: skew(30deg);

 

transform: skewX(-30deg);

 

（2）skewY：按指定的角度沿y轴指定一个斜切变换（就是四个角往上下拉）

transform: skewY(30deg);

 

（3）skew（x,y）：：X轴Y轴上的skew transformation（斜切变换）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则值为0，也就是Y轴方向上无斜切。skew是用来对元素进行扭曲变行，第一个参数是水平方向扭曲角度，第二个参数是垂直方向扭曲角度。其中第二个参数是可选参数，如果没有设置第二个参数，那么Y轴为0deg。（就是四个角先在左右拉，拉完再继续上下拉动）

transform: skew(30deg,30deg);

 

 

5.其他属性

 

 

（1）transform-style

设置内嵌的元素在 3D 空间如何呈现。有两个值：flat：所有子元素在 2D 平面呈现；preserve-3d：保留3D空间

（2）perspective-origin

 

（3）backface-visibility

该属性用于隐藏内容的背面。默认情况下，背面可见的，也就是当翻转后，背面内容仍然可见。但是当backface-visibility设置为hidden的时候，旋转后内容将会被隐藏。

 

取值：visible,hidden

 

这三个值涉及3d有点难还没理解，稍后再说

https://www.cnblogs.com/zhangxiaopeng/p/5724832.html

 

 

 

三、animation（动画）

动画animation有两个关键

一个是animation本身的属性值，一个是keyframes的写法，keyframes比较简单，我们先来说说这个。

 

keyframes其实就是帧的集合，为什么这样说呢？

我们在上面看到了transition，发现它其实可以做很多动画对不对？但是有没有发现，transition它只允许在两种状态之间进行过度，没有中间的值。

而我们把一个动画看作是许多个帧的集合，我们可以去设定每个帧的呈现（每个时刻对应的css属性值），这样的动画就有更多的可变性了。

 

keyfram用@keyframs开头，后面接一个动画名，然后用大括号括起来，在里面写每一个关键帧的属性。

就像下面这样

  1. @keyframes newframes {
  2.  
  3.     0%{
  4.  
  5.         
  6.  
  7.     }
  8.  
  9.     100%{
  10.  
  11.         
  12.  
  13.     }
  14.  
  15. }

其中0%可以用from来代替，100%可以用to来代替，但是这两个值不能省略，也不能只写0或只写100，否则不会有任何效果。

在0%到100%之间，我们可以设置任意多个关键帧来设定css的样式，从而达到一种动画一直在变化的效果。

 

再来看看animation有哪些属性

 

css3中的animation属性类似于transition属性，都是随着时间去改变元素的属性值，但是两者的区别就在于，transition一定要有一个事件触发才会产生效果。就像是hover，click等。但是animation不需要任何事件的触发也可以随着时间的变化去改变css属性值，从而产生一种动画的效果。

 

  • animation-name(动画名，也就是keyfram中定义的动画名)

  • animation-duration（动画持续时间）

  • animation-timing-function（动画变化的速率）

  • animation-delay（动画延迟播放的时间）

  • animation-iteration-count（动画循环的次数，infinite是无限次）

  • animation-direction（动画的方向）

  • animation-play-state动画的播放状态

 

 

前5个属性值就很简单易懂了。就不再赘述，下面聊聊animation-direction和animation-play-state

 

animation-direction这个属性是用来指定元素播放的方向，只有两个值，默认值为normal，如果是normal动画每次循环都是向前播放的，也就是每次都是从0%播放到100%。

另一个值是alternate，设定animation-direction为alternate，那么第一次播放到100%后就会从100%播放到0%，如此往返。

 

animation-play-state主要是用来控制元素动画的播放状态，主要有两个值running和pause，其中running是默认值，就是在播放。而paused就是暂停播放。而当动画暂停播放后，再重新设置为running的时候，就会从原来的位置重新播放。

  1. .animation{
  2.  
  3.     width: 300px;
  4.  
  5.     height: 300px;
  6.  
  7.     position: absolute;
  8.  
  9.     font-size: 22px;
  10.  
  11.     color: white;
  12.  
  13.     background-color: brown;
  14.  
  15.     animation: newframes 3s ease alternate infinite;
  16.  
  17.  
  18.  
  19. }
  20.  
  21.  
  22.  
  23. @keyframes newframes {
  24.  
  25.     0%{
  26.  
  27.         width: 300px;
  28.  
  29.         height: 300px;
  30.  
  31.         background-color: brown;
  32.  
  33.     }
  34.  
  35.     40%{
  36.  
  37.         width: 500px;
  38.  
  39.         height: 500px;
  40.  
  41.         background-color: seagreen;
  42.  
  43.     }
  44.  
  45.     60%{
  46.  
  47.         width: 400px;
  48.  
  49.         height: 400px;
  50.  
  51.         background-color: coral;
  52.  
  53.     }
  54.  
  55.     100%{
  56.  
  57.  
  58.  
  59.     }
  60.  
  61. }

 

 

简写方式：

transition: <name> <duration> <animation type> <delay><iteration><direction>

 

下面是例子

三者的混合使用

1.在导航中，当鼠标移到一个选项的时候，该选项出现下划线。

 

这里需要注意的是，因为第一个是不起效果的，所以动效应该只在li:th-child(n+2)上写，这样就不会写在第一个上面了

 

  1. <!DOCTYPE html>
  2.  
  3. <html lang="en">
  4.  
  5. <head>
  6.  
  7.     <meta charset="UTF-8">
  8.  
  9.     <title>用纯transition实现的hover</title>
  10.  
  11.     <style>
  12.  
  13.         .container{
  14.  
  15.             width: 100%;
  16.  
  17.             height: 100%;
  18.  
  19.             margin: 0;
  20.  
  21.             padding: 0;
  22.  
  23.         }
  24.  
  25.         .navigation{
  26.  
  27.             width: 100%;
  28.  
  29.             height: 50px;
  30.  
  31.             background-color: #262f34;
  32.  
  33.         }
  34.  
  35.         .head{
  36.  
  37.             width: 42px;
  38.  
  39.             height: 42px;
  40.  
  41.             border-radius: 40px;
  42.  
  43.             border: white 1px solid;
  44.  
  45.             position: relative;
  46.  
  47.             margin: 3px 0 0 200px;
  48.  
  49.             float: left;
  50.  
  51.         }
  52.  
  53.         .head img{
  54.  
  55.             width: 40px;
  56.  
  57.             height: 40px;
  58.  
  59.             border-radius: 40px;
  60.  
  61.         }
  62.  
  63.         .ul{
  64.  
  65.             width: 600px;
  66.  
  67.             height: 50px;
  68.  
  69.             position: relative;
  70.  
  71.             float: left;
  72.  
  73.         }
  74.  
  75.         .ul li{
  76.  
  77.             list-style: none;
  78.  
  79.             font-size: 20px;
  80.  
  81.             color: honeydew;
  82.  
  83.             float: left;
  84.  
  85.             margin-left: 100px;
  86.  
  87.             cursor: pointer;
  88.  
  89.         }
  90.  
  91.         .ul li:nth-child(1)::after{
  92.  
  93.             position: absolute;
  94.  
  95.             width: 100px;
  96.  
  97.             height: 3px;
  98.  
  99.             background-color: seagreen;
  100.  
  101.             content: "";
  102.  
  103.             margin: 31px 0 0 -63px;
  104.  
  105.  
  106.  
  107.         }
  108.  
  109.         /*不选择第一个的时候使用n+2*/
  110.  
  111.         .ul li:nth-child(n+2)::after{
  112.  
  113.             position: absolute;
  114.  
  115.             width: 100px;
  116.  
  117.             height: 3px;
  118.  
  119.             background-color: seagreen;
  120.  
  121.             content: "";
  122.  
  123.             margin: 31px 0 0 -63px;
  124.  
  125.             transform: scaleX(0);
  126.  
  127.             -webkit-transform: scaleX(0);
  128.  
  129.             -moz-transform: scaleX(0);
  130.  
  131.             -ms-transform: scaleX(0);
  132.  
  133.             -o-transform: scaleX(0);
  134.  
  135.             transition: all ease-in-out 0.2s;
  136.  
  137.             -webkit-transition:all  ease-in-out 0.2s;
  138.  
  139.             -moz-transition:all ease-in-out 0.2s;
  140.  
  141.             -o-transition:all ease-in-out 0.2s;
  142.  
  143.         }
  144.  
  145.         .ul li:hover::after{
  146.  
  147.             transform: scaleX(1);
  148.  
  149.             -webkit-transform: scaleX(1);
  150.  
  151.             -moz-transform: scaleX(1);
  152.  
  153.             -ms-transform: scaleX(1);
  154.  
  155.             -o-transform: scaleX(1);
  156.  
  157.         }
  158.  
  159.  
  160.  
  161.  
  162.  
  163.     </style>
  164.  
  165. </head>
  166.  
  167. <body>
  168.  
  169.  
  170.  
  171. <div class="container">
  172.  
  173.     <div class="navigation">
  174.  
  175.         <div class="head"><img src="../img/2.jpg"></div>
  176.  
  177.         <ul class="ul">
  178.  
  179.             <li class="active">主页</li>
  180.  
  181.             <li>收藏</li>
  182.  
  183.             <li>动态</li>
  184.  
  185.         </ul>
  186.  
  187.     </div>
  188.  
  189. </div>
  190.  
  191. </body>
  192.  
  193. </html>

 

 

 

 

 

 

认真观察上边边框的变化范围，当鼠标移入的时候，立即有一个border的颜色出现，然后border又加了这层颜色，并且这个变化是呈顺时针方向的。

  1. <!DOCTYPE html>
  2.  
  3. <html lang="en">
  4.  
  5. <head>
  6.  
  7.     <meta charset="UTF-8">
  8.  
  9.     <title>用纯transition实现的hover</title>
  10.  
  11.     <style>
  12.  
  13.         .container{
  14.  
  15.             width: 100%;
  16.  
  17.             height: 100%;
  18.  
  19.             margin: 0;
  20.  
  21.             padding: 0;
  22.  
  23.         }
  24.  
  25.         .navigation{
  26.  
  27.             width: 100%;
  28.  
  29.             height: 50px;
  30.  
  31.             background-color: #262f34;
  32.  
  33.         }
  34.  
  35.         .head{
  36.  
  37.             width: 42px;
  38.  
  39.             height: 42px;
  40.  
  41.             border-radius: 40px;
  42.  
  43.             border: white 1px solid;
  44.  
  45.             position: relative;
  46.  
  47.             margin: 3px 0 0 200px;
  48.  
  49.             float: left;
  50.  
  51.         }
  52.  
  53.         .head img{
  54.  
  55.             width: 40px;
  56.  
  57.             height: 40px;
  58.  
  59.             border-radius: 40px;
  60.  
  61.         }
  62.  
  63.         .ul{
  64.  
  65.             width: 600px;
  66.  
  67.             height: 50px;
  68.  
  69.             position: relative;
  70.  
  71.             float: left;
  72.  
  73.         }
  74.  
  75.         .ul li{
  76.  
  77.             list-style: none;
  78.  
  79.             font-size: 20px;
  80.  
  81.             color: honeydew;
  82.  
  83.             float: left;
  84.  
  85.             margin-left: 100px;
  86.  
  87.             cursor: pointer;
  88.  
  89.         }
  90.  
  91.         .ul li::after{
  92.  
  93.             position: absolute;
  94.  
  95.             width: 100px;
  96.  
  97.             height: 3px;
  98.  
  99.             background-color: seagreen;
  100.  
  101.             content: "";
  102.  
  103.             margin: 31px 0 0 -63px;
  104.  
  105.             transform: scaleX(0);
  106.  
  107.             -webkit-transform: scaleX(0);
  108.  
  109.             -moz-transform: scaleX(0);
  110.  
  111.             -ms-transform: scaleX(0);
  112.  
  113.             -o-transform: scaleX(0);
  114.  
  115.             transition: all ease-in-out 0.2s;
  116.  
  117.             -webkit-transition:all  ease-in-out 0.2s;
  118.  
  119.             -moz-transition:all ease-in-out 0.2s;
  120.  
  121.             -o-transition:all ease-in-out 0.2s;
  122.  
  123.         }
  124.  
  125.           .ul li:hover::after{
  126.  
  127.             transform: scaleX(1);
  128.  
  129.             -webkit-transform: scaleX(1);
  130.  
  131.             -moz-transform: scaleX(1);
  132.  
  133.             -ms-transform: scaleX(1);
  134.  
  135.             -o-transform: scaleX(1);
  136.  
  137.         }
  138.  
  139.  
  140.  
  141.         .btn{
  142.  
  143.             width: 200px;
  144.  
  145.             height: 200px;
  146.  
  147.             margin: 100px;
  148.  
  149.         }
  150.  
  151.         .but{
  152.  
  153.             width: 150px;
  154.  
  155.             height: 50px;
  156.  
  157.             background-color: white;
  158.  
  159.             color: coral;
  160.  
  161.             border-radius: 15px;
  162.  
  163.             border: 1px solid slategray;
  164.  
  165.             transition: all 0.6s ease-in-out;
  166.  
  167.             position: relative;
  168.  
  169.             cursor: pointer;
  170.  
  171.         }
  172.  
  173.  
  174.  
  175.         .but::after,.but::before{
  176.  
  177.             position: absolute;
  178.  
  179.             content: '';
  180.  
  181.             display: block;
  182.  
  183.             width: 0;
  184.  
  185.             height: 0;
  186.  
  187.             box-sizing: border-box;
  188.  
  189.             /*设置透明的边框，看不见*/
  190.  
  191.             border: 1px solid transparent;
  192.  
  193.             border-radius: 15px;
  194.  
  195.             top: -2px;
  196.  
  197.             left: -2px;
  198.  
  199.         }
  200.  
  201.  
  202.  
  203.         .but:hover::after,.but:hover::before{
  204.  
  205.             width: 150px;
  206.  
  207.             height: 50px;
  208.  
  209.         }
  210.  
  211.  
  212.  
  213.         /*鼠标移出的时候·1调用*/
  214.  
  215.         .but:before{
  216.  
  217.             transition: border-color 0s ease-in 0.4s,width 0.2s ease-in,height 0.2s ease-in 0.2s;
  218.  
  219.         }
  220.  
  221.         .but::after{
  222.  
  223.             transition: border-color 0s ease-in 0.8s,width 0.2s ease-in 0.6s,height 0.2s ease-in 0.4s;
  224.  
  225.         }
  226.  
  227.         /*鼠标移入的时候调用*/
  228.  
  229.         .but:hover::before{
  230.  
  231.             border-bottom-color: red;
  232.  
  233.             border-left-color: red;
  234.  
  235.             transition: border-color 0s ease-out 0.4s, width 0.2s ease-out 0.4s ,height 0.2s ease-out 0.6s;
  236.  
  237.         }
  238.  
  239.         .but:hover::after{
  240.  
  241.             border-top-color: red;
  242.  
  243.             border-right-color:red ;
  244.  
  245.             transition: width 0.2s ease-out,height 0.2s ease-out 0.2s;
  246.  
  247.         }
  248.  
  249.  
  250.  
  251.  
  252.  
  253.     </style>
  254.  
  255. </head>
  256.  
  257. <body>
  258.  
  259.  
  260.  
  261.    <div class="container">
  262.  
  263.         <div class="navigation">
  264.  
  265.             <div class="head"><img src="../img/2.jpg"></div>
  266.  
  267.             <ul class="ul">
  268.  
  269.                 <li class="active">主页</li>
  270.  
  271.                 <li>收藏</li>
  272.  
  273.                 <li>动态</li>
  274.  
  275.             </ul>
  276.  
  277.         </div>
  278.  
  279.  
  280.  
  281.        <div class="btn">
  282.  
  283.             <button class="but">点击按钮</button>
  284.  
  285.        </div>
  286.  
  287.    </div>
  288.  
  289.  
  290.  
  291.  
  292.  
  293. </body>
  294.  
  295. </html>

 

 

 

 

先来观察这个动图的变化，就是当鼠标移入的时候，出现一个介绍的界面，这个界面中内容是从下往上出现的，而四个边框都是慢慢出现的，可以看到是从中心点往外扩的，那么就可以设置两个伪元素,after和before，先设置她们具有边框。before的边框是top和bottom，after的边框是left和right。

如果这样设置了之后，那么设置translate的时候就要对应的设置，top和bottom的是设置x轴的scale。

 

在鼠标移入之前，before（top和bottom）已经被缩放成（x轴没有，y轴不缩放，也就是此时width=0，height=1），注意此时要用transform: scale(0,1) ;或者scaleX（0），当鼠标移入的时候就设置transform: scale(1)，，此时before从中心点往两边拉，也就是当鼠标没有移入的时候，这是一幅卷起来的画。但是当鼠标移入了之后，这幅画从中间往两边拉开。而当鼠标移出的时候，又从两边往中间拉这幅画。

 

而after负责两边的动画，也就是一开始after是一幅卷起来的画，当鼠标移入的时候从中间往上下两边拉这幅画，当鼠标移出的时候的时候，从上下往中间卷这幅画。

 

需要注意的是transform是静态属性，也就是当页面加载完毕的时候，就已经完成了对应的变换，我们在一开始的时候给before设定了scale（0,1），也就是元素已经成为一条竖直的线（当然这条线是看不到的，因为width=0），当鼠标移入的时候，因为transform发生了变化，且此时scale（1），所以，此时有将x轴放大到1.所以就形成了从中间往两边开的效果。

 

 

当after，尽管设置的是scale（1）（因为只有一个参数的时候，默认为x,y两个的参数值一样。）所以此时也是因为transform有了变化，且y轴设置为放大到一倍。所以此时也就有了效果。

 

需要注意的是，y轴的正直是往下的！！！

 

 

  1.  
  2. <!DOCTYPE html>
  3.  
  4. <html lang="en">
  5.  
  6. <head>
  7.  
  8.     <meta charset="UTF-8">
  9.  
  10.     <title>Title</title>
  11.  
  12.     <style>
  13.  
  14.         .effect-box {
  15.  
  16.             position: relative;
  17.  
  18.             display: inline-block;
  19.  
  20.             overflow: hidden;
  21.  
  22.             width: 250px;
  23.  
  24.             height: 158px;
  25.  
  26.             background: rgba(53, 172, 197, 1);
  27.  
  28.             cursor: pointer
  29.  
  30.         }
  31.  
  32.  
  33.  
  34.         .effect-box img {
  35.  
  36.             display: block;
  37.  
  38.             width: 100%;
  39.  
  40.             height: 100%;
  41.  
  42.             opacity: .7;
  43.  
  44.             -webkit-transition: opacity .35s;
  45.  
  46.             transition: opacity .35s
  47.  
  48.         }
  49.  
  50.  
  51.  
  52.         .effect-box:hover img {
  53.  
  54.             opacity: .4
  55.  
  56.         }
  57.  
  58.  
  59.  
  60.         .effect-box .border-line2 {
  61.  
  62.             position: absolute;
  63.  
  64.             top: 0;
  65.  
  66.             left: 0;
  67.  
  68.             width: 100%;
  69.  
  70.             height: 100%;
  71.  
  72.             box-sizing: border-box;
  73.  
  74.             padding: 2em;
  75.  
  76.             font-size: 1.25em;
  77.  
  78.             color: #fff;
  79.  
  80.             text-transform: uppercase;
  81.  
  82.             -webkit-backface-visibility: hidden;
  83.  
  84.             backface-visibility: hidden
  85.  
  86.         }
  87.  
  88.         .effect-box .border-line2::after,
  89.  
  90.         .effect-box .border-line2::before {
  91.  
  92.             position: absolute;
  93.  
  94.             top: 30px;
  95.  
  96.             right: 30px;
  97.  
  98.             bottom: 30px;
  99.  
  100.             left: 30px;
  101.  
  102.             content: '';
  103.  
  104.             opacity: 0;
  105.  
  106.             pointer-events: none;
  107.  
  108.             -webkit-transition: opacity .35s, -webkit-transform .35s;
  109.  
  110.             transition: opacity .35s, transform .35s
  111.  
  112.         }
  113.  
  114.  
  115.  
  116.         .effect-box .border-line2::before {
  117.  
  118.             border-top: 1px solid #fff;
  119.  
  120.             border-bottom: 1px solid #fff;
  121.  
  122.             -webkit-transform: scale(0, 1);
  123.  
  124.             transform: scale(0, 1)
  125.  
  126.         }
  127.  
  128.         .effect-box .border-line2::after {
  129.  
  130.             border-right: 1px solid #fff;
  131.  
  132.             border-left: 1px solid #fff;
  133.  
  134.             -webkit-transform: scale(1, 0);
  135.  
  136.             transform: scale(1, 0)
  137.  
  138.         }
  139.  
  140.         .effect-box:hover .border-line2::after,
  141.  
  142.         .effect-box:hover .border-line2::before {
  143.  
  144.             opacity: 1;
  145.  
  146.             -webkit-transform: scale(1);
  147.  
  148.             transform: scale(1)
  149.  
  150.         }
  151.  
  152.         .effect-box .border-line2 p {
  153.  
  154.             padding: 4px 10px;
  155.  
  156.             margin: 0;
  157.  
  158.             font-size: 16px;
  159.  
  160.             line-height: 1.0;
  161.  
  162.             text-align: center;
  163.  
  164.             color: #fff;
  165.  
  166.             letter-spacing: 1px;
  167.  
  168.             opacity: 0;
  169.  
  170.             -webkit-transition: opacity .35s, -webkit-transform .35s;
  171.  
  172.             transition: opacity .35s, transform .35s;
  173.  
  174.             -webkit-transform: translate3d(0, 20px, 0);
  175.  
  176.             transform: translate3d(0, 20px, 0)
  177.  
  178.         }
  179.  
  180.         .effect-box:hover .border-line2 p {
  181.  
  182.             opacity: 1;
  183.  
  184.             -webkit-transform: translate3d(0, 0, 0);
  185.  
  186.             transform: translate3d(0, 0, 0)
  187.  
  188.         }
  189.  
  190.     </style>
  191.  
  192.     <style>
  193.  
  194.         .myeff{
  195.  
  196.             width: 300px;
  197.  
  198.             height: 300px;
  199.  
  200.             background-color: #367dff;
  201.  
  202.         }
  203.  
  204.         .show{
  205.  
  206.             width: 300px;
  207.  
  208.             height: 280px;
  209.  
  210.             display: inline-block;
  211.  
  212.             position: absolute;
  213.  
  214.             margin-top: 20px;
  215.  
  216.             backface-visibility: hidden;
  217.  
  218.             box-sizing: border-box;
  219.  
  220.         }
  221.  
  222.         .show::before,.show::after{
  223.  
  224.             width: 200px;
  225.  
  226.             height:200px;
  227.  
  228.             position: absolute;
  229.  
  230.             content: "";
  231.  
  232.             top: 20px;
  233.  
  234.             left: 50px;
  235.  
  236.             transition: opacity .35s ,transform .35s;
  237.  
  238.         }
  239.  
  240.         .show::before{
  241.  
  242.             border-top: 1px solid white;
  243.  
  244.             border-bottom:1px solid white;
  245.  
  246.             transform: scale(0,1) ;
  247.  
  248.         }
  249.  
  250.         .show::after{
  251.  
  252.             border-left:1px solid white;
  253.  
  254.             border-right: 1px solid white;
  255.  
  256.             transform: scale(1,0);
  257.  
  258.         }
  259.  
  260.  
  261.  
  262.         .myeff:hover .show::after,.myeff:hover .show::before{
  263.  
  264.             transform: scale(1);
  265.  
  266.         }
  267.  
  268.         .show p{
  269.  
  270.             height: 40px;
  271.  
  272.             width: 100%;
  273.  
  274.             font-size: 22px;
  275.  
  276.             color: white;
  277.  
  278.             text-align: center;
  279.  
  280.             opacity: 0;
  281.  
  282.             transition: opacity 0.35s ,transform 0.35s;
  283.  
  284.             transform: translate(0,20px);
  285.  
  286.  
  287.  
  288.         }
  289.  
  290.     .myeff:hover .show p{
  291.  
  292.             transform: translate(0,0);
  293.  
  294.         }
  295.  
  296.  
  297.  
  298.     </style>
  299.  
  300. </head>
  301.  
  302. <body>
  303.  
  304.     <div class="effect-box">
  305.  
  306.         <div class="border-line2">
  307.  
  308.             <p> 319 </p>
  309.  
  310.             <p> 布局和界面</p>
  311.  
  312.             <p>Read More</p>
  313.  
  314.         </div>
  315.  
  316.     </div>
  317.  
  318.     <div class="myeff">
  319.  
  320.             <div class="show">
  321.  
  322.                 <p>402</p>
  323.  
  324.                 <p>布局与界面</p>
  325.  
  326.                 <p>readmore</p>
  327.  
  328.             </div>
  329.  
  330.         </div>
  331.  
  332.  
  333.  
  334. </body>
  335.  
  336. </html>

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/269370
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号