css打造老电影效果

最新推荐文章于 2025-04-22 09:43:02 发布

紫微前端

最新推荐文章于 2025-04-22 09:43:02 发布

阅读量249

点赞数

CC 4.0 BY-SA版权

分类专栏：原生javascript制作各种酷炫组件文章标签： css css3 前端

本文链接：https://blog.youkuaiyun.com/liuhao9999/article/details/128217081

原生javascript制作各种酷炫组件专栏收录该内容

157 篇文章 ¥89.90 ¥99.00

订阅专栏

本文详细介绍了如何利用CSS3的滤镜、过渡和动画等特性，为网页元素添加老电影的效果，包括颗粒感、色调调整和画面抖动等，从而实现一种复古的视觉体验。

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

<style>
:root {
	--trsn: all 0.5s ease 0s;
	--black: #000;
}

*, *:before, *:after {
	position: absolute;
}

body {
	margin: 0;
	padding: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--black);
	perspective: 100vmin;
}

.content {
	width: 100vw;
	height: 100vh;
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: url(https://source.unsplash.com/random/800x600/?mountain) no-repeat center center;
	background: url(https://images.unsplash.com/photo-1454496522488-7

了解本专栏