烟雾缭绕背景动画特效案例

最新推荐文章于 2022-03-17 21:15:26 发布

yjx_43750162

最新推荐文章于 2022-03-17 21:15:26 发布

阅读量1.3k

点赞数

本文链接：https://blog.csdn.net/weixin_43750162/article/details/87368190

版权

本文将介绍如何制作逼真的烟雾缭绕背景动画特效，包括使用OpenGL ES滤镜进行实时渲染，以及结合OpenGL ES美颜直播特效实现烟雾动态效果。适合于游戏开发和视频编辑等领域。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{
				padding: 0;
				margin: 0;
				height: 100%;
			}
			.box{
				width: 100%;
				height: 100vh;
				position: relative;
			}
			.bj{
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				background-size: 100%,100%;
				overflow: hidden;
			}
			.tp{
				width: 100%;
				height: 100%;
				overflow: hidden;
			}
			.tp>div{
				width: 300vw;
				height: 100vh;
			}
			.tp1{
				background: url(img/fog-1.png);
				animation: move 60s linear infinite;
			}
			.tp2{
				background: url(img/fog-2.png);
				animation: move 40s linear infinite;
			}
			@keyframes move{
				from{
					transform: translateX(0vw);
				}
				to{
					transform: translateX(-300vw);
				}
			}
		</style>
	</head>
	<body>
		<div class="box">
			<figure