tool——toolofna-优快云博客

本文链接：https://blog.youkuaiyun.com/iamcgt/article/details/72864735

本文介绍如何实现网页背景的全页视频效果，并详细解释了按钮特效的设计思路及实现方式，包括使用HTML5的video标签播放背景视频，以及通过CSS3伪元素和过渡效果制作动态按钮。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果

全页视频

这里写图片描述

按钮特效

这里写图片描述

全页视频

分析

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

可参考我的另一篇博客——vedio全页面 demo
http://blog.youkuaiyun.com/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;
}