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

待我称王封你为后i 2022-04-12 20:20 983阅读 0赞

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（允许自定义一个时间曲线）

![20181129155551943.png][]

（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时我们有必要加上各自的前缀

.transform{
    
        width: 300px;
    
        height: 300px;
    
        position: absolute;
    
        font-size: 22px;
    
        color: white;
    
        background-color: brown;
    
        -webkit-transition: background-color 1s ease 0.1s,width 1s linear 0.1s,height 1s ease-in-out 0.1s;
    
        -moz-transition: background-color 1s ease 0.1s ,width 1s linear 0.1s,height 1s ease-in-out 0.1s;
    
        -ms-transition: background-color 1s ease 0.1s,width 1s linear 0.1s,height 1s ease-in-out 0.1s;
    
        -o-transition: background-color 1s ease 0.1s,width 1s linear 0.1s,height 1s ease-in-out 0.1s;
    
        transition: background-color 1s ease 0.1s,width 1s linear 0.1s,height 1s ease-in-out 0.1s;
    
    }
    
    .transform:hover{
    
        background-color: gray;
    
        width: 350px;
    
        height: 350px;
    
    }

**二、transform（变换）**

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

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

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70][]

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

<table> 
 <tbody> 
  <tr> 
   <td style="border-color:#cccccc;"> <p>关键词</p> </td> 
   <td style="border-color:#cccccc;"> <p>在下图中的编号</p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#cccccc;"> <p>top = top center = center top</p> </td> 
   <td style="border-color:#cccccc;"> <p>1</p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#cccccc;"> <p>right = right center= center right</p> </td> 
   <td style="border-color:#cccccc;"> <p>2</p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#cccccc;"> <p>bottom = bottom center = center bottom</p> </td> 
   <td style="border-color:#cccccc;"> <p>3</p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#cccccc;"> <p>left = left center = center left</p> </td> 
   <td style="border-color:#cccccc;"> <p>4</p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#cccccc;"> <p>center = center center</p> </td> 
   <td style="border-color:#cccccc;"> <p>5</p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#cccccc;"> <p>top left = left top</p> </td> 
   <td style="border-color:#cccccc;"> <p>6</p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#cccccc;"> <p>top right&nbsp; =&nbsp; right top</p> </td> 
   <td style="border-color:#cccccc;"> <p>7</p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#cccccc;"> <p>bottom left= left&nbsp;bottom</p> </td> 
   <td style="border-color:#cccccc;"> <p>8</p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#cccccc;"> <p>bottom&nbsp;right = right&nbsp;bottom</p> </td> 
   <td style="border-color:#cccccc;"> <p>9</p> </td> 
  </tr> 
 </tbody> 
</table>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 1][]

![20181129155551980.png][]![20181129155551980.png][]![20181129155551986.png][]![20181129155551973.png][]![20181129155552145.png][]

![20181129155552174.png][]![20181129155552181.png][]![20181129155552214.png][]![20181129155552510.png][]

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

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

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

.transform{
    
        width: 100px;
    
        height: 100px;
    
        position: absolute;
    
        font-size: 22px;
    
        color: white;
    
        background-color: brown;
    
        transform: rotate(30deg);
    
    }
    
    .transform2{
    
        width: 100px;
    
        height: 100px;
    
        position: absolute;
    
        font-size: 22px;
    
        color: white;
    
        background-color: brown;
    
        transform: rotate(-30deg);
    
    }

![20181129155552517.png][]![20181129155552430.png][]

**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);

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 2][]

transform: translateX(100px);

![20181129155552420.png][]

transform: translateY(120px);

![20181129155552553.png][]

**3.scale缩放**

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

transform: scale(1.5);

transform: scale(0.5);

![20181129155552570.png][]![20181129155552608.png][]

transform: scaleX(0.5);

transform: scaleX(1.5);

![20181129155552698.png][]![20181129155552701.png][]

transform: scaleY(1.5);

transform: scaleY(0.5);

![20181129155552715.png][]![20181129155552738.png][]

**4.skew扭曲（倾斜）**

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

先来看看只在水平方向拉

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 3][]

transform: skewX(-30deg);

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 4][]

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

transform: skewY(30deg);

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 5][]

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

transform: skew(30deg,30deg);

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 6][]

**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][https_www.cnblogs.com_zhangxiaopeng_p_5724832.html]

**三、animation（动画）**

动画animation有两个关键

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

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

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

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

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

就像下面这样

