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

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

article 2025/5/31 18:58:48

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);

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

1、内容黑白处理 （1）filter：滤镜可以把包裹的区域中每一个像素点，经过固定的算法转换成另一种颜色来呈现 （2）grayscale：灰阶滤镜取值范围：0~1取0：原图去1&#xff…...

编程日记 2025/5/31 18:58:48

蓝桥杯 10. 安全序列

当然可以，以下是整理后的 Markdown 格式题目描述： 题目描述小蓝是工厂里的安全工程师，他负责安放工厂里的危险品。工厂是一条直线，直线上有 n 个空位，小蓝需要将若干个油桶放置在这 n 个空位上。每 2 个油桶中间至…...

编程日记 2025/5/31 17:30:30

(10)-java+ selenium-＞元素之By class name

1.简介继续介绍WebDriver关于元素定位大法，这篇介绍By ClassName。看到ID，NAME这些方法的讲解，应该知道，要做好Web自动化测试，最好是需要了解一些前端的基本知识。有了前端知识，做元素定位会很轻松，同样写网络爬虫也很有帮助 2.常用定位方法（8种）（1）id （2）nam…...

编程日记 2025/5/29 14:16:21

Git - .gitignore 文件

一、.gitignore 文件介绍在使用 Git 进行版本控制时，.gitignore 文件是一个非常重要的配置文件，用于告诉 Git 哪些文件或目录不需要被追踪和提交到版本库中。合理使用 .gitignore 文件可以避免提交不必要的文件，如临时文件、编译生成的文件…...

编程日记 2025/5/31 5:07:00

MPI与多线程(如OpenMP)混合编程注意事项与性能优化

文章目录 MPI与多线程(如OpenMP)混合编程注意事项与性能优化混合编程注意事项性能优化策略示例代码编译与运行性能调优建议 MPI与多线程(如OpenMP)混合编程注意事项与性能优化混合编程注意事项 MPI初始化与线程支持级别： 需要在MPI_Init之前调用MPI_Init_thread指…...

编程日记 2025/5/30 16:44:36

计算机网络学习（八）——MAC

一、MAC 在计算机网络中，MAC（Media Access Control，媒体访问控制）地址是数据链路层的重要概念，它用于唯一标识网络中的设备，并且在局域网（如以太网）中发挥关键作用。 MAC 是硬件地址…...

编程日记 2025/5/31 17:31:06

英语六级-阅读篇

目录 2023年12月大学英语真题（二） 十五选十（Section A） 单词表短语表译文 Passage Two（Section C） 单词表短语表译文简介：其实我总结这篇文章就是平时记忆该阅读文章单词中出现的…...

编程日记 2025/5/31 4:37:00

文件夹右键打开pycharm aaa.reg notepad 右下角把文件格式改为：ansi Windows Registry Editor Version 5.00[HKEY_CLASSES_ROOT\Directory\Background\shell\PyCharm] "Open with PyCharm" "Icon""\"D:\\soft\\PyCharm 2024.1.4\\bi…...

编程日记 2025/5/31 14:28:02

机器人坐标系标定

机器人坐标系标定机器人坐标系标定 1. 知识目标理解机器人坐标系的定义掌握机器人坐标系的分类 2. 技能目标能够正确标定机器人坐标系 3. 机器人坐标系的作用代表不同的物体或边界示例： 相对于桌子、弓箭、坯料、其他机器或边界移动用途： 使用…...

编程日记 2025/5/30 15:07:15

Flink流处理基础概论

文章目录引言Flink基本概述传统数据架构的不足Dataflow中的几大基本概念Dataflow流式处理宏观流程数据并行和任务并行的区别Flink中几种数据传播策略Flink中事件的延迟和吞吐事件延迟事件的吞吐如何更好的理解事件的延迟和吞吐flink数据流的几种操作输入输出转换操作滚动聚合窗…...

编程日记 2025/5/31 16:56:26

【RabbitMQ】记录 InvalidDefinitionException: Java 8 date/time type

