当前位置：首页 > article >正文

前端内容黑白处理、轮播图、奇妙的头像特效

article 2025/8/21 10:05:38

1、内容黑白处理

（1）filter：滤镜

可以把包裹的区域中每一个像素点，经过固定的算法转换成另一种颜色来呈现

（2）grayscale：灰阶滤镜

取值范围：0~1
取0：原图
去1：完全黑白

filter: grayscale(1)

（3）hue-rotate：阴间滤镜

filter: hue-rotate(45deg);

2、轮播图

代码示例用较原始的方式实现

（1）快速编写标签

div.item*4>a>img[src=./img/$.jpg]

<div class="item"><a href=""><img src="./img/1.jpg" alt=""></a></div>
<div class="item"><a href=""><img src="./img/2.jpg" alt=""></a></div>
<div class="item"><a href=""><img src="./img/3.jpg" alt=""></a></div>
<div class="item"><a href=""><img src="./img/4.jpg" alt=""></a></div>

（2）静态轮播图

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}.container {width: 500px;height: 300px;margin: 10px auto;overflow: hidden;position: relative;}.carousel {width: 100%;height: 100%;display: flex;transition: 0.5s;/* css3动画效果 */}.container .carousel img {width: 500px;height: 300px;}.indicator {position: absolute;bottom: 10px;left: 50%;transform: translateX(-50%);/* css3横向偏移，50%：元素自身的一半 */display: flex;/* 边框 *//* outline: 1px solid #fff; */}.indicator span {width: 20px;height: 20px;border: 2px solid #c466ef;border-radius: 50%;margin: 0 3px;}.indicator span.active {background-color: #c466ef;border-color: #c466ef;}</style>
</head><body><div class="container"><!-- 轮播图 --><div class="carousel"><div class="item"><a href=""><img src="./img/1.jpg" alt="" /></a></div><div class="item"><a href=""><img src="./img/2.jpg" alt="" /></a></div><div class="item"><a href=""><img src="./img/3.jpg" alt="" /></a></div><div class="item"><a href=""><img src="./img/4.jpg" alt="" /></a></div></div><!-- 指示器 --><div class="indicator"><span class="active"></span><span></span><span></span><span></span></div></div><script>var doms = {carousel: document.querySelector(".carousel"),indicators: document.querySelectorAll(".indicator span"),};/*** 移动轮播图到第几个板块* @param {Number} index 板块的索引*/function moveTo(index) {curIndex = index;doms.carousel.style.transform = `translateX(-${index}00%)`;// 去除当前选中的指示器var active = document.querySelector(".indicator span.active");active.classList.remove("active");// 重新设置要选中的指示器doms.indicators[index].classList.add("active");}// 绑定指示器点击事件doms.indicators.forEach(function (item, index) {item.onclick = function () {moveTo(index);};});</script>
</body></html>

（3）定时器轮播

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}.container {width: 500px;height: 300px;margin: 10px auto;overflow: hidden;position: relative;}.carousel {width: 100%;height: 100%;display: flex;transition: 0.5s;/* css3动画效果 */}.container .carousel img {width: 500px;height: 300px;}.indicator {position: absolute;bottom: 10px;left: 50%;transform: translateX(-50%);/* css3横向偏移，50%：元素自身的一半 */display: flex;/* 边框 *//* outline: 1px solid #fff; */}.indicator span {width: 20px;height: 20px;border: 2px solid #c466ef;border-radius: 50%;margin: 0 3px;}.indicator span.active {background-color: #c466ef;border-color: #c466ef;}</style>
</head><body><div class="container"><!-- 轮播图 --><div class="carousel"><div class="item"><a href=""><img src="./img/1.jpg" alt="" /></a></div><div class="item"><a href=""><img src="./img/2.jpg" alt="" /></a></div><div class="item"><a href=""><img src="./img/3.jpg" alt="" /></a></div><div class="item"><a href=""><img src="./img/4.jpg" alt="" /></a></div></div><!-- 指示器 --><div class="indicator"><span class="active"></span><span></span><span></span><span></span></div></div><script>var doms = {carousel: document.querySelector(".carousel"),indicators: document.querySelectorAll(".indicator span"),};var curIndex = 0,timer;/*** 移动轮播图到第几个板块* @param {Number} index 板块的索引*/function moveTo(index) {curIndex = index;doms.carousel.style.transform = `translateX(-${index}00%)`;// 去除当前选中的指示器var active = document.querySelector(".indicator span.active");active.classList.remove("active");// 重新设置要选中的指示器doms.indicators[index].classList.add("active");}// 绑定指示器点击事件doms.indicators.forEach(function (item, index) {item.onclick = function () {moveTo(index);};});// 定时器自动轮播function autoPlay() {timer = setInterval(function () {if (curIndex == doms.indicators.length - 1) {curIndex = 0;} else {curIndex++;}moveTo(curIndex);}, 2000);}autoPlay()</script>
</body></html>

（4）鼠标移入移出

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}.container {width: 500px;height: 300px;margin: 10px auto;overflow: hidden;position: relative;}.carousel {width: 100%;height: 100%;display: flex;transition: 0.5s;/* css3动画效果 */}.container .carousel img {width: 500px;height: 300px;}.indicator {position: absolute;bottom: 10px;left: 50%;transform: translateX(-50%);/* css3横向偏移，50%：元素自身的一半 */display: flex;/* 边框 *//* outline: 1px solid #fff; */}.indicator span {width: 20px;height: 20px;border: 2px solid #c466ef;border-radius: 50%;margin: 0 3px;}.indicator span.active {background-color: #c466ef;border-color: #c466ef;}</style>
</head><body><div class="container"><!-- 轮播图 --><div class="carousel"><div class="item"><a href=""><img src="./img/1.jpg" alt="" /></a></div><div class="item"><a href=""><img src="./img/2.jpg" alt="" /></a></div><div class="item"><a href=""><img src="./img/3.jpg" alt="" /></a></div><div class="item"><a href=""><img src="./img/4.jpg" alt="" /></a></div></div><!-- 指示器 --><div class="indicator"><span class="active"></span><span></span><span></span><span></span></div></div><script>var doms = {carousel: document.querySelector(".carousel"),indicators: document.querySelectorAll(".indicator span"),};var curIndex = 0,timer;/*** 移动轮播图到第几个板块* @param {Number} index 板块的索引*/function moveTo(index) {curIndex = index;doms.carousel.style.transform = `translateX(-${index}00%)`;// 去除当前选中的指示器var active = document.querySelector(".indicator span.active");active.classList.remove("active");// 重新设置要选中的指示器doms.indicators[index].classList.add("active");}// 绑定指示器点击事件doms.indicators.forEach(function (item, index) {item.onclick = function () {moveTo(index);};});// 定时器自动轮播function autoPlay() {timer = setInterval(function () {if (curIndex == doms.indicators.length - 1) {curIndex = 0;} else {curIndex++;}moveTo(curIndex);}, 2000);}autoPlay()doms.carousel.onmouseover = function () {clearInterval(timer);}doms.carousel.onmouseout = function () {autoPlay();}</script>
</body></html>

3、奇妙的头像特效

（1）初始化代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {padding: 0;margin: 0;min-height: 100vh;display: grid;place-content: center;background: #e8e4cc;margin-top: -200px;}img {--s: 200px;--c1: #c82942;--c2: #ecd878;width: var(--s);height: var(--s);cursor: pointer;transition: 0.5s;}img:hover {transform: scale(1.35);}</style>
</head>
<body><div><img src="./img/头像.png" alt=""></div>
</body>
</html>

（2）背景、背景边框

①背景渐变

background: radial-gradient(var(--c2), var(--c1));

②配置比例，形成背景边框

没有设置100%：解决背景与背景边框出现锯齿

--b: 5px;background: radial-gradient(circle closest-side, var(--c2) calc(99% - var(--b)), var(--c1) calc(100% - var(--b)) 99%,transparent
);

③保持背景不放大

img {--s: 200px;--c1: #c82942;--c2: #ecd878;--b: 5px;--f: 1;transform: scale(var(--f));width: var(--s);height: var(--s);cursor: pointer;transition: 0.5s;/* ①背景渐变 */background: radial-gradient(circle closest-side, var(--c2) calc(99% - var(--b)), var(--c1) calc(100% - var(--b)) 99%,transparent)no-repeat center / calc(100% / var(--f));
}img:hover {--f: 1.35;
}

（3）外边框

①绘制外边框

outline: var(--b) solid var(--c1);
border-radius: 0 0 50% 50%;
outline-offset: calc(0px - var(--b));

②外边框内缩

outline-offset: calc((1 / var(--f) - 1) * var(--s) / 2 - var(--b));

③顶部线被遮挡

padding-top
border-radius设置大些
content-box：因为padding-top导致整个背景偏移，所以要加这个属性

background: radial-gradient(circle closest-side, var(--c2) calc(99% - var(--b)), var(--c1) calc(100% - var(--b)) 99%,transparent
)
content-box no-repeat center / calc(100% / var(--f));
outline: var(--b) solid var(--c1);
border-radius: 0 0 999px 999px;
outline-offset: calc((1 / var(--f) - 1) * var(--s) / 2 - var(--b));
padding-top: calc(var(--s) / 5);

（4）蒙层

①蒙层一

--bgOption: content-box no-repeat center / calc(100% / var(--f));background: radial-gradient(circle closest-side, var(--c2) calc(99% - var(--b)), var(--c1) calc(100% - var(--b)) 99%,transparent
) var(--bgOption);
mask: radial-gradient(circle closest-side, #000 99%,transparent
) var(--bgOption);

②蒙层二

mask: linear-gradient(#000 0 0) no-repeat 50% calc(10px - (1 / var(--f) - 1) * var(--s) / 2 - var(--b)) / calc(100% / var(--f) - 3 * var(--b)) 50%,radial-gradient(circle closest-side, #000 99%,transparent
) var(--bgOption);