全屏响应式的图文幻灯片轮播特效(淡入淡出效果)
纯css3制作全屏大气的图文幻灯片轮播，响应式图片轮播ui特效。
<html>
<head>
<meta charset="UTF-8">
<title>全屏响应式的图文幻灯片轮播特效(淡入淡出效果)</title>
<style>
@font-face{font-family:FontStyle;src:url("https://vkceyugu.cdn.bspapp.com/VKCEYUGU-a1379182-754c-4a02-82c5-d76d2e83e907/15ff31de-af5d-4fb8-bead-e517bbc7d728.woff2");format"woff2";font-display:fallback;}
@font-face {font-family: "shishang";src: url("https://cdn.liuzhixi.cn/fonts/ShiShangZhongHeiJianTi.woff2");format"woff2";font-display:fallback;}
*{padding:0;margin:0;box-sizing:border-box;}html{font-size:10px;}body{background-color:#000;}.slideshow{width:100%;height:100vh;position:relative;overflow:hidden;}.slideshow-item{width:inherit;height:inherit;position:absolute;opacity:0;animation:slideanim 31s infinite;}.slideshow-item:nth-child(1),.slideshow-item:nth-child(1) img{animation-delay:0;}.slideshow-item:nth-child(2),.slideshow-item:nth-child(2) img{animation-delay:10s;}.slideshow-item:nth-child(3),.slideshow-item:nth-child(3) img{animation-delay:20s;}.slideshow-item img{width:100%;height:100%;object-fit:cover;animation:zoom 31s infinite;}.slideshow-item-text{max-width:50%;position:absolute;top:50%;transform:translateY(-50%);left:0;background-color:rgba(0,0,0,0.8);color:#fff;padding:10rem 5rem;font-family:'Raleway',sans-serif;}.slideshow-item-text h5{font-size:3.5rem;letter-spacing:3px;font-family:shishang,'微软雅黑';}.slideshow-item-text p{font-weight:300;font-size:1.6rem;margin-top:2rem;font-family:FontStyle,'微软雅黑';}@keyframes slideanim{25%{opacity:1;}40%{opacity:0;}}@keyframes zoom{100%{transform:scale(1.3);}}@media screen and (max-width:1100px){.slideshow-item-text{max-width:75%;}}@media screen and (max-width:768px){.slideshow-item-text{padding:3rem 1.5rem;}}@media screen and (max-width:456px){.slideshow-item-text{max-width:100%;top:inherit;transform:translateY(0);bottom:0;}.slideshow-item-text h5{font-size:2rem;}.slideshow-item-text p{font-size:1rem;}}
</style>
</head>
<body>
<div class="slideshow">
<div class="slideshow-item">
<img src="https://img.alicdn.com/imgextra/i3/O1CN01JtZWlv1IZRzwp2Kuh_!!6000000000907-2-tps-2880-1144.png" alt="First Image Silde Picture">
<div class="slideshow-item-text">
<h5>网站建设</h5>
<p>专业设计师1对1为其量身建站，集成阿里云计算资源，涵盖手机客户端下载专区及会员积分查询等功能，助力企业实现品牌数字化营销，提升企业品牌知名度。</p>
</div>
</div>
<div class="slideshow-item">
<img src="https://img.alicdn.com/imgextra/i3/O1CN01VWX5Pl266o14dUpbW_!!6000000007613-2-tps-2880-1140.png " alt="First Image Silde Picture">
<div class="slideshow-item-text">
<h5>域名服务</h5>
<p>作为一家兼具教育基因和科技驱动力的科技教育公司，多年来，阿里云用其专业的企业级产品、贴心的品牌保护服务，和我们一起默默守护着无数学习者与奋斗者。</p>
</div>
</div>
<div class="slideshow-item">
<img src="https://img.alicdn.com/imgextra/i1/O1CN01pWU7vX26WSC5DtSAf_!!6000000007669-2-tps-4320-1710.png" alt="First Image Silde Picture">
<div class="slideshow-item-text">
<h5>工商财税</h5>
<p>专门为中小微企业解决网络需求，以“共享经济”模式为基础，整合“互联网工具+本地化服务。智能财税工具采取安全保密措施保护，保障了智能财税小程序系统安全，同时也保证了企业数据的安全性。为企业的长远发展保驾护航。</p>
</div>
</div>
</div>
</body>
</html>版权声明：本文由 LzxBlog 发布，如需转载请注明出处。
赞助云储存