如何解决如何正确设置 ::-webkit-scrollbar-thumb 动画？
所以我一直在玩 CSS 和其他东西，我发现你可以通过我的语法高亮显示滚动条拇指动画，但永远无法让它工作，它总是保持线性渐变并且没有动画它，然后我试过，如果我在另一个 HTML 文件中正确地制作动画并且我做得正确，它们只是在滚动条拇指中不起作用，我也觉得滚动条样式根本没有记录。下面的代码;
HTML：
<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width,initial-scale=1">
<title>FlexBox funsies</title>
<link rel="stylesheet" href="./style.css">
</link>
<script src="./script.js"></script>
</head> <!-- I need to remember this;
the head is basically like importing modules and setting variables except this is HTML so we only set our Meta(data) tags,import our script & css and also can set the title of our page !-->
<body>
<main>
<div class="container"> <!-- Here I made a container,containers are for... containing stuff,so if you make a div that's 50vh and 50vw,and then put something IN the div,it will be positioned in the div !-->
<div class="inContainer">
<div>Hello cruel world!</div>
<div>This is another div!</div>
<div>And Could we do another one?</div>
<div class="scrollbarHere">Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Cras elementum. Class aptent taciti sociosqu ad litora torquent per conubia nostra,per inceptos hymenaeos. Fusce tellus. Nam quis nulla. Nullam sit amet magna in magna gravida vehicula. Nulla accumsan,elit sit amet varius semper,nulla mauris mollis quam,tempor suscipit diam nulla vel leo. Fusce wisi. Aenean fermentum risus id tortor. Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Nullam dapibus fermentum ipsum. Nulla turpis magna,cursus sit amet,suscipit a,interdum id,felis. Integer tempor. Duis bibendum,lectus ut viverra rhoncus,dolor nunc faucibus libero,eget facilisis enim ipsum id lacus. Etiam sapien elit,consequat eget,tristique non,venenatis quis,ante.
Nullam sit amet magna in magna gravida vehicula. Nam quis nulla. Aliquam id dolor. Proin mattis lacinia justo. Fusce wisi. Nulla pulvinar eleifend sem. Suspendisse nisl. Duis pulvinar. Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Nullam sapien sem,ornare ac,nonummy non,lobortis a enim. Etiam sapien elit,ante. Et harum quidem rerum facilis est et expedita distinctio.</div>
<div id="tochange">FlexBox is so awesome!</div>
</div>
<div class="inContainer2">
<div>hey nice world!</div>
<button type="button" onclick="changeDivText()" class="basicButton">Click me!</button>
</div>
</div>
</main>
</body>
</html>
CSS：
/* To change something by ID,use # ex.: #my2ndDiv
To change sonething by class,use . ex.: .container
To change something by the DOM,use its name ex.: button */
* { /* sets these things for every element */
font-family: "./Lekton-Bold.ttf",monospace; /* for some reason you have to pass in the type of the font? */
color: #A6ADB8; /* text color */
margin: 0; /* these two reset some stuff for other browsers i dont really kNow */
padding: 0;
Box-sizing: border-Box;
}
main {
min-height: 100vh; /* vh is view-height so basically what is visible on the screen :) */
display: flex; /* makes our main a flexBox so that we can have things aligned easily */
align-items: center; /* will not work without display: flex; */
justify-content: center; /* will not work without display: flex; */
text-align: center; /* will not work without display: flex; */
background-color: #050A12;
}
.container {
background: linear-gradient(
to bottom left,rgba(185,181,199,0.05),/* rgba stands for Red Green Blue Alpha,which means that the last number,from 0 to 1 is the alpha (opacity) of the color */
rgba(185,0.12)
); /* linear gradient,you did gfx you kNow what that is. */
min-height: 80vh; /* sets the minimum height to 80 view-height */
min-width: 80vw; /* sets the minimum width to 80 view-width */
border-radius: 2rem; /* round things = better */
display: flex; /* covered on line 11 */
align-items: center; /* ^^^^ */
justify-content: center;
text-align: center;
}
.inContainer {
display: flex; /* line 11 */
flex: 1; /* we set our 'flex' to be 1 so that means if something next to it has 'flex' 2 then the width of this container will be 33% and the other thing next to it would have 66%,just get me... */
flex-direction: column; /* makes it so that stuff inside the container is displayed vertically instead of horizontally */
min-width: 30vw;
min-height: 80vh; /* ^^ blablabla talked about it before */
align-items: center;
justify-content: space-evenly; /* speaks for itself */
text-align: center;
background: linear-gradient(
to right bottom,0.1),0.2)
);
border-radius: 2rem;
Box-shadow: 16px 0 12px 0 rgba(0,0.2),0 6px 20px 0 rgba(0,0.15); /* makes a shadow just on the right side of the container */
}
.inContainer2 {
display: flex;
flex: 1.5;
flex-direction: column;
min-width: 30vw;
min-height: 80vh;
align-items: center;
justify-content: space-evenly;
text-align: center;
}
.basicButton {
font-size: 125%; /* here i have set the font size of the button text to 125%,100% is the default size,by increasing font size,button size also increases */
border-radius: 0.25rem;
border-style: none; /* i remove the ugly default style it gives it */
padding-top: 5px; /* makes a 5px space between text of the button and the top of the button */
padding-bottom: 5px; /* makes a 5px space between text of the button and the bottom of the button */
padding-left: 5px; /* makes a 5px space between text of the button and the left side of the button */
padding-right: 5px; /* makes a 5px space between text of the button and the right side of the button */
background: linear-gradient(
to right bottom,0.3)
);
Box-shadow: 16px 0 12px 0 rgba(0,0.15);
}
.scrollbarHere {
min-height: 20vh;
max-height: 20vh;
min-width: 20vw;
max-width: 20vw;
padding: 5px;
padding-right: 10px;
overflow-y: scroll;
word-break: break-all;
}
::-webkit-scrollbar {
background-color: #24282F;
}
::-webkit-scrollbar-thumb {
background: linear-gradient(to top,#32A9E5,#8EE532);
-webkit-animation:animate 5s linear infinite;
animation:animate 5s linear infinite;
-o-animation:animate 5s linear infinite;
-ms-animation:animate 5s linear infinite;
-moz-animation:animate 5s linear infinite;
height: 30%;
width: 60%;
border-radius: 2rem;
}
@-webkit-keyframes animate {
0% {
filter: hue-rotate(0deg);
}
100% {
filter: hue-rotate(360deg);
}
}
@-ms-keyframes animate {
0% {
filter: hue-rotate(0deg);
}
100% {
filter: hue-rotate(360deg);
}
}
@-o-keyframes animate {
0% {
filter: hue-rotate(0deg);
}
100% {
filter: hue-rotate(360deg);
}
}
@-moz-keyframes animate {
0% {
filter: hue-rotate(0deg);
}
100% {
filter: hue-rotate(360deg);
}
}
@keyframes animate {
0% {
filter: hue-rotate(0deg);
}
100% {
filter: hue-rotate(360deg);
}
}
感谢您的帮助！
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