目录 1. 添加必要依赖 2. 配置全局序列化方案（推荐） 3. 配置RabbitMQ消息转换器关键点说明 1. 添加必要依赖首先确保项目中包含JSR-310支持模块： <dependency><groupId>com.fasterxml.jackson.datatype</groupId>&l…...

编程日记 2025/5/29 15:01:33

如何通过API接口实现自动化上货跨平台铺货？商品采集|商品上传实现详细步骤

一、引言：跨平台铺货的技术挑战与 API 价值在电商多平台运营时代，商家需要将商品同步上架至淘宝、京东、拼多多、亚马逊、Shopee 等多个平台，传统手动铺货模式存在效率低下（单平台单商品上架需 30-60 分钟）、数据一致…...

编程日记 2025/5/29 8:24:10

《三维点如何映射到图像像素？——相机投影模型详解》

引言以三维投影介绍大多比较分散，不少小伙伴再面对诸多的坐标系转换中容易弄混，特别是再写代码的时候可能搞错，所有这篇文章帮大家完整的梳理3D视觉中的投影变换的全流程，一文弄清楚这个过程，帮助大家搞清坐标系转换…...

编程日记 2025/5/31 18:08:30

Go 语言范围循环变量重用问题与 VSCode 调试解决方法

文章目录问题描述问题原因1. Go 1.21 及更早版本的范围循环行为2. Go 1.22 的改进3. VSCode 调试中的问题4. 命令行 dlv debug 的正确输出三种解决方法1. 启用 Go 模块2. 优化 VSCode 调试配置3. 修改代码以确保兼容性4. 清理缓存5. 验证环境验证结果结论在 Go 编程中&…...

编程日记 2025/5/30 13:28:57

青少年编程与数学 02-020 C#程序设计基础 04课题、常量和变量

青少年编程与数学 02-020 C#程序设计基础 04课题、常量和变量一、主函数1. 主函数的基本格式2. 主函数的参数3. 主函数的返回值4. 主函数的作用5. 主函数的示例6. 主函数的注意事项二、变量1. 变量的声明示例 2. 变量的初始化声明时初始化声明后赋值 3. 变量的类型3.1 值类型…...

编程日记 2025/5/29 15:01:16

零基础设计模式——结构型模式 - 适配器模式

第三部分：结构型模式 - 适配器模式 (Adapter Pattern) 欢迎来到结构型模式的第一站！结构型模式关注的是如何将类或对象组合成更大的结构，同时保持结构的灵活性和效率。适配器模式是其中非常实用的一个，它能帮助我们解决接口不兼容…...

编程日记 2025/5/29 7:04:35

【QT】TXT文件的基础操作

目录一、QT删除TXT文件内容方法1：使用QFile打开文件并截断方法2：使用QSaveFile（更安全的写入方式） 方法3：使用QTextStream 使用示例注意事项二、QT操作TXT文件：清空内容并写入新数据完整实现代…...

编程日记 2025/5/29 15:02:05

WordPress多语言插件安装与使用教程

WordPress多语言插件GTranslate的使用方法在wordpress网站后台搜索多语言插件GTranslate并安装，安装完成、用户插件后开始设置，以下为设置方法： 1、先在后台左侧找到Gtranslate，进入到设置界面 2、选择要显示的形式&#xff0c…...

编程日记 2025/5/29 7:26:17

互联网大厂Java求职面试：短视频平台大规模实时互动系统架构设计

互联网大厂Java求职面试：短视频平台大规模实时互动系统架构设计面试背景介绍技术总监（严肃脸）： 欢迎来到我们今天的模拟面试，我是技术部的李总监，负责平台后端架构和高可用系统设计。今天我们将围绕一个…...

编程日记 2025/5/29 14:16:46

欣佰特科技|SenseGlove Nova2 力反馈数据手套：助力外科手术训练的精准触觉模拟

在医疗科技持续发展的背景下，虚拟现实（VR）技术正在改变外科手术培训的方式，而 SenseGlove Nova2 力反馈数据手套在这一领域发挥着重要作用。 SenseGlove Nova2 力反馈数据手套与 VirtualiSurg 手术模拟系统深度结合。其手部追踪…...

编程日记 2025/5/31 10:11:56