@keyframes newframes {
    
        0%{
    
            
    
        }
    
        100%{
    
            
    
        }
    
    }

其中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的时候，就会从原来的位置重新播放。

.animation{
    
        width: 300px;
    
        height: 300px;
    
        position: absolute;
    
        font-size: 22px;
    
        color: white;
    
        background-color: brown;
    
        animation: newframes 3s ease alternate infinite;
    
    
    
    }
    
    
    
    @keyframes newframes {
    
        0%{
    
            width: 300px;
    
            height: 300px;
    
            background-color: brown;
    
        }
    
        40%{
    
            width: 500px;
    
            height: 500px;
    
            background-color: seagreen;
    
        }
    
        60%{
    
            width: 400px;
    
            height: 400px;
    
            background-color: coral;
    
        }
    
        100%{
    
    
    
        }
    
    }

简写方式：

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

下面是例子

三者的混合使用

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

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

![webp][]

![webp 1][]

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

<!DOCTYPE html>
    
    <html lang="en">
    
    <head>
    
        <meta charset="UTF-8">
    
        <title>用纯transition实现的hover</title>
    
        <style>
    
            .container{
    
                width: 100%;
    
                height: 100%;
    
                margin: 0;
    
                padding: 0;
    
            }
    
            .navigation{
    
                width: 100%;
    
                height: 50px;
    
                background-color: #262f34;
    
            }
    
            .head{
    
                width: 42px;
    
                height: 42px;
    
                border-radius: 40px;
    
                border: white 1px solid;
    
                position: relative;
    
                margin: 3px 0 0 200px;
    
                float: left;
    
            }
    
            .head img{
    
                width: 40px;
    
                height: 40px;
    
                border-radius: 40px;
    
            }
    
            .ul{
    
                width: 600px;
    
                height: 50px;
    
                position: relative;
    
                float: left;
    
            }
    
            .ul li{
    
                list-style: none;
    
                font-size: 20px;
    
                color: honeydew;
    
                float: left;
    
                margin-left: 100px;
    
                cursor: pointer;
    
            }
    
            .ul li::after{
    
                position: absolute;
    
                width: 100px;
    
                height: 3px;
    
                background-color: seagreen;
    
                content: "";
    
                margin: 31px 0 0 -63px;
    
                transform: scaleX(0);
    
                -webkit-transform: scaleX(0);
    
                -moz-transform: scaleX(0);
    
                -ms-transform: scaleX(0);
    
                -o-transform: scaleX(0);
    
                transition: all ease-in-out 0.2s;
    
                -webkit-transition:all  ease-in-out 0.2s;
    
                -moz-transition:all ease-in-out 0.2s;
    
                -o-transition:all ease-in-out 0.2s;
    
            }
    
              .ul li:hover::after{
    
                transform: scaleX(1);
    
                -webkit-transform: scaleX(1);
    
                -moz-transform: scaleX(1);
    
                -ms-transform: scaleX(1);
    
                -o-transform: scaleX(1);
    
            }
    
    
    
            .btn{
    
                width: 200px;
    
                height: 200px;
    
                margin: 100px;
    
            }
    
            .but{
    
                width: 150px;
    
                height: 50px;
    
                background-color: white;
    
                color: coral;
    
                border-radius: 15px;
    
                border: 1px solid slategray;
    
                transition: all 0.6s ease-in-out;
    
                position: relative;
    
                cursor: pointer;
    
            }
    
    
    
            .but::after,.but::before{
    
                position: absolute;
    
                content: '';
    
                display: block;
    
                width: 0;
    
                height: 0;
    
                box-sizing: border-box;
    
                /*设置透明的边框，看不见*/
    
                border: 1px solid transparent;
    
                border-radius: 15px;
    
                top: -2px;
    
                left: -2px;
    
            }
    
    
    
            .but:hover::after,.but:hover::before{
    
                width: 150px;
    
                height: 50px;
    
            }
    
    
    
            /*鼠标移出的时候·1调用*/
    
            .but:before{
    
                transition: border-color 0s ease-in 0.4s,width 0.2s ease-in,height 0.2s ease-in 0.2s;
    
            }
    
            .but::after{
    
                transition: border-color 0s ease-in 0.8s,width 0.2s ease-in 0.6s,height 0.2s ease-in 0.4s;
    
            }
    
            /*鼠标移入的时候调用*/
    
            .but:hover::before{
    
                border-bottom-color: red;
    
                border-left-color: red;
    
                transition: border-color 0s ease-out 0.4s, width 0.2s ease-out 0.4s ,height 0.2s ease-out 0.6s;
    
            }
    
            .but:hover::after{
    
                border-top-color: red;
    
                border-right-color:red ;
    
                transition: width 0.2s ease-out,height 0.2s ease-out 0.2s;
    
            }
    
    
    
    
    
        </style>
    
    </head>
    
    <body>
    
    
    
       <div class="container">
    
            <div class="navigation">
    
                <div class="head"><img src="../img/2.jpg"></div>
    
                <ul class="ul">
    
                    <li class="active">主页</li>
    
                    <li>收藏</li>
    
                    <li>动态</li>
    
                </ul>
    
            </div>
    
    
    
           <div class="btn">
    
                <button class="but">点击按钮</button>
    
           </div>
    
       </div>
    
    
    
    
    
    </body>
    
    </html>

