纯CSS实现背景图片切换(CSS3伪类实现背景图片切换)

最新推荐文章于 2024-08-09 16:06:18 发布
最新推荐文章于 2024-08-09 16:06:18 发布
阅读量2.9w 收藏 80
点赞数 15
分类专栏： HTML+CSS3 文章标签： CSS3 前端 html 伪类
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36370731/article/details/78143436
版权

跟着慕课网的教程学习了一下伪类 ，然后试着练习了一下用CSS伪类来实现背景图片切换。

先上一下效果图，当我点击圆圈里的缩略图的时候，背景图片就会变为与缩略图一样的图片。

要用到的伪类及其作用有：

1、nth-of-type()给每个文字块设置不同颜色。

2、::after 添加圆形缩略图的div

3、nth-of-type()配合::after添加缩略图

4、 ::befor 给圆形缩略图添加一个阴影遮罩层

5、:hover  鼠标移上时去除遮罩层的阴影

6、:target  进行背景图片切换

最低0.47元/天 解锁文章
做一个有知识的流氓
关注
专栏目录
CSS代码实现鼠标移过更换背景图片
achenb的博客
07-22 7940
很多时候我们都能够看到，当我们用鼠标移过去的时候，指向的图片将会变成另外一个图片。下面我就将实现该功能的代码分享出来，希望能够帮助到大家。     new document           .logo-link { width:500px; height:500px; text-decoration:none; display:block; backgro
用CSS3实现图片切换效果
HOUJIEHOU的博客
03-06 8784
当几个页面的整体布局相同，只有某个部分在各页面不同时，可以将整体布局的CSS样式写在同一个.css文件中。本次的CSS实现图片s是每个页面下的图片切换效果不同，除此之外，其他的效果都一样。因此，我们可以创建一个common.css文件设置整体界面的样式。 一、圆形超链接 创建四个超链接a标签，分别为Page1、Page2、Page3、Page4。设置displa...
用css来写一个背景图片的切换
dianjieting8509的博客
03-09 429
代码如下： <!DOCTYPE HTML> <htmllang="en-US"> <head> <meta charset="UTF-8"> <title>CSS3 Full Background Slider </title> <style type="text/c...
【伪类与伪元素】用CSS伪元素（以:before为例）插入图片
最新发布
qq_38210427的博客
08-09 470
【伪类与伪元素】用CSS伪元素（以:before为例）插入图片 对于一些小图标类型的图片，若使用<img>略微有些麻烦，iconfont是一个不错的选择用起来也相当灵活，但是所需要步骤较为繁琐，今天介绍一种使用css伪元素快速插入图标的小技巧。 效果图 伪类 与 伪元素 伪类 在网上很多篇博客中并未将这两个解释清楚，很多博客直接写到利用css伪类插入图片，这种说法严格来讲是错误的。 CSS 伪类 是添加到选择器的关键字，指定要选择的元素的特殊状态[1]。 通俗来说就是：
css切背景图
weixin_44479957的博客
09-08 123
<template> <view> <icon></icon> </view> </template> <style lang="scss"> icon{ // 显示宽高 width: 44px; height: 44px; // 背景图片地址 background-image: url(../../static/logon/ai.png); background-size: 500px 260px;/
css实现定时切换背景颜色或者图片
weixin_65451509的博客
09-20 1113
解释一下上面代码中的内容：class为background-img的图片元素，初始显示的是图片地址1。animation属性设定了图片在5秒内循环播放，infinite意味着无限循环。这个动画名字为changeBg。@keyframes是指定动画的关键帧，表示动画从0%开始时，显示的是图片地址1，中间50%时，显示的是图片地址2，最后100%时，显示的是图片地址3。这样，我们就实现了使用CSS实现图片轮播的功能。如果要增加图片，可以按照上面的格式在@keyframes中添加更多关键帧，增加图片元素即可。
css3动画切换背景图片
qq_43059898的博客
01-29 1324
复制代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS3全屏背景图片缩小渐变自动切换代码</title> <!-- <link rel="stylesheet prefetch" href="http://fonts.useso.com/css?family=Raleway:300"> --> <style type="tex
html基础结构
qq_45981441的博客
07-30 188
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title> </h
纯CSS实现图片切换（按键切换/自动切换）
热门推荐
夕降巫咸的博客
12-12 2万+
本篇文章主要是实现通过纯CSS实现图片切换和定时切换 一、通过点击切换 效果图如下 html &lt;div id="hewenqislider" class="csslider"&gt; &lt;input type="radio" name="slides" id="slides_1" checked /&gt; &lt;input t
纯CSS3实现的图片切换幻灯片代码
04-06
纯CSS3实现的图片切换幻灯片代码是一款没用到JS跟jQuery实现的CSS3幻灯片特效。
CSS3全屏背景图片缩小渐变自动切换代码
06-11
这是一款css3实现的全屏背景图片渐变式切换代码特效，图片缩小渐变动画切换效果，不依赖任何JS代码。
CSS3实现的点击按钮背景图片不断切换的JS代码
06-12
CSS3实现的点击图片下方按钮，文字的背景会出现切换效果
css背景颜色透明背景图片切换效果
12-07
在本主题中，“css背景颜色透明背景图片切换效果”涉及的是如何利用CSS实现一种动态效果，即当用户交互时，网页背景颜色逐渐变为透明，并同时切换到不同的背景图片。这种效果可以增加用户体验的趣味性和互动性，常被...
纯CSS实现鼠标移动切换图片示例
09-25
通过这种方式，我们可以用纯CSS实现一个简单的鼠标悬停时图片切换的效果。这种技术不仅减少了对JavaScript的依赖，还优化了页面加载速度，因为CSS通常比JavaScript更快地加载和解析。同时，对于那些禁用了JavaScript...
12种炫酷CSS3图片切换过渡效果
12-29
在“12种炫酷CSS3图片切换过渡效果”这个主题中，我们将深入探讨这些效果的实现方法和应用场景。 1. **滑动切换**：这种效果通常用于轮播图，图片沿水平或垂直方向平滑滑动，提供了一种流畅的视觉过渡。通过`...
CSS实现图片切换效果
qq_35177516的博客
07-16 445
【代码】CSS实现图片切换效果。
css3学习笔记（三）---切换背景图像，融合笔记二的知识
SirM2z的博客
05-23 1787
CSS3 Full Background Slider @importurl("http://www.w3cplus.com/demo/css3/base.css"); @importurl("http://fonts.googleapis.com/css?family=Yesteryear"); html
纯css3实现图片自动切换
HL141916的博客
05-25 2万+
实现图片自动切换需要用到的主要是css3里面的过渡这一节的内容。 大致思路是这样的： 1、将图片设置为li的背景图片； 2、规定一个@keyframes的规则使得图片按照这个规则进行切换； 3、设置每张图片出现的时间； 4、添加轮播焦点； 一、用li标签的background-image是为了实现纯CSS的动态切换。 二、规定一个@keyframes的规则，使图片按照这个规则进行切换
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值