CSS3 实现简单的hover旋转放大，撤销hover渐变还原

缺乏、安全感 2022-06-01 02:46 353阅读 0赞

> 利用CSS3中的transform功能和transition功能实现简单的hover时旋转放大，撤销hover渐变还原的动画效果

##### transform #####

> 利用transform可以实现文字、图像的旋转、缩放、倾斜、移动这4中类型的变形效果。
> 
> 旋转：
> 
>     transform：rotate（30deg）;
> 
> 缩放：
> 
>     transform：scale（0.4）;
> 
> 倾斜：
> 
>     transform：skew(30deg);
>     transform:skew(120deg,45deg);

> 移动：
> 
>     transform：translate(50px,12px)

##### transition #####

>   
> 
> 
> 可以将一个属性得值平滑的过渡到另一个值
> 
> 使用方法：transition：property duration timing-function。也可以拆开单独写
> 
> property表示对哪个属性进行平滑过渡、duration表示在多久内完成过渡、timing-function表示通过什么方法进行平滑过渡。
> 
> 另外结合CSS3中的transition-delay(多久之后开始过渡），可以完成更符合心意的动画效果。
> 
>     transition-property:background-color;
>     transition-duration:2s;
>     transition-timing-function:linear;
>     // 或
>     transition:background-color 2s linear;
> 
>     transtion-delay:2s;
>     
>     //或
>     transition:background-color 2s linear 2s;

##### 完整代码 #####

> 好了，以上就是用到的关键属性的简单介绍。以下是完整代码
> 
> HTML
> 
>     <div class="demo2">transition</div>
> 
> CSS
> 
>     .demo2{
>                 height:200px;
>                 width:200px;
>                 text-align: center;
>                 vertical-align: middle;
>                 background: #D3E393;
>                 color:white;
>                 margin:300px;
>                 transform: rotate(0deg);
>                 transition: width 2s,height 2s,transform 2s;
>             }
>             .demo2:hover{
>                 transition: width 2s ,height 2s, transform 2s;
>                 transition-timing-function: ease;
>                 transform: rotate(360deg);
>                 width:300px;
>                 height:300px;
>             }
> 
> demo效果地址： [这里][Link 1]  
>   
>   
>   
> 
> 
>   
> 
> 
>   
> 
> 
>   
> 
> 
>   
> 
> 
>   
> 
> 
>   
> 
> 
>   
> 
> 
>   
> 
> 
>   
>

[Link 1]: http://htmlpreview.github.io/?https://github.com/jialuoJiang/CSS3/blob/master/transition.html