css实现2d与3d图标列表无限滚动动画切换效果代码
代码语言：html
所属分类：加载滚动
代码描述：css实现2d与3d图标列表无限滚动动画切换效果代码，右侧可配置参数和滚动速度。
代码标签： css 2d 3d 图标 列表 无限 滚动 动画 切换
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
@font-face {
font-family: "Geist Sans";
src: url("//repo.bfw.wiki/bfwrepo/font/GeistVF.ttf") format("truetype");
}
*,
*:after,
*:before {
box-sizing: border-box;
}
:root {
--speed: 10s;
--transition: 0.15s;
}
body {
display: grid;
place-items: center;
min-height: 100vh;
color: hsl(0 0% 10%);
font-family: "Geist Sans", "SF Pro Text", "SF Pro Icons", "AOS Icons", "Helvetica Neue", Helvetica, Arial, sans-serif, system-ui;
background-image:
radial-gradient(at 27% 37%, hsla(215, 98%, 61%, 0.15) 0px, transparent 0%),
radial-gradient(at 97% 21%, hsla(125, 98%, 72%, 0.15) 0px, transparent 50%),
radial-gradient(at 52% 99%, hsla(354, 98%, 61%, 0.15) 0px, transparent 50%),
radial-gradient(at 10% 29%, hsla(256, 96%, 67%, 0.15) 0px, transparent 50%),
radial-gradient(at 97% 96%, hsla(38, 60%, 74%, 0.15) 0px, transparent 50%),
radial-gradient(at 33% 50%, hsla(222, 67%, 73%, 0.15) 0px, transparent 50%),
radial-gradient(at 79% 53%, hsla(343, 68%, 79%, 0.15) 0px, transparent 50%);
background-color: hsl(0 0% 100%);
font-weight: 80;
transition: background-color 0.25s, color 0.25s;
}
main {
padding: 2rem 0;
width: 100%;
}
:root:has(#theme:checked) :is(body, .controls, .item) {
background-color: hsl(0 0% 10%);
color: hsl(0 0% 100%);
border-color: hsl(0 0% 25%);
}
:root:has(#theme:checked) article {
background-color: hsl(0 0% 10%);
color: hsl(0 0% 100%);
border-color: hsl(0 0% 25%);
box-shadow: 0 10px 20px -5px hsl(0 0% 0% / 0.5);
}
:root:has(#theme:checked) .item {
background-color: black;
}
:root:has(#theme:checked) li::before {
background-color: black;
}
article {
padding: 2rem;
margin: 0 auto;
width: 100%;
box-shadow: 0 10px 20px -5px hsl(0 0% 50% / 0.5);
border: 1px solid hsl(0 0% 90%);
border-radius: 6px;
background: hsl(0 0% 100%);
resize: horizontal;
overflow: hidden;
max-width: min(calc(600px + 8rem), calc(100vw - 2rem));
min-width: 340px;
container-type: inline-size;
transition: background-color 0.25s, color 0.25s, border 0.25s, box-shadow 0.25s;
}
h2 {
display: flex;
gap: 0.25ch;
font-size: clamp(1.5rem, 4cqi + 1rem, 3rem);
font-weight: 160;
margin: 0;
grid-column: 1 / -1;
}
h2 span:last-of-type {
display: inline-block;
background: linear-gradient(to right, #9333ea, #db2777, #9333ea) 0 0 / 400% 100% no-repeat;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-animation: shade 4s infinite linear;
animation: shade 4s infinite linear;
}
@-webkit-keyframes shade {
to {
background-position: 100% 0;
}
}
@keyframes shade {
to {
background-position: 100% 0;
}
}
.header {
display: grid;
grid-template: auto 1fr / 6fr 4fr;
gap: 1rem;
margin-bottom: 2rem;
transition: opacity 0.5s;
}
article a {
align-self: start;
text-decoration: none;
justify-self: end;
border-radius: 100px;
padding: 0.5rem 2rem;
border: 0;
color: hsl(0 0% 100%);
font-weight: 120;
cursor: pointer;
background: linear-gradient(to right, #9333ea, #db2777) 0 0 / 200% 100% no-repeat;
transition: background-position 0.15s;
}
article a:is(:hover, :focus-visible) {
background-position: 100% 0;
}
p {
margin: 0;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
[for=theme] {
width: 48px;
aspect-ratio: 1;
position: fixed;
bottom: 1rem;
right: 1rem;
display: grid;
place-items: center;
}
[for=theme] svg {
width: 75%;
}
#theme + svg path:first-of-type,
#theme:checked + svg path:last-of-type {
opacity: 0;
}
#theme:checked + svg path:first-of-type {
opacity: 1;
}
.controls {
display: grid;
grid-template-columns: 1fr auto;
gap: 0.5rem;
padding: 1rem;
border: 1px solid hsl(0 0% 90%);
border-radius: 6px;
background: hsl(0 0% 100%);
position: fixed;
top: 1rem;
right: 1rem;
z-index: 2;
}
label, input {
accent-color: #db2777;
cursor: pointer;
}
/* border: 2px solid red;*/
.window {
height: 250px;
container-type: inline-size;
transform-style: preserve-3d;
width: 100%;
outline: 4px dashed transparent;
transition: outline 0.5s;
}
.scene {
--buff: 3rem;
height: 100%;
width: 100%;
-webkit-mask:
linear-gradient(transparent, white var(--buff) calc(100% - var(--buff)), transparent),
linear-gradient(90deg, transparent, white var(--buff) calc(100% - var(--buff)), transparent);
mask:
linear-gradient(transparent, white var(--buff) calc(100% - var(--buff)), transparent),
linear-gradient(90deg, transparent, white var(--buff) calc(100% - var(--buff)), transparent);
-webkit-mask-composite: source-in, xor;
mask-composite: intersect;
}
:root:has(#overflow:checked) .scene {
-webkit-mask: unset;
mask: unset;
}
:root:has(#overflow:checked) .window {
outline: 4px dashed #db2777;
}
:root:has(#overflow:checked) .header {
opacity: 0.2;
}
.dev-link {
width: 48px;
aspect-ratio: 1;
position: fixed;
top: 1rem;
left: 1rem;
display: grid;
place-items: center;
color: currentColor;
}
.dev-link svg {
width: 75%;
}
.grid {
--count: 6; /* The number of items you have */
--inset: 0; /* Controls the grid animation offset on entry/exit */
--outset: 2.5;
height: 100%;
width: 100%;
margin: 0;
list-style-type: none;
position: relative;
display: grid;
padding: 0 1rem;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 2rem;
transition: transform 0.5s;
/* 3D translation */
transform:
rotateX(calc(var(--rotate, 0) * 20deg))
rotateZ(calc(var(--rotate, 0) * -20deg))
skewX(calc(var(--rotate, 0) * 20deg));
}
:root:has(#dimension:checked) .grid {
--rotate: 1;
}
li {
min-height: 60px;
transform-style: preserve-3d;
width: 100%;
z-index: calc(1 + var(--active));
}
li::before {
content: "";
position: absolute;
inset: 4px 4px -2px -2px;
border-radius: 6px;
background: hsl(0 0% 0% / 0.1);
filter: blur(calc(var(--active, 0) * 8px));
z-index: -1;
transition: scale var(--transition), opacity var(--transition), translate var(--transition), filter var(--transition);
transform-origin: 50% 0;
scale: 1 calc(1 + (var(--active, 0) * 0.05));
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
}
.grid:hover li {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
.grid {
transform-style: preserve-3d;
gap: 1rem;
}
.item {
align-items: center;
background: hsl(0 0% 100%);
border: 1px solid hsl(0 0% 90%);
color: hsl(0 0% 10%);
border-radius: 6px;
cursor: pointer;
display: flex;
gap: 1rem;
height: 100%;
justify-content: start;
overflow: hidden;
padding: 1.25rem;
text-align: center;
width: 100%;
transition: transform var(--transition), scale var(--transition), background-color 0.25s, color 0.25s, border 0.25s, box-shadow 0.25s;;
scale: calc(1 + (var(--active, 0) * 0.05));
transform: translate3d(0, 0, calc(var(--active, 0) * 24px));
}
.item__icon {
width: 24px;
color: rgb(124, 58, 237);
}
.item__text {
flex: 1;
text-align: center;
}
li:nth-of-type(1) { --index: 0; }
li:nth-of-type(2) { --index: 0; }
li:nth-of-type(3) { --index: 1; }
li:nth-of-type(4) { --index: 1; }
li:nth-of-type(5) { --index: 2; }
li:nth-of-type(6) { --index: 2; }
li:nth-of-type(7) { --index: 3; }
li:nth-of-type(8) { --index: 3; }
li:nth-of-type(9) { --index: 4; }
li:nth-of-type(10) { --index: 4; }
li:nth-of-type(11) { --index: 5; }
li:nth-of-type(12) { --index: 5; }
@container (width < 400px) {
.header {
grid-template: auto 1fr / 1fr;
}
.header a {
justify-self: start;
}
.grid {
--count: 12;
--inset: 0;
--outset: 3;
grid-template-columns: 1fr;
}
li:nth-of-type(1) { --index: 0; }
li:nth-of-type(2) { --index: 1; }
li:nth-of-type(3) { --index: 2; }
li:nth-of-type(4) { --index: 3; }
li:nth-of-type(5) { --index: 4; }
li:nth-of-type(6) { --index: 5; }
li:nth-of-type(7) { --index: 6; }
li:nth-of-type(8) { --index: 7; }
li:nth-of-type(9) { --index: 8; }
li:nth-of-type(10) { --index: 9; }
li:nth-of-type(11) { --index: 10; }
li:nth-of-type(12) { --index: 11; }
li {
--duration: calc(var(--speed) * 2);
--delay: calc((var(--duration) / var(--count)) * (var(--index, 0) - 8));
}
}
@media(prefers-reduced-motion: no-preference) {
.grid {
gap: 0 2rem;
}
li {
--duration: calc(var(--speed) * 1);
--delay: calc((var(--duration) / var(--count)) * (var(--index, 0) - 8));
-webkit-animation: slide var(--duration) var(--delay) infinite linear;
animation: slide var(--duration) var(--delay) infinite linear;
translate: 0% calc(((var(--count) - var(--index)) + var(--inset, 0)) * 100%);
}
li:hover {
--active: 1;
}
@-webkit-keyframes slide {
100% {
translate: 0% calc(calc((var(--index) + var(--outset, 0)) * -100%));
}
}
@keyframes slide {
100% {
translate: 0% calc(calc((var(--index) + var(--outset, 0)) * -100%));
}
}
@container (width < 400px) {
li {
--duration: calc(var(--speed) * 2);
--delay: calc((var(--duration) / var(--count)) * (var(--index, 0) - 8));
}
}
}
</style>
</head>
<body translate="no">
<a
target="_blank"
rel="noreferrer noopener"
class="dev-link"
href=""
><svg
class="w-9"
viewBox="0 0 969 955"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="161.191"
cy="320.191"
r="133.191"
stroke="currentColor"
stroke-width="20"
></circle>
<circle
cx="806.809"
cy="320.191"
r="133.191"
stroke="currentColor"
stroke-width="20"
></circle>
<circle
cx="695.019"
cy="587.733"
r="31.4016"
fill="currentColor"
></circle>
<circle
cx="272.981"
cy="587.733"
r="31.4016"
fill="currentColor"
></circle>
<path
d="M564.388 712.083C564.388 743.994 526.035 779.911 483.372 779.911C440.709 779.911 402.356 743.994 402.356 712.083C402.356 680.173 440.709 664.353 483.372 664.353C526.035 664.353 564.388 680.173 564.388 712.083Z"
fill="currentColor"
></path>
<rect
x="310.42"
y="448.31"
width="343.468"
height="51.4986"
fill="#FF1E1E"
></rect>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M745.643 288.24C815.368 344.185 854.539 432.623 854.539 511.741H614.938V454.652C614.938 433.113 597.477 415.652 575.938 415.652H388.37C366.831 415.652 349.37 433.113 349.37 454.652V511.741L110.949 511.741C110.949 432.623 150.12 344.185 219.845 288.24C289.57 232.295 384.138 200.865 482.744 200.865C581.35 200.865 675.918 232.295 745.643 288.24Z"
fill="currentColor"
></path></svg
><span class="sr-only">jhey.dev</span></a
>
<label for="theme">
<span class="sr-only">Toggle Theme</span>
<input class="sr-only" type="checkbox" id="theme" />
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="w-6 h-6"
>
<path
d="M12 2.25a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0V3a.75.75 0 0 1 .75-.75ZM7.5 12a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM18.894 6.166a.75.75 0 0 0-1.06-1.06l-1.591 1.59a.75.75 0 1 0 1.06 1.061l1.591-1.59ZM21.75 12a.75.75 0 0 1-.75.75h-2.25a.75.75 0 0 1 0-1.5H21a.75.75 0 0 1 .75.75ZM17.834 18.894a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 1 0-1.061 1.06l1.59 1.591ZM12 18a.75.75 0 0 1 .75.75V21a.75.75 0 0 1-1.5 0v-2.25A.75.75 0 0 1 12 18ZM7.758 17.303a.75.75 0 0 0-1.061-1.06l-1.591 1.59a.75.75 0 0 0 1.06 1.061l1.591-1.59ZM6 12a.75.75 0 0 1-.75.75H3a.75.75 0 0 1 0-1.5h2.25A.75.75 0 0 1 6 12ZM6.697 7.757a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 0 0-1.061 1.06l1.59 1.591Z"
/>
<path
fill-rule="evenodd"
d="M9.528 1.718a.75.75 0 0 1 .162.819A8.97 8.97 0 0 0 9 6a9 9 0 0 0 9 9 8.97 8.97 0 0 0 3.463-.69.75.75 0 0 1 .981.98 10.503 10.503 0 0 1-9.694 6.46c-5.799 0-10.5-4.7-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 0 1 .818.162Z"
clip-rule="evenodd"
/>
</svg>
</label>
<div class="controls">
<label for="dimension">3D</label>
<input type="checkbox" id="dimension" checked />
<label for="overflow">Overflow</label>
<input type="checkbox" id="overflow" />
<label for="speed">Speed (s)</label>
<input type="range" min="2" step="1" max="20" value="10" id="speed" />
</div>
<main>
<article>
<div class="header">
<h2><span>CSS</span><span>Masters</span></h2>
<p>
All the skills you need to take your styling to the next level.
Learn to think with a CSS first mindset. Approach problems
leveraging the platform. Use the platform. Embrace the platform.
</p>
<a
href=""
target="_blank"
rel="noreferrer noopener"
>Follow</a
>
</div>
<div class="window">
<div class="scene">
<ul class="grid">
<li>
<div class="item">
<div class="item__icon">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="w-6 h-6"
>
<path
fill-rule="evenodd"
d="M17.834 6.166a8.25 8.25 0 1 0 0 11.668.75.75 0 0 1 1.06 1.06c-3.807 3.808-9.98 3.808-13.788 0-3.808-3.807-3.808-9.98 0-13.788 3.807-3.808 9.98-3.808 13.788 0A9.722 9.722 0 0 1 21.75 12c0 .975-.296 1.887-.809 2.571-.514.685-1.28 1.179-2.191 1.179-.904 0-1.666-.487-2.18-1.164a5.25 5.25 0 1 1-.82-6.26V8.25a.75.75 0 0 1 1.5 0V12c0 .682.208 1.27.509 1.671.3.401.659.579.991.579.332 0 .69-.178.991-.579.3-.4.509-.99.509-1.671a8.222 8.222 0 0 0-2.416-5.834ZM15.75 12a3.75 3.75 0 1 0-7.5 0 3.75 3.75 0 0 0 7.5 0Z"
.........完整代码请登录后点击上方下载按钮下载查看
相似代码
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0