tool——toolofna

效果

全页视频

按钮特效

全页视频

分析

找到原网站的视频源，然后放一个与页面一样大的video即可

可参考我的另一篇博客——vedio全页面 demo
http://blog.csdn.net/iamcgt/article/details/72637714

思路

1、video

<div class="media">        <video autoplay src="http://s3-us-west-2.amazonaws.com/tool.home/2016trim.webm"></video></div>

2、video样式

.media{    overflow: hidden;    width: 100%;    height: 100%;    position: absolute;    top: 0;    left: 0;    z-index: 0;}.media video{    margin-top: -100px;}

按钮特效

分析

先是一条白线，然后向上下扩展，可以为这个div设置伪元素：before和：after，先让它们宽度和高度为0，然后为它们设置transition属性，先变宽度，再变高度即可

思路

1、设置按钮

        <div class="view-reel">            <div>view reel</div>        </div>

2、设置.view-reel样式

.view-reel{    position: absolute;    top: 20%;    right: -3px;    border: rgba(255, 255, 255, 0.5) solid 3px;    z-index: 1002;    overflow: hidden;    display: block;    font-size: 16px;    background: none;    width: 240px;    padding: 15px;    text-align: left;    font-family: "TrumpGothicEastBold", Arial, Helvetica, sans-serif;    color: #fff;    letter-spacing: 2px;    text-transform: uppercase;    cursor: pointer;}

3、添加伪元素：before和：after

.view-reel:before,.view-reel:after{    content: '';    position: absolute;    right: 0;    width: 0;    height: 1%;    z-index: -1;    background-color: #ffffff;    transform-origin: right;}.view-reel:before{    top:50%;}.view-reel:after{    bottom: 50%;}

4、添加：hover伪类

.view-reel:hover{    color: #000;    transition: color .5s .5s;}.view-reel:hover:before,.view-reel:hover:after{    width: 100%;    height: 50%;    transition: width .5s,height .5s .5s;}

源码

html

<div>    <div class="media">        <div class="view-reel">            <div>view reel</div>        </div>        <video autoplay src="http://s3-us-west-2.amazonaws.com/tool.home/2016trim.webm"></video>    </div></div>

css

/**tool */.media{    overflow: hidden;    width: 100%;    height: 100%;    position: absolute;    top: 0;    left: 0;    z-index: 0;}.media video{    margin-top: -100px;}.view-reel{    position: absolute;    top: 20%;    right: -3px;    border: rgba(255, 255, 255, 0.5) solid 3px;    z-index: 1002;    overflow: hidden;    display: block;    font-size: 16px;    background: none;    width: 240px;    padding: 15px;    text-align: left;    font-family: "TrumpGothicEastBold", Arial, Helvetica, sans-serif;    color: #fff;    letter-spacing: 2px;    text-transform: uppercase;    cursor: pointer;}.view-reel:before,.view-reel:after{    content: '';    position: absolute;    right: 0;    width: 0;    height: 1%;    z-index: -1;    background-color: #ffffff;    transform-origin: right;}.view-reel:before{    top:50%;}.view-reel:after{    bottom: 50%;}.view-reel:hover{    color: #000;    transition: color .5s .5s;}.view-reel:hover:before,.view-reel:hover:after{    width: 100%;    height: 50%;    transition: width .5s,height .5s .5s;}

toolofna

http://toolofna.com/#!/home