【GitHub前端练手项目50天50个项目】--day06--图片模糊加载效果

GitHub热门前端练手项目，纯HTML、CSS、JS实现，50天50个项目，每日一个项目，打卡活动，解读项目中的知识点
GitHub项目官网连接
50Projects in 50 Days

项目展示

实现一个模糊加载的效果，当加载到100%时，图片清晰度正常

Blurry

源码

HTML

 <!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <title>Blurry Loading</title>
</head>
 
<body>
  <section class="bg"></section>
  <div class="loading-text">0%</div>
 
  <script src="script.js"></script>
</body>
 
</html>

CSS

 @import url('https://fonts.googleapis.com/css?family=Ubuntu');
 
* {
  box-sizing: border-box;
}
 
body {
  font-family: 'Ubuntu', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}
 
.bg {
  background: url('https://images.unsplash.com/photo-1576161787924-01bb08dad4a4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2104&q=80') no-repeat center center/cover;
  position: absolute;
  top: -30px;
  left: -30px;
  width: calc(100vw + 60px);
  height: calc(100vh + 60px);
  z-index: -1;
  filter: blur(0px);
}
 
.loading-text {
  font-size: 50px;
  color: #fff;
}

JS

 const loadText = document.querySelector('.loading-text')
const bg = document.querySelector('.bg')
 
let load = 0
 
let int = setInterval(blurring, 30)
 
function blurring() {
  load++
 
  if (load > 99) {
    clearInterval(int)
  }
  loadText.innerText = `${load}%`
  loadText.style.opacity = scale(load, 0, 100, 1, 0)
  bg.style.filter = `blur(${scale(load, 0, 100, 30, 0)}px)`
}
 
// https://stackoverflow.com/questions/10756313/javascript-jquery-map-a-range-of-numbers-to-another-range-of-numbers
const scale = (num, in_min, in_max, out_min, out_max) => {
  return ((num - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min
}

知识点总结

CSS部分

CSS滤镜

CSS 中实现滤镜效果需要通过 filter 属性并配合一些函数来实现

https://www.runoob.com/cssref/css3-pr-filter.html

filter属性可以为元素添加滤镜效果，例如图像、文字等

 <img src="../background-slider/IMG_20210603_191954.jpg" alt="">
<style>
        img {
            width: 50%;
            height: 50%;
            filter: blur(10px);
        }
</style>

函数还有：

blur(px)设置高斯模糊，数值越大越模糊
brightness(%)调整图片亮度，0%，图像全黑，100%图像无变化，超过100%会更亮
contrast(%)，调整图像的对比度，值是0%，图像全灰，100%图像不变，超过100%，对比度更高
saturate(%)，转换图像饱和度，0%完全不饱和，100%图像无变化，超过100%饱和度增大
grayscale(%)，转换为灰度图像，0%图像无变化，100%图像完全灰色
drop-shadow(x,y,blur,color)，给图像设置一个阴影效果，阴影是合成在图像下面，指定阴影的位置(x,y)，阴影的模糊程度blur()，阴影的扩展范围spread，阴影的颜色color
```
 filter: drop-shadow(30px 10px 4px #4444dd);
```

滤镜是支持叠加的，使用多个滤镜，给图像带来不一样的效果

 filter: drop-shadow(20px 10px 5px rgb(53, 153, 56)) contrast(150%) blur(10px)

补充：如果body设置了背景图片，那么对于body的filter就不会生效

posted @ 2022-11-13 22:27 秋天Code 阅读(98) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 【GitHub前端练手项目--50天50个项目---商品加载效果-----day08】

· 【GitHub前端项目50天50项目】--day05--幻灯片效果

· [前端小项目] 模糊加载 blurry loading (50projects50days)

· 05-Blurry-Loading 模糊加载效果

· 50projects50days 模糊加载blurry loading

阅读排行：
· 使用C#创建一个MCP客户端
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· ollama系列1：轻松3步本地部署deepseek，普通电脑可用
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 按钮权限的设计及实现

itkkk

【GitHub前端练手项目50天50个项目】--day06--图片模糊加载效果

项目展示

源码

HTML

CSS

JS

知识点总结

CSS部分

CSS滤镜

公告

搜索

常用链接

我的标签

随笔分类

随笔档案

相册

阅读排行榜

推荐排行榜

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<link rel="stylesheet" href="style.css" />
	<title>Blurry Loading</title>
	</head>

	<body>
	<section class="bg"></section>
	<div class="loading-text">0%</div>

	<script src="script.js"></script>
	</body>

	</html>

	@import url('https://fonts.googleapis.com/css?family=Ubuntu');

	* {
	box-sizing: border-box;
	}

	body {
	font-family: 'Ubuntu', sans-serif;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	overflow: hidden;
	margin: 0;
	}

	.bg {
	background: url('https://images.unsplash.com/photo-1576161787924-01bb08dad4a4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2104&q=80') no-repeat center center/cover;
	position: absolute;
	top: -30px;
	left: -30px;
	width: calc(100vw + 60px);
	height: calc(100vh + 60px);
	z-index: -1;
	filter: blur(0px);
	}

	.loading-text {
	font-size: 50px;
	color: #fff;
	}

	const loadText = document.querySelector('.loading-text')
	const bg = document.querySelector('.bg')

	let load = 0

	let int = setInterval(blurring, 30)

	function blurring() {
	load++

	if (load > 99) {
	clearInterval(int)
	}
	loadText.innerText = `${load}%`
	loadText.style.opacity = scale(load, 0, 100, 1, 0)
	bg.style.filter = `blur(${scale(load, 0, 100, 30, 0)}px)`
	}

	// https://stackoverflow.com/questions/10756313/javascript-jquery-map-a-range-of-numbers-to-another-range-of-numbers
	const scale = (num, in_min, in_max, out_min, out_max) => {
	return ((num - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min
	}

	<img src="../background-slider/IMG_20210603_191954.jpg" alt="">
	<style>
	img {
	width: 50%;
	height: 50%;
	filter: blur(10px);
	}
	</style>