CSS特效--视频字幕浮现

基本原理

这里首先我们要学会怎么使用transition+transform-origin+transform
举个例子：

<div class="b">
        <div class="box"></div>
    </div>
    .b{
            width: 300px;
            height: 300px;
            background-color: springgreen;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: skyblue;
            transform: scaleX(0);
            transition:all 2s;
        }
        .b:hover .box{
            transform: scaleX(1);
        }

这个时候的效果是这样的：

你会发现是由中间向两边伸展的，达不到想要的效果，那如果我们需要他是从固定的一边伸出来的效果的话就要加上(给box盒子加就可以)：

transform-origin: right;

就能实现这样的效果：

到这里就大功告成了，这就是一个demo，接下来只需要直接套就行了！

代码

<div class="box">
        <div class="vix">
            <video src="../112/077680587_main_xl.mp4" muted autoplay
                loop<