css+视频 --- 文字烟雾出场效果_css 云雾特效-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_44869043/article/details/106010342

在这里插入图片描述

原厂地址：https://www.youtube.com/watch?v=lx3UtGiRcYA
烟雾素材：https://www.wlittleyang.com/_nuxt/videos/ed1872e.mp4

使用动画@keyframe 来控制“唯一的wataru制作”的显示效果

@keyframe animate {
    0% {
        opacity:0,/*一开始不显示，透明度为0*/
        transform: rotageY(90deg),/*以Y轴旋转90度*/
        filter:blur(10px),/*字体模糊10px*/ 
    }
    100% {
    	opacity:1, /*显示*/
        transform: rotateY(0), /*不旋转*/ 
        filter:blur(0),/*不模糊*/
    }
}

对所有字体使用动画 animate：

<body>
    <section>
        <video src="./smoke.mp4" muted autoplay></video>
        <h1>
            <span>唯</span>
            <span>一</span>
            <span>的</span>
            <span>w</span>
            <span>a</span>
            <span>t</span>
            <span>a</span>
            <span>r</span>
            <span>u</span>
            <span>制</span>
            <span>作</span>
        </h1>
    </section>
</body>

h1 span {
    animation: animate 1s ease-in-out forward;// 使用animate动画，持续1s，快慢快速度,向前显示不循环
}

再对每个字体延迟显示：

h1 span:nth-child(1) {
	animation-delay:0.4s
}
h1 span:nth-child(2) {
	animation-delay:0.8s
}
...

延迟时间根据视频烟雾扩散的时间来均分，视频有 7s 左右，但烟雾扩散比较好用的是 4 s 左右，一个有 11 个span, 4 / 11 ≈ 0.4s。

video {
    object-fit:cover;/* video的内容的填充方式 */
}

CSS 与可替换元素

CSS 在某些情况下会对可替换元素做一些特殊处理，比如计算外边距（margin）和一些 auto 的具体值。

需要注意的是，一部分（并非全部）可替换元素，其本身具有的尺寸和基线（baseline）会被一些 CSS 属性用到，加入计算之中，例如 vertical-align。只有可替换元素才能具有这种自带值。

控制内容框中的对象位置

某些CSS属性可用于指定可替换元素中包含的内容对象在该元素的盒区域内的位置或定位方式。这些属性的具体定义可以在 CSS Images Module Level 3 和 CSS Images Module Level 4 规范中找到：

object-fit

指定可替换元素的内容对象在元素盒区域中的填充方式。（有些类似于 background-size ）

object-position

指定可替换元素的内容对象在元素盒区域中的位置。（类似于 background-position ）

完整代码显示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="./index.css">
</head>
<body>
    <section>
        <video src="./smoke.mp4" muted autoplay></video>
        <h1>
            <span>唯</span>
            <span>一</span>
            <span>的</span>
            <span>w</span>
            <span>a</span>
            <span>t</span>
            <span>a</span>
            <span>r</span>
            <span>u</span>
            <span>制</span>
            <span>作</span>
        </h1>
    </section>
</body>
</html>

body {
    margin:0;
    padding:0;
}
section {
    height: 100vh;
    background-color: #333;
}
video {
    object-fit: cover;
    width: 100%;
}
h1 {
    margin:0;
    padding: 0;
    position: absolute;
    top:50%;
    transform: translateY(-50%);
    width: 100%;
    text-align: center;
    font-size:80px;
    word-spacing: .2em;
    font-family: sans-serif;
    color:#ddd;
    
}
h1 span {
    opacity: 0;
    display: inline-block;
    animation: animate 1.5s ease-in-out forwards;
}
@keyframes animate {
    0% {
        opacity:0;
        filter: blur(10px);
        transform: rotateY(-90deg);
    }
    100% {
        opacity: 1;
        filter: blur(0);
        transform:rotateY(0)
    }
}
h1 span:nth-child(1) {
    animation-delay: 0.4s;
}
h1 span:nth-child(2) {
    animation-delay: .8s;
}
h1 span:nth-child(3) {
    animation-delay: 1.2s;
}
h1 span:nth-child(4) {
    animation-delay: 1.6s;
}
h1 span:nth-child(5) {
    animation-delay: 2s;
}
h1 span:nth-child(6) {
    animation-delay: 2.4s;
}
h1 span:nth-child(7) {
    animation-delay: 2.8s;
}
h1 span:nth-child(8) {
    animation-delay: 3.2s;
}
h1 span:nth-child(9) {
    animation-delay: 3.6s;
}
h1 span:nth-child(10) {
    animation-delay: 4.0s;
}
h1 span:nth-child(11) {
    animation-delay: 4.4s;
}