如何解决如何向CSS滑块导航添加过渡?
我只想使用css和html制作类似水平导航的滑块
我正在使用CSS :target
移至所需的目标部分。
到目前为止一切顺利...请参见以下示例:
body {
margin: 0;
overflow: hidden;
}
.main {
display: -webkit-flex;
display: -ms-flexBox;
display: flex;
}
section {
position: absolute;
width: 100vw;
height: 100Vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transition: all .3s;
}
#section1 {
background: bisque;
transform: translateX(calc(0));
}
#section2 {
background: #f8cc99;
transform: translateX(calc(100vw * 1));
}
#section3 {
background: #efcfa9;
transform: translateX(calc(100vw * 2));
}
#section4 {
background: #ffe7c9;
transform: translateX(calc(100vw * 3));
}
<div class="main">
<section id="section1">
<div class="container">
<h1>Section 1</h1>
</div>
<div class="arrow"><a href="#section2">==></a></div>
</section>
<section id="section2">
<div class="container">
<h1>Section 2</h1>
</div>
<div class="arrow"><a href="#section3">==></a></div>
</section>
<section id="section3">
<div class="container">
<h1>Section 3</h1>
</div>
<div class="arrow"><a href="#section4">==></a></div>
</section>
<section id="section4">
<div class="container">
<h1>Section 4</h1>
</div>
<div class="arrow"><a href="#section1">==></a></div>
</section>
</div>
然后,我想为过渡添加效果,我正在尝试transform translate and transition translate
,但很遗憾,我无法使其正常工作
看看下面我的意思
body {
margin: 0;
overflow: hidden;
}
.main {
display: -webkit-flex;
display: -ms-flexBox;
display: flex;
}
section {
position: absolute;
width: 100vw;
height: 100Vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transition: all .3s;
}
#section1 {
background: bisque;
transform: translateX(calc(0));
}
#section2 {
background: #f8cc99;
transform: translateX(calc(100vw * 1));
}
#section3 {
background: #efcfa9;
transform: translateX(calc(100vw * 2));
}
#section4 {
background: #ffe7c9;
transform: translateX(calc(100vw * 3));
}
#section2:target {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
}
#section3:target {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
}
#section4:target {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
}
<div class="main">
<section id="section1">
<div class="container">
<h1>Section 1</h1>
</div>
<div class="arrow"><a href="#section2">==></a></div>
</section>
<section id="section2">
<div class="container">
<h1>Section 2</h1>
</div>
<div class="arrow"><a href="#section3">==></a></div>
</section>
<section id="section3">
<div class="container">
<h1>Section 3</h1>
</div>
<div class="arrow"><a href="#section4">==></a></div>
</section>
<section id="section4">
<div class="container">
<h1>Section 4</h1>
</div>
<div class="arrow"><a href="#section1">==></a></div>
</section>
</div>
我可以固定位置进行操作,但是我想保持水平滚动
任何帮助将不胜感激
解决方法
您可以通过将scroll-behavior: smooth
添加到节容器中来解决此问题。您不必为此添加任何过渡。
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');
body{
overflow:hidden;
margin:0px;
font-family:'Roboto',sans-serif;
}
.main {
height: 100vh;
display: flex;
overflow-y:hidden;
overflow-x: auto;
scroll-behavior: smooth;
}
section {
width: 100vw;
height: 100%;
transition: all .3s;
flex-shrink: 0;
position: relative;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
section a {
color: #ffffff;
text-decoration: none;
font-size: 18px;
background: rgba(0,0.5);
padding: 10px 25px;
border-radius: 50px;
margin-top: 15px;
}
section a:hover {
color: #ffffff
}
h1 {
color: #ffffff;
}
#section1 {
background: #6200EE;
}
#section2 {
background: #03DAC6;
}
#section3 {
background: #1a1a1a;
}
#section4 {
background: #ff4500;
}
<!DOCTYPE html>
<html>
<head>
<title>Sample</title>
</head>
<body>
<div class="main">
<section id="section1">
<h1>Section 1</h1>
<a href="#section2">Go to Section 2</a>
</section>
<section id="section2">
<h1>Section 2</h1>
<a href="#section3">Go to Section 3</a>
</section>
<section id="section3">
<h1>Section 3</h1>
<a href="#section4">Go to Section 4</a>
</section>
<section id="section4">
<h1>Section 4</h1>
<a href="#section1">Go to Section 1</a>
</section>
</div>
</body>
</html>
注意:以下浏览器版本支持scroll-behaviour
属性:
有关更多信息,请访问:CSS scroll-behavior Property
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。