27 代码星球卡片

效果演示

实现了一个卡片式的网站页面，其中卡片的背景颜色和字体颜色随着鼠标移动而变化，鼠标悬停时会出现一个渐变的背景和文字颜色，卡片上方还有一个按钮，当鼠标点击按钮时会出现一个动态的渐变背景和文字颜色。整个页面的背景颜色为浅灰色。

Code

<div class="card">
    <div class="heading">Join the Open-Source <span>Galaxy</span></div>
    <div class="content">
        <div class="item item--create">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                <path fill="currentColor" d="...">
                </path>
            </svg>
            <span>Create</span>
        </div>
        <div class="item item--post">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                <path fill="currentColor" d="...">
                </path>
            </svg>
            <span>Post</span>
        </div>
        <div class="item item--inspire">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                <path fill="currentColor" d="...">
                </path>
            </svg>
            <span>Inspire</span>
        </div>
    </div>
    <button>Code to Infinity!</button>
</div>

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #e8e8e8;
}

.card {
    width: 8em;
    font-family: Montserrat;
    height: 8em;
    background: #ae47c2;
    box-shadow: inset -25px -25px 0px #a73dbd, 10px 10px 10px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    border-radius: 50%;
    transition: .4s ease-in-out;
}

.card:before {
    position: relative;
    text-align: center;
    content: "Code Planet";
    color: white;
    border-radius: 50%;
    top: 3.4em;
    left: 0.85em;
    font-weight: 600;
}

.card .heading {
    opacity: 0;
    transition: .1s ease-in-out;
}

.card .heading span {
    transition: .4s ease-in-out;
}

.card button {
    opacity: 0;
    transition: .001s ease-in-out;
}

