[html] 图片切换 —— 以幻灯片形式渐变切换

chaffee.Lee

已于 2022-03-09 21:29:36 修改

阅读量1k

点赞数 1

文章标签： html javascript 前端

于 2022-03-09 21:28:05 首次发布

本文链接：https://blog.csdn.net/weixin_43520070/article/details/123387359

版权

感谢https://blog.csdn.net/u013247277/article/details/70810124提供的思路，在原博代码的基础上实现了自动切换图片，并且图片大小不随网页缩放而变化

test

	<style type="text/css">
		*{margin:0;padding:0;}
	
		.d1 {
		  position: absolute;
		  width: 100vw;
		  height: 100vh;
		  overflow: hidden;
		}
	
		.d2{
			position: absolute;
			width: 100%;
			height: 100%;
			background: no-repeat 50% 50%;/*不重复，水平居中，垂直居中*/
			background-size: cover;
			opacity:0;
			transition:opacity 1s;
		}
		
		.d2:first-child{
			position: absolute;
			width: 100%;
			height: 100%;
			background: no-repeat 50% 50%;/*不重复，水平居中，垂直居中*/
			background-size: cover;
			opacity:1;
		}

	</style>
</head>
<body>
	<div class="d1">
		<div class="d2" style="background-image: url('img/1.jpg')"></div>
		<div class="d2" style="background-image: url('img/2.jpg')">&

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

chaffee.Lee

关注关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
[html] 图片切换 —— 以幻灯片形式渐变切换

感谢https://blog.csdn.net/u013247277/article/details/70810124提供的思路，在原博代码的基础上实现了自动切换图片，并且图片大小不随网页缩放 test <style type="text/css"> *{margin:0;padding:0;} .d1 { position: absolute; width: 100vw; height: 100vh; overflow: hidd
复制链接

扫一扫