css+视频 --- 文字烟雾出场效果

最新推荐文章于 2023-03-31 17:47:46 发布

唯一的wataru

最新推荐文章于 2023-03-31 17:47:46 发布

阅读量619

点赞数

本文链接：https://blog.csdn.net/qq_44869043/article/details/106010342

版权

笔记专栏收录该内容

20 篇文章 0 订阅

订阅专栏

在这里插入图片描述

原厂地址：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;
}

唯一的wataru

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
css+视频 --- 文字烟雾出场效果

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

扫一扫