一些样式推荐
按钮1
按钮代码
.button-wrapper {
position: relative;
transform-style: preserve-3d;
transition: transform 0.2s ease;
padding: 40px;
}
.spiderverse-button {
position: relative;
padding: 15px 30px;
font-size: 24px;
font-weight: 900;
border: none;
border-radius: 50px;
cursor: pointer;
background: #fff;
color: #000;
text-transform: uppercase;
letter-spacing: 3px;
transform-style: preserve-3d;
transition: all 0.15s ease;
font-family: Arial, sans-serif;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
.glitch-text {
position: relative;
display: inline-block;
}
.glitch-layers {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.glitch-layer {
position: absolute;
content: "CLICK ME";
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
border-radius: 50px;
opacity: 0;
transition: all 0.15s ease;
}
.layer-1 {
color: #0ff;
transform-origin: center;
}
.layer-2 {
color: #f0f;
transform-origin: center;
}
.button-wrapper:hover .layer-1 {
opacity: 1;
animation: glitchLayer1 0.4s steps(2) infinite;
}
.button-wrapper:hover .layer-2 {
opacity: 1;
animation: glitchLayer2 0.4s steps(2) infinite;
}
.button-wrapper:hover .spiderverse-button {
animation: buttonGlitch 0.3s steps(2) infinite;
box-shadow:
0 0 20px rgba(255, 255, 255, 0.5),
0 0 30px rgba(0, 255, 255, 0.5),
0 0 40px rgba(255, 0, 255, 0.5);
}
.noise {
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: repeating-radial-gradient(
circle at 50% 50%,
transparent 0,
rgba(0, 0, 0, 0.1) 1px,
transparent 2px
);
pointer-events: none;
opacity: 0;
transition: opacity 0.3s;
animation: noise 0.2s steps(2) infinite;
}
.button-wrapper:hover .noise {
opacity: 1;
}
@keyframes buttonGlitch {
0% {
transform: translate(0) scale(1.1);
}
25% {
transform: translate(-10px, 5px) scale(1.15) skew(-5deg);
}
50% {
transform: translate(10px, -5px) scale(1.1) skew(5deg);
}
75% {
transform: translate(-15px, -5px) scale(1.05) skew(-3deg);
}
100% {
transform: translate(0) scale(1.1);
}
}
@keyframes glitchLayer1 {
0% {
transform: translate(-20px, -10px) scale(1.1) skew(-10deg);
clip-path: polygon(0 20%, 100% 20%, 100% 50%, 0 50%);
}
25% {
transform: translate(20px, 10px) scale(1.2) skew(10deg);
clip-path: polygon(0 30%, 100% 30%, 100% 60%, 0 60%);
}
50% {
transform: translate(-15px, 5px) scale(0.9) skew(-5deg);
clip-path: polygon(0 10%, 100% 10%, 100% 40%, 0 40%);
}
75% {
transform: translate(15px, -5px) scale(1.3) skew(5deg);
clip-path: polygon(0 40%, 100% 40%, 100% 70%, 0 70%);
}
100% {
transform: translate(-20px, -10px) scale(1.1) skew(-10deg);
clip-path: polygon(0 20%, 100% 20%, 100% 50%, 0 50%);
}
}
@keyframes glitchLayer2 {
0% {
transform: translate(20px, 10px) scale(1.1) skew(10deg);
clip-path: polygon(0 50%, 100% 50%, 100% 80%, 0 80%);
}
25% {
transform: translate(-20px, -10px) scale(1.2) skew(-10deg);
clip-path: polygon(0 60%, 100% 60%, 100% 90%, 0 90%);
}
50% {
transform: translate(15px, -5px) scale(0.9) skew(5deg);
clip-path: polygon(0 40%, 100% 40%, 100% 70%, 0 70%);
}
75% {
transform: translate(-15px, 5px) scale(1.3) skew(-5deg);
clip-path: polygon(0 70%, 100% 70%, 100% 100%, 0 100%);
}
100% {
transform: translate(20px, 10px) scale(1.1) skew(10deg);
clip-path: polygon(0 50%, 100% 50%, 100% 80%, 0 80%);
}
}
@keyframes noise {
0% {
transform: translate(0, 0);
}
10% {
transform: translate(-5%, -5%);
}
20% {
transform: translate(10%, 5%);
}
30% {
transform: translate(-5%, 10%);
}
40% {
transform: translate(15%, -5%);
}
50% {
transform: translate(-10%, 15%);
}
60% {
transform: translate(5%, -10%);
}
70% {
transform: translate(-15%, 5%);
}
80% {
transform: translate(10%, 10%);
}
90% {
transform: translate(-5%, 15%);
}
100% {
transform: translate(0, 0);
}
}
.glitch-slice {
position: absolute;
width: 120%;
height: 5px;
background: #fff;
opacity: 0;
animation: slice 3s linear infinite;
}
@keyframes slice {
0% {
top: -10%;
opacity: 0;
}
1% {
opacity: 0.5;
}
3% {
opacity: 0;
}
50% {
top: 110%;
}
100% {
top: 110%;
}
}
//CS 分割线
<div class="button-wrapper">
<button class="spiderverse-button">
WELCOME
<div class="glitch-layers">
<div class="glitch-layer layer-1">ITCK</div>
<div class="glitch-layer layer-2">ITCK</div>
</div>
<div class="noise"></div>
<div class="glitch-slice"></div>
</button>
</div>
泡泡
泡泡代码
button {
position: relative;
padding: 10px 20px;
border-radius: 7px;
border: 1px solid rgb(61, 106, 255);
font-size: 14px;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 2px;
background: transparent;
color: #fff;
overflow: hidden;
box-shadow: 0 0 0 0 transparent;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
button:hover {
background: rgb(61, 106, 255);
box-shadow: 0 0 30px 5px rgba(0, 142, 236, 0.815);
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
button:hover::before {
-webkit-animation: sh02 0.5s 0s linear;
-moz-animation: sh02 0.5s 0s linear;
animation: sh02 0.5s 0s linear;
}
button::before {
content: '';
display: block;
width: 0px;
height: 86%;
position: absolute;
top: 7%;
left: 0%;
opacity: 0;
background: #fff;
box-shadow: 0 0 50px 30px #fff;
-webkit-transform: skewX(-20deg);
-moz-transform: skewX(-20deg);
-ms-transform: skewX(-20deg);
-o-transform: skewX(-20deg);
transform: skewX(-20deg);
}
@keyframes sh02 {
from {
opacity: 0;
left: 0%;
}
50% {
opacity: 1;
}
to {
opacity: 0;
left: 100%;
}
}
button:active {
box-shadow: 0 0 0 0 transparent;
-webkit-transition: box-shadow 0.2s ease-in;
-moz-transition: box-shadow 0.2s ease-in;
transition: box-shadow 0.2s ease-in;
}
// cs分割线
按钮2
Hover Me
Lorem Ipsum
Hover Me
Lorem Ipsum
Hover Me
Lorem Ipsum
按钮代码
.cards {
display: flex;
flex-direction: column;
gap: 15px;
}
.cards .red {
background-color: #f43f5e;
}
.cards .blue {
background-color: #3b82f6;
}
.cards .green {
background-color: #22c55e;
}
.cards .card {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
height: 100px;
width: 250px;
border-radius: 10px;
color: white;
cursor: pointer;
transition: 400ms;
}
.cards .card p.tip {
font-size: 1em;
font-weight: 700;
}
.cards .card p.second-text {
font-size: .7em;
}
.cards .card:hover {
transform: scale(1.1, 1.1);
}
.cards:hover > .card:not(:hover) {
filter: blur(10px);
transform: scale(0.9, 0.9);
}
Hover Me
Lorem Ipsum
Hover Me
Lorem Ipsum
Hover Me
Lorem Ipsum
翻转卡片
FLIP CARD
Hover Me
BACK
Leave Me
翻转卡片代码
.flip-card {
background-color: transparent;
width: 190px;
height: 254px;
perspective: 1000px;
font-family: sans-serif;
}
.title {
font-size: 1.5em;
font-weight: 900;
text-align: center;
margin: 0;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
box-shadow: 0 8px 14px 0 rgba(0,0,0,0.2);
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border: 1px solid coral;
border-radius: 1rem;
}
.flip-card-front {
background: linear-gradient(120deg, bisque 60%, rgb(255, 231, 222) 88%,
rgb(255, 211, 195) 40%, rgba(255, 127, 80, 0.603) 48%);
color: coral;
}
.flip-card-back {
background: linear-gradient(120deg, rgb(255, 174, 145) 30%, coral 88%,
bisque 40%, rgb(255, 185, 160) 78%);
color: white;
transform: rotateY(180deg);
}
//cs 分割
FLIP CARD
Hover Me
BACK
Leave Me
按钮2
按钮代码
.voltage-button {
position: relative;
}
.voltage-button button {
color: white;
background: #0D1127;
padding: 1rem 3rem 1rem 3rem;
border-radius: 5rem;
border: 5px solid #5978F3;
font-size: 1.2rem;
line-height: 1em;
letter-spacing: 0.075em;
transition: background 0.3s;
}
.voltage-button button:hover {
cursor: pointer;
background: #0F1C53;
}
.voltage-button button:hover + svg, .voltage-button button:hover + svg + .dots {
opacity: 1;
}
.voltage-button svg {
display: block;
position: absolute;
top: -0.75em;
left: -0.25em;
width: calc(100% + 0.5em);
height: calc(100% + 1.5em);
pointer-events: none;
opacity: 0;
transition: opacity 0.4s;
transition-delay: 0.1s;
}
.voltage-button svg path {
stroke-dasharray: 100;
filter: url("#glow");
}
.voltage-button svg path.line-1 {
stroke: #f6de8d;
stroke-dashoffset: 0;
animation: spark-1 3s linear infinite;
}
.voltage-button svg path.line-2 {
stroke: #6bfeff;
stroke-dashoffset: 500;
animation: spark-2 3s linear infinite;
}
.voltage-button .dots {
opacity: 0;
transition: opacity 0.3s;
transition-delay: 0.4s;
}
.voltage-button .dots .dot {
width: 1rem;
height: 1rem;
background: white;
border-radius: 100%;
position: absolute;
opacity: 0;
}
.voltage-button .dots .dot-1 {
top: 0;
left: 20%;
animation: fly-up 3s linear infinite;
}
.voltage-button .dots .dot-2 {
top: 0;
left: 55%;
animation: fly-up 3s linear infinite;
animation-delay: 0.5s;
}
.voltage-button .dots .dot-3 {
top: 0;
left: 80%;
animation: fly-up 3s linear infinite;
animation-delay: 1s;
}
.voltage-button .dots .dot-4 {
bottom: 0;
left: 30%;
animation: fly-down 3s linear infinite;
animation-delay: 2.5s;
}
.voltage-button .dots .dot-5 {
bottom: 0;
left: 65%;
animation: fly-down 3s linear infinite;
animation-delay: 1.5s;
}
@keyframes spark-1 {
to {
stroke-dashoffset: -1000;
}
}
@keyframes spark-2 {
to {
stroke-dashoffset: -500;
}
}
@keyframes fly-up {
0% {
opacity: 0;
transform: translateY(0) scale(0.2);
}
5% {
opacity: 1;
transform: translateY(-1.5rem) scale(0.4);
}
10%, 100% {
opacity: 0;
transform: translateY(-3rem) scale(0.2);
}
}
@keyframes fly-down {
0% {
opacity: 0;
transform: translateY(0) scale(0.2);
}
5% {
opacity: 1;
transform: translateY(1.5rem) scale(0.4);
}
10%, 100% {
opacity: 0;
transform: translateY(3rem) scale(0.2);
}
}
// CS分割
上翻卡片
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vitae justo vel lorem tincidunt ultrices at non nunc. Donec in sapien viverra, tincidunt augue id, efficitur massa.
上翻卡片代码
section.card {
position: relative;
width: 350px;
height: 200px;
background-color: #474dc3;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
perspective: 1000px;
transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.card svg {
fill: #333;
transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
border-radius: 3px;
}
.card:hover {
transform: scale(1.05);
box-shadow: 0 8px 16px #000000;
background-color: #474dc3;
color: #ffffff;
}
.card__content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 20px;
box-sizing: border-box;
background-color: #474dc3;
transform: rotateX(-90deg);
transform-origin: bottom;
transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.card:hover .card__content {
transform: rotateX(0deg);
}
.card__title {
margin: 0;
padding-left: 5px;
font-size: 24px;
color: var(--white);
font-weight: 700;
}
.card:hover svg {
scale: 0;
}
.card__description {
margin: 10px 0 0;
font-size: 14px;
color: #ffffff;
line-height: 1.4;
}
/* Commands to change the shadows in dark mode
@media (prefers-color-scheme: dark) {
.card:hover {
box-shadow: 0 8px 16px #000000;
}
}*/
//CS 分割
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vitae
justo vel lorem tincidunt ultrices at non nunc. Donec in sapien viverra,
tincidunt augue id, efficitur massa.
用户卡片
Narmesh Kumar Sah
@Your Web Wizard
Creative design and web enthusiast. Building digital experiences that
matter.
15k
Followers
82
Posts
4.8
Rating
用户卡片代码
.profile-card {
position: relative;
width: 320px;
background: rgba(255, 255, 255, 0.9);
-webkit-backdrop-filter: blur(48px);
backdrop-filter: blur(48px);
border-radius: 20px;
padding: 2rem;
box-shadow: 12px 12px 12px -20px rgba(0, 0, 0, 0.3);
transform: perspective(1000px) scale(0.8); /*adjust the scale to view properly*/
transform-style: preserve-3d;
}
.profile-image {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #f0f2f5;
margin: 0 auto 1rem;
overflow: hidden;
border: 3px solid white;
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.6);
display: flex;
align-items: center;
justify-content: center;
}
.profile-image::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 96px;
background-color: #7d988a;
border-radius: 20px 20px 0 0;
z-index: -1;
}
.profile-info {
text-align: left;
margin-bottom: 1.5rem;
}
.profile-name {
font-size: 1.5rem;
font-weight: 600;
color: #1a1a1a;
margin-bottom: 0.25rem;
}
.profile-title {
font-size: 0.9rem;
color: #666;
margin-bottom: 0.5rem;
}
.profile-bio {
font-size: 0.85rem;
color: #777;
line-height: 1.4;
margin-bottom: 1.5rem;
}
.social-links {
display: flex;
gap: 0.5rem;
margin-bottom: 1.5rem;
}
.social-btn {
width: 40px;
height: 40px;
border-radius: 50%;
border: none;
background: #f0f2f5;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.social-btn:hover {
background: #e4e6e9;
transform: translateY(-6px);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
.social-btn svg {
width: 20px;
height: 20px;
fill: #1a1a1a;
transition: all 0.2s ease;
}
.social-btn:hover svg {
fill: #0066ff;
}
/* Specific colors for each social platform */
.social-btn.twitter:hover svg {
fill: #1da1f2;
}
.social-btn.instagram:hover svg {
fill: #e4405f;
}
.social-btn.linkedin:hover svg {
fill: #0a66c2;
}
.social-btn.github:hover svg {
fill: #333333;
}
.cta-button {
width: 100%;
padding: 0.8rem;
border: none;
border-radius: 10px;
background: #7d988a;
color: white;
font-weight: 600;
cursor: pointer;
transition:
transform 0.2s,
background 0.2s;
}
.cta-button:hover {
background: #4d5d54;
transform: translateY(-2px);
}
.stats {
display: flex;
justify-content: space-between;
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid #eee;
}
.stat-item {
text-align: center;
}
.stat-value {
font-weight: 600;
color: #1a1a1a;
}
.stat-label {
font-size: 0.8rem;
color: #666;
}
//cs 分割
Narmesh Kumar Sah
@Your Web Wizard
Creative design and web enthusiast. Building digital experiences that
matter.
15k
Followers
82
Posts
4.8
Rating
版权声明:
作者:小站做题家
链接:https://itck.top/696/
文章版权归作者所有,未经允许请勿转载。
THE END