.card .heading:hover {
    background: linear-gradient(to right, #fff 20%, orange 40%, yellow 60%, skyblue 80%, #ffe4f2 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient_6346 5s linear infinite;
    letter-spacing: 1px;
    scale: 1.01;
}

@keyframes gradient_6346 {
    to {
        background-position: 200% center;
    }
}

.card .content {
    opacity: 0;
    transition: .1s ease-in-out;
}

.card:hover {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    width: 15.4em;
    height: 22.9em;
    padding-top: .4em;
    padding-bottom: 1.5em;
    background-color: #171717;
    border-radius: 20px;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 2px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -1px 0px inset;
    background: linear-gradient(270deg, #ce68d9, #45c6db, #45db79);
    background-size: 800% 800%;
    -webkit-animation: AnimationName 3s ease infinite;
    -moz-animation: AnimationName 3s ease infinite;
    animation: AnimationName 3s ease infinite;
    transition: .4s ease-in-out;
}

.card:hover .heading {
    opacity: 1;
    transition: .8s ease-in-out;
}

.card:hover .content {
    opacity: 1;
    transition: .8s ease-in-out;
}

.card:hover button {
    opacity: 1;
    transition: .4s ease-in-out;
}

.card:hover::before {
    opacity: 0;
}

.heading {
    display: flex;
    flex-direction: column;
    color: white;
    font-size: 1em;
    text-align: center;
    padding-bottom: 1em;
    font-weight: bold;
    transition: .4s ease-in-out;
}

.content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 2em;
}

.item {
    font-size: 0.8em;
    margin: 0.5em;
    padding: 0.8em;
    display: flex;
    color: white;
    align-items: center;
    justify-content: center;
    gap: 0.8em;
    border-radius: 15px;
    transition: .4s ease-in-out;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}

.item:hover {
    cursor: pointer;
    scale: 0.9;
    box-shadow: none;
}

.item:active {
    cursor: pointer;
    scale: 0.8;
    box-shadow: inset 2px 5px 10px rgba(0, 0, 0, 0.2);
}

.item--create {
    padding-left: 2.5em;
    padding-right: 2.5em;
}

.item--post {
    padding-left: 3em;
    padding-right: 3em;
}

.item--inspire {
    padding-left: 2.5em;
    padding-right: 2.5em;
}

button {
    padding: 0.8em;
    width: 14em;
    border-radius: 10px;
    align-self: center;
    outline: none;
    font-weight: bold;
    border: 1px solid white;
    background-color: transparent;
    color: white;
    transition: .4s ease-in-out;
}

button::after {
    content: "(Hold Me)";
    opacity: 0;
    position: absolute;
}

button::before {
    content: "∞";
    font-size: 3.5em;
    position: absolute;
    opacity: 0;
    left: 1.6em;
    top: -0.33em;
    transition: .4s ease-in-out;
}

button:hover {
    cursor: pointer;
    color: black;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

button:hover::after {
    position: relative;
    opacity: 1;
    font-size: 0.7em;
}

@keyframes AnimationName {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}

button:active {
    scale: 1.1;
    opacity: 1;
    color: transparent;
    background: linear-gradient(90deg, #ce68d9, #45c6db, #45db79, #9f45b0, #e54ed0, #ffe4f2);
    background-size: 800% 800%;
    -webkit-animation: AnimationName 1s ease infinite;
    -moz-animation: AnimationName 1s ease infinite;
    animation: AnimationName 1s ease infinite;
}

button:active::before {
    color: white;
    opacity: 1;
}

实现思路拆分

1. body 元素的样式设置：设置了页面的高度、居中显示、背景颜色和水平居中对齐。
2. .card 元素的样式设置：设置了卡片的宽度、高度、背景颜色、阴影、圆角、过渡效果和过渡效果的持续时间。
3. .card:before 元素的样式设置：设置了卡片上方的文本内容、字体颜色、字体大小、字体粗细、位置和过渡效果。
4. .card.heading 元素的样式设置：设置了卡片标题的透明度和过渡效果。
5. .card.heading span 元素的样式设置：设置了卡片标题中的字体大小和过渡效果。
6. .card button 元素的样式设置：设置了卡片按钮的透明度和过渡效果。
7. .card.heading:hover 元素的样式设置：设置了卡片标题的鼠标悬停时的渐变背景和文字颜色，以及一个动画效果。
8. @keyframes gradient_6346 动画效果的定义：定义了一个名为 gradient_6346 的动画效果，使得卡片标题的背景颜色从左到右渐变。
9. .card:hover 元素的样式设置：设置了卡片的鼠标悬停时的样式，包括宽度、高度、内边距、背景颜色、圆角、阴影、渐变背景和动画效果。
10. .card:hover.heading 元素的样式设置：设置了卡片标题的鼠标悬停时的样式，包括透明度和过渡效果。
11. .card:hover.content 元素的样式设置：设置了卡片内容的鼠标悬停时的样式，包括透明度和过渡效果。
12. .card:hover button 元素的样式设置：设置了卡片按钮的鼠标悬停时的样式，包括透明度和过渡效果。
13. .card:hover::before 元素的样式设置：设置了卡片上方的文本内容的透明度。
14. .heading 元素的样式设置：设置了卡片标题的样式，包括字体颜色、字体大小、字体粗细、对齐方式、透明度和过渡效果。
15. .content 元素的样式设置：设置了卡片内容的样式，包括对齐方式、内边距和透明度。
16. .item 元素的样式设置：设置了卡片内容中的项目的样式，包括字体大小、内边距、对齐方式、颜色、圆角、阴影、过渡效果和点击效果。
17. .item:hover 元素的样式设置：设置了卡片内容中的项目的鼠标悬停时的样式，包括缩放比例、阴影和点击效果。
18. .item:active 元素的样式设置：设置了卡片内容中的项目的鼠标点击时的样式，包括缩放比例、阴影和点击效果。
19. .item--create 元素的样式设置：设置了卡片内容中的创建项目的样式，包括内边距。
20. .item--post 元素的样式设置：设置了卡片内容中的发布项目的样式，包括内边距。
21. .item--inspire 元素的样式设置：设置了卡片内容中的灵感项目的样式，包括内边距。
22. button 元素的样式设置：设置了卡片按钮的样式，包括内边距、宽度、圆角、边框、背景颜色、字体颜色、字体粗细、对齐方式、透明度和过渡效果。
23. button::after 元素的样式设置：设置了卡片按钮的文本内容，包括文本内容、透明度和位置。
24. button::before 元素的样式设置：设置了卡片按钮的前景元素，包括文本内容、字体大小、位置、透明度和过渡效果。
25. button:hover 元素的样式设置：设置了卡片按钮的鼠标悬停时的样式
    button:hover::after 元素的样式设置：设置了卡片按钮的鼠标悬停时的文本内容，包括文本内容、透明度和位置。
26. @keyframes AnimationName 动画效果的定义：定义了一个名为 AnimationName 的动画效果，使得卡片按钮的背景颜色从左到右渐变。
27. button:active 元素的样式设置：设置了卡片按钮的鼠标点击时的样式，包括缩放比例、透明度、渐变背景和动画效果。
28. button:active::before 元素的样式设置：设置了卡片按钮的鼠标点击时的前景元素，包括文本内容、字体大小、位置、透明度和字体颜色。