CSS3简易切割轮播图的实现代码

时间：2021-05-08

实现思路

  • 首先创建一个父容器，用两个无序列表通过弹性布局将父容器分为两栏。
  • 在li里面存放图片通过给左边的li {background: url('图片地址') no-repeat; background-size: 200% 100%;}给右边的li{background-position-x: -300（父容器宽度的一半）px;}来实现将图片分割成两栏。
  • 给ul{ransform-style: preserve-3d; }属性来开启浏览器的3D显示。
  • 用子绝父相来将li叠放到一起ul{position: relative;} li {position: absolute;}。
  • 通过transform属性来设置li的旋转。
  • 到这里可以添加.box:hover>ul { transition: all 5s;transform: rotateX(360deg); } 来看看效果。
  • 最后添加两个按钮来让用户可以自己切换图片。
  • 点击时只用改变ul的旋转角度
btn1.onclick = ()=>{ item++; let r = item * 90; letf.style.transform = 'rotateX(' + r + 'deg)'; letf.style.transition = 'all 1s'; right.style.transform = 'rotateX(' + r + 'deg)'; right.style.transition = 'all 1s .3s'; } btn2.onclick = ()=>{ item--; let r = item * 90; letf.style.transform = 'rotateX(' + r + 'deg)'; letf.style.transition = 'all 1s'; right.style.transform = 'rotateX(' + r + 'deg)'; right.style.transition = 'all 1s .3s'; }

最后附上全部代码，希望对学习前端的你有所帮助

html代码

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>切割轮播图</title></head><body> <div class="box"> <ul class="letf"> <li></li> <li></li> <li></li> <li></li> </ul> <ul class="right"> <li></li> <li></li> <li></li> <li></li> </ul> </div> <button id="btn1">上一页</button><button id="btn2">下一页</button></body></html>

css 代码

*{ margin: 0; padding: 0;}body{ perspective: 800px;}.box{ display: flex; width: 600px; height: 350px; margin: 150px auto;}.box:hover ul li:nth-child(1){ transition: all 5s; transform: rotateX(360deg);}ul{ flex: 1; list-style: none; padding: 0; margin: 0; transform-style: preserve-3d; position: relative;}li{ width: 100%; height: 100%; position: absolute;}li:nth-child(1){ background: url('../images/9.jpg') no-repeat; background-size: 200% 100%; transform: translateZ(175px);}li:nth-child(2){ background: url('../images/10.jpg') no-repeat; background-size: 200% 100%; transform: rotateX(90deg) translateZ(175px);}li:nth-child(3){ background: url('../images/11.jpg') no-repeat; background-size: 200% 100%; transform: rotateX(180deg) translateZ(175px);}li:nth-child(4){ background: url('../images/12.jpg') no-repeat; background-size: 200% 100%; transform: rotateX(-90deg) translateZ(175px);}.right li{ background-position-x: -300px;}

js代码

let item = 0; let btn1 = document.getElementById('btn1'); let btn2 = document.getElementById('btn2'); let letf = document.querySelector('.letf'); let right = document.querySelector('.right') btn1.onclick = ()=>{ item++; let r = item * 90; letf.style.transform = 'rotateX(' + r + 'deg)'; letf.style.transition = 'all 1s'; right.style.transform = 'rotateX(' + r + 'deg)'; right.style.transition = 'all 1s .3s'; } btn2.onclick = ()=>{ item--; let r = item * 90; letf.style.transform = 'rotateX(' + r + 'deg)'; letf.style.transition = 'all 1s'; right.style.transform = 'rotateX(' + r + 'deg)'; right.style.transition = 'all 1s .3s'; }

到此这篇关于CSS3简易切割轮播图的实现代码的文章就介绍到这了,更多相关CSS3切割轮播图内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章