Axure元件动作七：移动、旋转、启用/禁用效果、置于顶层/底层详解

亲爱的小伙伴，在您浏览之前，烦请关注一下，在此深表感谢！如有帮助请订阅专栏！ Axure产品经理精品视频课已登录CSDN可点击学习https://edu.csdn.net/course/detail/40420 案例视频： Axure移动、旋转、置于顶层底层、启用禁用课程主题：移动、旋转、启用/禁用效果、置于顶…...

编程日记 2025/5/29 15:05:29

网络安全-等级保护(等保) 3-2-2 GB/T 28449-2019 第7章现场测评活动/第8章报告编制活动

################################################################################ GB/T 28449-2019《信息安全技术网络安全等级保护测评过程指南》是规定了等级测评过程，是纵向的流程，包括：四个基本测评活动:测评准备活动、方案编制活…...

编程日记 2025/5/31 10:03:50

Flutter跨平台通信实战｜3步打通Android原生能力，实现底层API调用！

当你的Flutter应用需要调用Android独有的硬件能力（如传感器、蓝牙模块）或系统级API时，如何与原生平台"对话"？本文手把手教你通过MethodChannel实现双向通信，让Flutter轻松驾驭Android底层能力！ 一…...

编程日记 2025/5/31 14:33:57

IAM角色访问AWS RDS For MySQL

IAM角色访问AWS RDS For MySQL Tips: 写这篇文章，主要是用作记录；在AWS配置IAM RDS 角色权限访问，官方文档不怎么全，踩了一些坑… AWS云上配置开启IAM身份验证登录AWS控制台搜索并进入Databases管理页面选择数据库实例&#x…...

编程日记 2025/5/30 18:55:04

android property 系统

1.使用目的目的都是为了测试。减少编译流程。提高测试效率 2.使用方法流程 2.1 初始化默认值方法一. 配置文件进行配置。方法二. 手动初始化 setprop test.prop.id 12.2 获取键值并 property_get2.3 配置头文件 <cutils/properties.h>3.注意事项 3.1 关于无法…...

编程日记 2025/5/30 13:26:22

Karakeep | 支持Docker/NAS 私有化部署！稍后阅读工具告别云端依赖，让知识收藏更有序

Karakeep 介绍 Karakeep（以前的 Hoarder）是一款开源的“Bookmark Everything”应用程序，一款基于 AI 驱动的开源书签管理工具，专为解决传统浏览器书签管理中的混乱问题而设计。其核心目标是通过智能化技术帮助用户高效整理、检索和…...

编程日记 2025/5/29 7:32:22

RV1126+FFMPEG多路码流监控项目大体讲解

一.项目介绍： 本项目采用的是易百纳RV1126开发板和CMOS摄像头，使用的推流框架是FFMPEG开源项目。这个项目的工作流程如下(如上图)：通过采集摄像头的VI模块，再通过硬件编码VENC模块进行H264/H265的编码压缩，并把压缩后的…...

编程日记 2025/6/1 5:20:26

el-dialog 组件多层嵌套被遮罩问题

<el-dialog title"提示" :visible.sync"dialogBindUserVisible" width"30%" append-to-body :before-close"handleClose"> <span>这是一段信息</span> <span slot"footer" class"dialog-footer&q…...

编程日记 2025/5/31 9:28:00

探秘谷歌Gemini：开启人工智能新纪元

一、引言在人工智能的浩瀚星空中，每一次重大模型的发布都宛如一颗璀璨新星闪耀登场，而谷歌 Gemini 的亮相，无疑是其中最为耀眼的时刻之一。它的出现，犹如在 AI 领域投下了一颗重磅炸弹，引发了全球范围内的广泛关注与热…...

编程日记 2025/5/29 15:04:01

TCP建立连接为什么不是两次握手，而是三次，为什么不能在第二次握手时就建立连接？

一.无法确认客户端的接收能力三次握手的核心目的是为了确认客户端和服务端双方的发送和接收能力： 确保双方都能成功发送和接收数据。如果C端发送数据到S端，S端收到数据，则可以确认S端具备正常的接收能力；如果C端发送出去的请求被…...

编程日记 2025/5/29 12:56:17