![webp 2][]

先来观察这个动图的变化，就是当鼠标移入的时候，出现一个介绍的界面，这个界面中内容是从下往上出现的，而四个边框都是慢慢出现的，可以看到是从中心点往外扩的，那么就可以设置两个伪元素,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轴的正直是往下的！！！**

<!DOCTYPE html>
    
    <html lang="en">
    
    <head>
    
        <meta charset="UTF-8">
    
        <title>Title</title>
    
        <style>
    
            .effect-box {
    
                position: relative;
    
                display: inline-block;
    
                overflow: hidden;
    
                width: 250px;
    
                height: 158px;
    
                background: rgba(53, 172, 197, 1);
    
                cursor: pointer
    
            }
    
    
    
            .effect-box img {
    
                display: block;
    
                width: 100%;
    
                height: 100%;
    
                opacity: .7;
    
                -webkit-transition: opacity .35s;
    
                transition: opacity .35s
    
            }
    
    
    
            .effect-box:hover img {
    
                opacity: .4
    
            }
    
    
    
            .effect-box .border-line2 {
    
                position: absolute;
    
                top: 0;
    
                left: 0;
    
                width: 100%;
    
                height: 100%;
    
                box-sizing: border-box;
    
                padding: 2em;
    
                font-size: 1.25em;
    
                color: #fff;
    
                text-transform: uppercase;
    
                -webkit-backface-visibility: hidden;
    
                backface-visibility: hidden
    
            }
    
            .effect-box .border-line2::after,
    
            .effect-box .border-line2::before {
    
                position: absolute;
    
                top: 30px;
    
                right: 30px;
    
                bottom: 30px;
    
                left: 30px;
    
                content: '';
    
                opacity: 0;
    
                pointer-events: none;
    
                -webkit-transition: opacity .35s, -webkit-transform .35s;
    
                transition: opacity .35s, transform .35s
    
            }
    
    
    
            .effect-box .border-line2::before {
    
                border-top: 1px solid #fff;
    
                border-bottom: 1px solid #fff;
    
                -webkit-transform: scale(0, 1);
    
                transform: scale(0, 1)
    
            }
    
            .effect-box .border-line2::after {
    
                border-right: 1px solid #fff;
    
                border-left: 1px solid #fff;
    
                -webkit-transform: scale(1, 0);
    
                transform: scale(1, 0)
    
            }
    
            .effect-box:hover .border-line2::after,
    
            .effect-box:hover .border-line2::before {
    
                opacity: 1;
    
                -webkit-transform: scale(1);
    
                transform: scale(1)
    
            }
    
            .effect-box .border-line2 p {
    
                padding: 4px 10px;
    
                margin: 0;
    
                font-size: 16px;
    
                line-height: 1.0;
    
                text-align: center;
    
                color: #fff;
    
                letter-spacing: 1px;
    
                opacity: 0;
    
                -webkit-transition: opacity .35s, -webkit-transform .35s;
    
                transition: opacity .35s, transform .35s;
    
                -webkit-transform: translate3d(0, 20px, 0);
    
                transform: translate3d(0, 20px, 0)
    
            }
    
            .effect-box:hover .border-line2 p {
    
                opacity: 1;
    
                -webkit-transform: translate3d(0, 0, 0);
    
                transform: translate3d(0, 0, 0)
    
            }
    
        </style>
    
        <style>
    
            .myeff{
    
                width: 300px;
    
                height: 300px;
    
                background-color: #367dff;
    
            }
    
            .show{
    
                width: 300px;
    
                height: 280px;
    
                display: inline-block;
    
                position: absolute;
    
                margin-top: 20px;
    
                backface-visibility: hidden;
    
                box-sizing: border-box;
    
            }
    
            .show::before,.show::after{
    
                width: 200px;
    
                height:200px;
    
                position: absolute;
    
                content: "";
    
                top: 20px;
    
                left: 50px;
    
                transition: opacity .35s ,transform .35s;
    
            }
    
            .show::before{
    
                border-top: 1px solid white;
    
                border-bottom:1px solid white;
    
                transform: scale(0,1) ;
    
            }
    
            .show::after{
    
                border-left:1px solid white;
    
                border-right: 1px solid white;
    
                transform: scale(1,0);
    
            }
    
    
    
            .myeff:hover .show::after,.myeff:hover .show::before{
    
                transform: scale(1);
    
            }
    
            .show p{
    
                height: 40px;
    
                width: 100%;
    
                font-size: 22px;
    
                color: white;
    
                text-align: center;
    
                opacity: 0;
    
                transition: opacity 0.35s ,transform 0.35s;
    
                transform: translate(0,20px);
    
    
    
            }
    
        .myeff:hover .show p{
    
                transform: translate(0,0);
    
            }
    
    
    
        </style>
    
    </head>
    
    <body>
    
        <div class="effect-box">
    
            <div class="border-line2">
    
                <p> 319 </p>
    
                <p> 布局和界面</p>
    
                <p>Read More</p>
    
            </div>
    
        </div>
    
        <div class="myeff">
    
                <div class="show">
    
                    <p>402</p>
    
                    <p>布局与界面</p>
    
                    <p>readmore</p>
    
                </div>
    
            </div>
    
    
    
    </body>
    
    </html>

