<style> .scroll {
position: relative;
display: flex;
width: 100%;
overflow: hidden;
background-image: linear-gradient(90deg, transparent, #fff 20%, #fff 80%, transparent),
radial-gradient(circle at center, transparent, #fff 0.1, transparent 0.5);
-webkit-background-image: linear-gradient(90deg, transparent, #fff 20%, #fff 80%, transparent),
radial-gradient(circle at center, transparent, #fff 0.1, transparent 0.5);
background-opacity: 0.7;
-webkit-background-opacity: 0.7;
}
.scroll div {
white-space: nowrap; animation: animate var(--t) linear infinite; animation-delay: calc(var(--t) * -1);
}
.scroll div:nth-child(2) {
animation: animate2 var(--t) linear infinite; animation-delay: calc(var(--t) / -2);
}
@keyframes animate {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
@keyframes animate2 {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-200%);
}
}
.scroll div span {
display: inline-flex; margin: 10px; background-color: #333; color: #fff; padding: 5px 10px; border-radius: 5px; cursor: pointer; letter-spacing: .2em; text-transform: uppercase; transition: .5s;
}
.scroll div span:hover {
background-color: #4caf50;
}
.imgbx img {
max-width: 100px; scale: .8; filter: grayscale(1); cursor: pointer; transition: .5s;
}
.imgbx img:hover {
filter: grayscale(0);
}
</style>
Html CSS Javascript ReactJS Figma Photoshop Angular 测试
Html CSS Javascript ReactJS Figma Photoshop Angular 测试
Html CSS Javascript ReactJS Figma Photoshop Angular
Html CSS Javascript ReactJS Figma Photoshop Angular
Html CSS Javascript ReactJS Figma Photoshop Angular
Html CSS Javascript ReactJS Figma Photoshop Angular
Html CSS Javascript ReactJS Figma Photoshop Angular
Html CSS Javascript ReactJS Figma Photoshop Angular