1. 实现效果
gif录屏比较卡，实际很湿滑，因为是css动画实现的
2.html结构
Infinite Scrolling Animation HTML CSS JavaScript Vue React Figma PhotoshopHTML CSS JavaScript Vue React Figma PhotoshopHTML CSS JavaScript Vue React Figma PhotoshopHTML CSS JavaScript Vue React Figma PhotoshopHTML CSS JavaScript Vue React Figma PhotoshopHTML CSS JavaScript Vue React Figma PhotoshopHTML CSS JavaScript Vue React Figma PhotoshopHTML CSS JavaScript Vue React Figma Photoshop1234567891-12-13-14-15-16-17-18-19-1
3. css代码
@import url('https://fonts.googleapis.com/css?family=Poppins:400,600,700,800&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
min-height: 100vh;
background-color: #222;
color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.scroll {
position: relative;
display: flex;
width: 700px;
overflow: hidden;
mask-image: linear-gradient(90deg, transparent, #fff 20%, #fff 80%, transparent);
-webkit-mask-image: linear-gradient(90deg, transparent, #fff 20%, #fff 80%, transparent);
}
.scroll > div span {
display: inline-block;
margin: 10px;
padding: 5px 10px;
background-color: #333;
border-radius: 5px;
letter-spacing: 0.2em;
text-transform: uppercase;
cursor: pointer;
transition: background-color 0.5s;
}
.scroll > div span:hover {
background-color: #4caf50;
}
.img-box {
display: flex;
column-gap: 10px;
}
.img-box > div,
.img-box > div .bg {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
}
.img-box .bg {
width: 150px;
height: 150px;
background-color: #ff3e3e;
filter: hue-rotate(calc(var(--r) * 1deg));
cursor: pointer;
transition: filter 0.5s;
}
.scroll > div {
white-space: nowrap;
animation: animate var(--t) linear infinite;
animation-delay: calc(var(--t) * -1);
}
@keyframes animate {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
.scroll > div:nth-child(2) {
animation: animate2 var(--t) linear infinite;
animation-delay: calc(var(--t) / -2);
}
@keyframes animate2 {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-200%);
}
}
.scroll:hover > div {
animation-play-state: paused;
}
@media screen and (max-width: 768px) {
.scroll {
width: 95vw;
}
.scroll > div span {
background-color: #4caf50;
}
.img-box .bg {
width: 15vw;
height: 15vw;
}
}
到此这篇关于CSS3 实现文本与图片横向无限滚动动画的文章就介绍到这了,更多相关CSS3 横向无限滚动动画内容请搜索IT俱乐部以前的文章或继续浏览下面的相关文章，希望大家以后多多支持IT俱乐部！
