css 过度动画

系统管理员 2022-11-13 10:27 195阅读 0赞

#  方式一： #

> ###  HTML代码:  ###
> 
>     <div class="box1">
>         <div class="box2">
>             <div class="box3"></div>
>         </div>
>     </div>
> 
> ### CSS代码:  ###
> 
>     .box1{
>         border: 1px solid red;
>         width: 200px;
>         height: 200px;
>         overflow: hidden;
>     }
>     .box2{
>         position: relative;
>         border: 1px solid rgb(0, 255, 234);
>         width: 100%;
>         height: 250px;
>         transition: height 1s;
>     }
>     .box2:hover{
>         height: 200px;
>     }
>     .box3{
>         position: absolute;
>         bottom: 0;
>         left: 0;
>         width: 100%;
>         height: 50px;
>         background: #666666;
>     }
> 
> 显示结果：
> 
> ![20210326155818506.png][] 图1![20210326155941743.png][] 图2

方式二：

> HTML代码：
> 
>     <div class="caoZuoBox" :class="{ hide: showHandleDiv }">
>         <div class="caoZuoTipBox" @click="showHandleDiv = !showHandleDiv"></div>
>     </div>
> 
> CSS代码：
> 
>     .caoZuoBox{
>         position:absolute;
>         top: 0;
>         right: 0;
>         width: 150px;
>         height:100%;
>         transition: width .5s;
>         border: 1px solid red;
>         background: #91919173;
>     }
>     .caoZuoBox.hide {
>       width: 0;
>     }
>     .caoZuoTipBox{
>         position:absolute;
>         top: 53%;
>         left: -17px;
>         border: 1px solid #0099ff;
>         border-top-left-radius: 10px;
>         border-bottom-left-radius: 10px;
>         width: 15px;
>         height:50px;
>         cursor: pointer;
>     }
> 
> 显示：
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzE1NDk0_size_16_color_FFFFFF_t_70][] 图3![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzE1NDk0_size_16_color_FFFFFF_t_70 1][] 图4

[20210326155818506.png]: https://img-blog.csdnimg.cn/20210326155818506.png
[20210326155941743.png]: /images/20221022/11cda75bce2c4e5e8e41b5dbd86c28bc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzE1NDk0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/202107281709175.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzE1NDk0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzE1NDk0_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210728171021923.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzE1NDk0,size_16,color_FFFFFF,t_70