CSS动画实例

上一篇讲过css动画transform transition的语法，这一节展示自己做的几个小例子加深印象

1. 线条动画效果

代码：最外层div包含2个小的div : a和b. a有左右边框(高度变化)， b有上下边框（宽度变化）, 默认不显示，鼠标移上去时，a的高度和b的宽度发生变化，交叉效果

<style>

*{margin:0;padding:0;}

.main{ width: 300px; height: 300px; background: #333; position: relative; }

.a,.b{

    opacity: 0; position: absolute;

    top: 0;bottom: 0;left: 0;right: 0; margin: auto;  //水平垂直居中

    transition: all .3s;  //动画持续事件0.3s

}

.a{

    width: 200px; height:100px;

    border-left: 1px solid #fff;

    border-right: 1px solid #fff;

}

.b{

    width: 100px; height: 200px;

    border-top: 1px solid #fff;

    border-bottom: 1px solid #fff;

}

.main:hover .a{ opacity: 1; height: 230px; }

.main:hover .b{ width: 230px; opacity: 1;  }

</style>

<div class="main">

    <div class="a"></div>

    <div class="b"></div>

</div>

2. 旋转：

代码：核心部分是 transform-origin: 0 0; 必须设置到起始点，然后逆时针旋转

<style>

*{margin:0;padding:0;}

.a1{

    position: relative;width: 200px;height: 200px;overflow: hidden;background: #000;}

.a2{

    position: absolute;top: 200px;width: 300px;height: 200px;

    background: #2487e0;transition: all .3s;transform-origin: 0 0; }

.a1:hover .a2 {

    transform: rotate(-15deg);

}

</style>

<div class="a1">

    <div class="a2">

    </div>

</div>

巴特西

CSS动画实例

最新文章

热门文章