hover动画之 斜角背景

吴统威 on 编程语言 前端编程 HTML/CSS/JAVASCRIPT | 2016-02-23 10:43:52.0

hover动画-斜角背景, 给人一种拨开云雾见青天的感觉. 哈哈, 这形容词不知道用得对不对. 好了, 我们先来分析一下这个知识要点.


这个动画主要的知识点:


  1. position的定位, 层次

  2. transforms的动画

  3. 伪元素的使用, 伪类hover的使用


其实重点就在于这三个方面的知识.


那我们首先来看看HTML结构代码

代码HTML

 <div class="hover"> 倾斜背景 </div>


代码似乎同上一篇文章类似, 是的. 上一篇文章用的是A标签, 这里我们用的是DIV. 其实没有什么不同的, 就是标签名称不一样.


然后我们就得考虑这个背景是在文字的下面, 但是如果单纯用背景来做处理, 不是很方便, 我们使用伪元素after来做为背景, 那这个背景就是一个position状态的元素. 

代码CSS

.hover {

    font-weight: bold;

    width: 300px;

    height: 35px;

    color: #fff;

    margin: 100px auto;

    text-align: center;

    line-height: 35px;

    background-color: #ff3300;

    position: relative;

    overflow: hidden;

    z-index: 1;

}

.hover:after {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 500%;

    height: 1000%;

    background: #dd483f;

    transform-origin: 0% 0%;

    z-index: -1;

    transform: translateX(-12.9%) rotate(-45deg, 0, 0);

    transition: transform .3s;

}


我们这里直接就可以使用transform来做处理, 然后在0.3s来完成这个动画效果. 


然后就是在hover下, 这个tansform该如何处理, 当然是直接移动X,Y的坐标值, 这里角度不变.

代码CSS

.hover:hover:after {

    transform: translateY(0%) translateX(-30.6%) rotate(-45deg, 0, 0);

}


这里, 代码就完成了. 下面展示我们录制后的代码效果


android项目没有android.jar这个依赖包的解决办法
|
Hover动画之图标动画