滑块动画帮助
来源:dev.to
时间:2024-07-19 12:18:56 348浏览 收藏
本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的,希望这篇《滑块动画帮助》对你有很大帮助!欢迎收藏,分享给更多的需要的朋友学习~
我有一个包含 5 个图像的滑块,并且图像具有不同的尺寸,我正在尝试使它们之间的调整大小动画效果良好
在这段代码中,我在每个图像上放置了动画,我有兴趣纠正的动画尤其是“中”图像的动画,动画准备从“小”到“中”。
如果我把它移到左边,你就可以做到这一点,也就是说,如果我们有这个订单
1 | 2 | 3 | 4 | 5
看起来像这样将其向左移动:
2 | 3 | 4 | 5 | 6.
鉴于此示例情况,具有正确动画的图像是 5,因为它从“小”变为“中”,但看起来很糟糕的图像是 3,它必须从“大”变为“中” .
`
<!doctype html>
图像滑块
<br>
正文 {<br>
字体系列:arial、无衬线体;<br>
背景颜色:#f0f0f0;<br>
显示:flex;<br>
调整内容:center;<br>
对齐项目:中心;<br>
高度:100vh;<br>
边距:0;<br>
}</p>
<div class="highlight"><pre class="highlight plaintext"><code> .slider-container {
宽度:80%;
溢出:隐藏;
位置:相对;
高度:400px;
}
.slider { display: flex; transition: transform 0.5s ease-in-out; } .slide { flex: 0 0 20%; box-sizing: border-box; transition: transform 0.5s ease; } .slide h2, .slide p { opacity: 0; transform: translatey(20px); transition: opacity 0.5s ease, transform 0.5s ease; } .slide.hide-text h2, .slide.hide-text p { display: none; } .show-text h2, .show-text p { animation: fadein .9s ease forwards; } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } img { width: 100%; display: block; margin: 5px 0; } .small { margin-top: 48px; animation: fadeon .5s ease forwards; } @keyframes fadeon { from { scale: 0.8; } to { scale: .7; } } .medium { margin-top: 67px; animation: fadeon-2 .5s ease forwards; } @keyframes fadeon-2 { from { scale: 0.7; } to { scale: .9; } } .large { margin: 0 4px; animation: fadeon-3 .5s ease forwards; } @keyframes fadeon-3 { from { scale: 0.85; } to { scale: 1; } } .nav { position: absolute; top: 50%; width: 100%; display: flex; justify-content: space-between; transform: translatey(-50%); } .prev, .next { background-color: rgba(0, 0, 0, 0.5); color: white; border: none; padding: 10px; cursor: pointer; z-index: 1; } div { display: flex; flex-direction: column; } h2,p { text-align: center; } p { font-size: 10px; margin-top: -20px; }
风格>
</code></pre></div>
<p></head><br>
<body><br>
<section class="slider-container"><br>
<nav 类=“滑块”><br>
<div class="slide"><br>
<h2>服务</h2><br>
<img src="image1.jpg" alt="图片 1"><br>
<p>创造难忘的订婚体验!不仅在您梦想的地点拍摄令人惊叹的照片和视频,之后我们还将像 vip 一样对待您。汽车服务将接您并带您去任何您想继续庆祝的地方。</p><br>
</div><br>
<div class="slide"><br>
<h2>服务</h2><br>
<img src="image2.jpg" alt="图片 2"><br>
<p>创造难忘的订婚体验!不仅在您梦想的地点拍摄令人惊叹的照片和视频,之后我们还将像 vip 一样对待您。汽车服务将接您并带您去任何您想继续庆祝的地方。</p><br>
</div><br>
<div class="slide"><br>
<h2>服务</h2><br>
<img src="image3.jpg" alt="图片 3"><br>
<p>创造难忘的订婚体验!不仅在您梦想的地点拍摄令人惊叹的照片和视频,之后我们还将像 vip 一样对待您。汽车服务将接您并带您去任何您想继续庆祝的地方。</p><br>
</div><br>
<div class="slide"><br>
<h2>服务</h2><br>
<img src="image4.jpg" alt="图片 4"><br>
<p>创造难忘的订婚体验!不仅在您梦想的地点拍摄令人惊叹的照片和视频,之后我们还将像 vip 一样对待您。汽车服务将接您并带您去任何您想继续庆祝的地方。</p><br>
</div><br>
<div class="slide"><br>
<h2>服务</h2><br>
<img src="image5.jpg" alt="图片 5"><br>
<p>创造难忘的订婚体验!不仅在您梦想的地点拍摄令人惊叹的照片和视频,之后我们还将像 vip 一样对待您。汽车服务将接您并带您去任何您想继续庆祝的地方。</p><br>
</div><br>
<div class="slide"><br>
<h2>服务</h2><br>
<img src="image6.jpg" alt="图片 6"><br>
<p>创造难忘的订婚体验!不仅在您梦想的地点拍摄令人惊叹的照片和视频,之后我们还将像 vip 一样对待您。汽车服务将接您并带您去任何您想继续庆祝的地方。</p><br>
</div><br>
<div class="slide"><br>
<h2>服务</h2><br>
<img src="image7.jpg" alt="图片 7"><br>
<p>创造难忘的订婚体验!不仅在您梦想的地点拍摄令人惊叹的照片和视频,之后我们还将像 vip 一样对待您。汽车服务将接您并带您去任何您想继续庆祝的地方。</p><br>
</div><br>
<div class="slide"><br>
<h2>服务</h2><br>
<img src="image8.jpg" alt="图片 8"><br>
<p>创造难忘的订婚体验!不仅在您梦想的地点拍摄令人惊叹的照片和视频,之后我们还将像 vip 一样对待您。汽车服务将接您并带您去任何您想继续庆祝的地方。</p><br>
</div><br>
<div class="slide"><br>
<h2>title</h2><br>
<img src="image9.jpg" alt="图片 9"><br>
<p>创造难忘的订婚体验!不仅在您梦想的地点拍摄令人惊叹的照片和视频,之后我们还将像 vip 一样对待您。汽车服务将接您并带您去任何您想继续庆祝的地方。</p><br>
</div><br>
<div class="slide"><br>
<h2>title</h2><br>
<img src="image10.jpg" alt="图片 10"><br>
<p>创造难忘的订婚体验!不仅在您梦想的地点拍摄令人惊叹的照片和视频,之后我们还将像 vip 一样对待您。汽车服务将接您并带您去任何您想继续庆祝的地方。</p><br>
</div><br>
</nav><br>
<nav 类=“nav”><br>
<button class="prev" onclick="plusslides(-1)">❮</button><br>
<button class="next" onclick="plusslides(1)">❯</button><br>
</nav><br>
</section></p>
<div class="高亮"><pre class="高亮明文"><code>
</code></pre></div>
<p>let slipindex = 0;<br>
const slides = document.getelementsbyclassname("slide");<br>
const slider = document.queryselector(".slider");<br>
const slidestoshow = 5;<br>
const slidewidth = 100 / slipstoshow;</p>
<p>function plusslides(n) {<br>
slideindex += n;<br>
if (slideindex > slips.length - slidestoshow) {<br>
slideindex = 0;<br>
} else if (slideindex
slideindex =幻灯片.length-slidestoshow;<br>
}<br>
showslides();<br>
}</p>
<p>function showslides() {<br>
slider.style.transform = 'translatex(' + (-slideindex * slidewidth) + '%)';</p>
<div class="highlight"><pre class="highlight plaintext"><code>for (let i = 0; i
slides[i].classlist.remove("小", "中", "大", "隐藏文本", "显示文本");
if (i === (slideIndex + 2) % slides.length) { slides[i].classList.add("large"); slides[i].classList.add("show-text"); } else if (i === (slideIndex + 1) % slides.length || i === (slideIndex + 3) % slides.length) { slides[i].classList.add("medium", "hide-text"); } else if (i === slideIndex || i === (slideIndex + 4) % slides.length) { slides[i].classList.add("small", "hide-text"); } else { slides[i].classList.add("small", "hide-text"); }
}
</code></pre></div>
<p>}</p>
<p>showslides();<br>
</script><br>
</body><br>
</html><br>
`</p>
今天关于《滑块动画帮助》的内容介绍就到此结束,如果有什么疑问或者建议,可以在golang学习网公众号下多多回复交流;文中若有不正之处,也希望回复留言以告知!
-
501 收藏
-
501 收藏
-
501 收藏
-
501 收藏
-
501 收藏
-
105 收藏
-
472 收藏
-
125 收藏
-
166 收藏
-
254 收藏
-
301 收藏
-
- 前端进阶之JavaScript设计模式
- 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。
- 立即学习 541次学习
-
- GO语言核心编程课程
- 本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。
- 立即学习 506次学习
-
- 简单聊聊mysql8与网络通信
- 如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让
- 立即学习 497次学习
-
- JavaScript正则表达式基础与实战
- 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
- 立即学习 487次学习
-
- 从零制作响应式网站—Grid布局
- 本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。
- 立即学习 484次学习