简单的css鼠标进入动画

简单的css鼠标进入动画

本篇讲述的动画效果均基于 2d转化–>transform 与 过渡–>transition相结合，简单且实用。

应用时注意div基础样式需自行定义。

文字和盒子共同旋转、放大

效果图：

注：为了使过渡效果更佳，我们应用了贝塞尔曲线

代码如下：

"animate1">hello world!

文字变大，背景盒子变小，有文字凸起效果

效果图：

代码如下：

"animate2">
    
hello world!

上下遮罩效果

效果图：

代码如下：

"animate3">hello world!
    
"top">
    
"bottom">

上下拉帘效果

效果图：

代码如下：

"animate4">hello world!
    
"from_t">

向上抖动效果

代码如下：

"animate5">hello world!