[20181129155551943.png]: /images/20220413/4189bb77575847249535e9752d1bcc4d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70]: /images/20220413/b12185a2869746d1b81eb4c4adcbf96d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 1]: /images/20220413/94bd8b957dfd4eb6a8bb062e6e8f43a9.png
[20181129155551980.png]: https://img-blog.csdnimg.cn/20181129155551980.png
[20181129155551986.png]: https://img-blog.csdnimg.cn/20181129155551986.png
[20181129155551973.png]: https://img-blog.csdnimg.cn/20181129155551973.png
[20181129155552145.png]: /images/20220413/93fd4f037fcd47a0aa1dbc238b219fb3.png
[20181129155552174.png]: https://img-blog.csdnimg.cn/20181129155552174.png
[20181129155552181.png]: https://img-blog.csdnimg.cn/20181129155552181.png
[20181129155552214.png]: https://img-blog.csdnimg.cn/20181129155552214.png
[20181129155552510.png]: /images/20220413/13f2f5cb57884474a8c8723ad67012e7.png
[20181129155552517.png]: https://img-blog.csdnimg.cn/20181129155552517.png
[20181129155552430.png]: /images/20220413/ba98ffcf887347d385baf8f8b78360d9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 2]: /images/20220413/5083a822a03b463a83530d03369430ac.png
[20181129155552420.png]: /images/20220413/7f76f69cf86a473a9e1ec1c97af587cb.png
[20181129155552553.png]: /images/20220413/ceaac9e6e3374dd5a3807369663a6f88.png
[20181129155552570.png]: https://img-blog.csdnimg.cn/20181129155552570.png
[20181129155552608.png]: /images/20220413/17a6954df7634c8a8c08e2eb2ace6fb8.png
[20181129155552698.png]: https://img-blog.csdnimg.cn/20181129155552698.png
[20181129155552701.png]: /images/20220413/2c47e5f7a5184d0e84f268d1038f0efd.png
[20181129155552715.png]: https://img-blog.csdnimg.cn/20181129155552715.png
[20181129155552738.png]: /images/20220413/c5338f457195402bad1587dea8d57e7a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 3]: /images/20220413/97966b16c9a24526874e3414ddce747d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 4]: /images/20220413/9f50dd1b9caa44ff85754ff4c88aeb36.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 5]: /images/20220413/a3d10c9cce8a4f2db05c87fafe72cf32.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 6]: /images/20220413/9c35431554cb44628f50deb8471dc360.png
[https_www.cnblogs.com_zhangxiaopeng_p_5724832.html]: https://www.cnblogs.com/zhangxiaopeng/p/5724832.html
[webp]: /images/20220413/ebebc2d25c8045688ac56118533240e4.png
[webp 1]: /images/20220413/4193ba036aa44cee8be373cf1304e0b3.png
[webp 2]: /images/20220413/0de8e338881c40e883893c56de09b25a.png