CSS3初级学习（二）背景图片叠加

最新推荐文章于 2024-07-01 10:00:53 发布

万物之恋

最新推荐文章于 2024-07-01 10:00:53 发布

阅读量2.2k

点赞数 3

分类专栏：前端基础知识点文章标签： css css3

本文链接：https://blog.csdn.net/weixin_47340917/article/details/115736043

版权

前端基础知识点专栏收录该内容

15 篇文章 1 订阅

订阅专栏

本文介绍了如何使用CSS3实现文字颜色变化、添加符号及背景图片叠加的交互效果。通过设置伪类`:hover`，实现了鼠标悬停时的文字颜色改变、背景图片切换以及符号的显示。关键点在于背景图片需透明，以便于叠加。同时，文章提醒在调整样式时要注意文字数量对布局的影响，并建议在无过渡效果下预览样式。

摘要由CSDN通过智能技术生成

CSS3初级学习（二）背景图片叠加

Hello！大家好久不见，这里是学业日渐繁忙的万物之恋，沉迷学习无心写博客(并不是），久违的来和大家分享下自己在学习过程中碰到的一些有趣案列。话不多说：

先看效果图：

完成效果
鼠标放置前(执行hover效果前)：

鼠标放置前(执行hover效果后)：

完成的效果有：1.文字颜色变化；
2.在文字后添加了“>>”符号；
3.实现背景图片叠加

上代码：

<button class="btn">
			<span>万物之恋</span>
</button>

上样式：

.btn{
		width: 300px;
		padding: 32px;
		color: black;
		font-size:25px;
		border:2px solid #A52A2A;
		border-radius: 5px;
		background: url(img/1.jpg) no-repeat;
		background-size: 100%;
		cursor: pointer;
		transition: 2s;
		text-align: left;
		}
.btn span{
		cursor: pointer;
		display: inline-block;
		position: relative;
		transition: 2s;
		}
.btn span:after{
		content: "\00bb";
		position: absolute;
		opacity: 0;
		top: 0;
		right: -20px;
		transition: 2s;
		}

注意点：1.为父级添加浮动“position：relative”，但没有让其实际进行移动是为了让伪类“after”的浮动生效；
2.“\00bb”是生成符号“>>”的关键；
3.在未执行设置伪类“hover”前，实际就已经生成了">>",通过设置不透明度“opcity:0”，让其不提前显示；

关键实现效果部分(定义伪类hover)：

.btn :hover{
			color: rgb(0, 255, 127);
			padding-left: 130px;
			background: url(img/狗.png) no-repeat;
			background-size: 120px 50px;
			transition: 2s;
			}
.btn:hover span:after {
		   color: white;
		   opacity: 1;
		   right: -30px;
			}