返回组件库
卡片
组件库
AI Design
绿色立体卡片
CSS
01.parent {02 width: 290px;03 height: 300px;04 perspective: 1000px;05}06 07.card {08 height: 100%;09 border-radius: 50px;10 background: linear-gradient(135deg, rgb(0, 255, 214) 0%, rgb(8, 226, 96) 100%);11 transition: all 0.5s ease-in-out;12 transform-style: preserve-3d;13 box-shadow: rgba(5, 71, 17, 0) 40px 50px 25px -40px, rgba(5, 71, 17, 0.2) 0px 25px 25px -5px;14}15 16.glass {17 transform-style: preserve-3d;18 position: absolute;19 inset: 8px;20 border-radius: 55px;21 border-top-right-radius: 100%;22 background: linear-gradient(0deg, rgba(255, 255, 255, 0.349) 0%, rgba(255, 255, 255, 0.815) 100%);23 /* -webkit-backdrop-filter: blur(5px);24 backdrop-filter: blur(5px); */25 transform: translate3d(0px, 0px, 25px);26 border-left: 1px solid white;27 border-bottom: 1px solid white;28 transition: all 0.5s ease-in-out;29}30 31.content {32 padding: 100px 60px 0px 30px;33 transform: translate3d(0, 0, 26px);34}35 36.content .title {37 display: block;38 color: #00894d;39 font-weight: 900;40 font-size: 20px;41}42 43.content .text {44 display: block;45 color: rgba(0, 137, 78, 0.7647058824);46 font-size: 15px;47 margin-top: 20px;48}49 50.bottom {51 padding: 10px 12px;52 transform-style: preserve-3d;53 position: absolute;54 bottom: 20px;55 left: 20px;56 right: 20px;57 display: flex;58 align-items: center;59 justify-content: space-between;60 transform: translate3d(0, 0, 26px);61}62 63.bottom .view-more {64 display: flex;65 align-items: center;66 width: 40%;67 justify-content: flex-end;68 transition: all 0.2s ease-in-out;69}70 71.bottom .view-more:hover {72 transform: translate3d(0, 0, 10px);73}74 75.bottom .view-more .view-more-button {76 background: none;77 border: none;78 color: #00c37b;79 font-weight: bolder;80 font-size: 12px;81}82 83.bottom .view-more .svg {84 fill: none;85 stroke: #00c37b;86 stroke-width: 3px;87 max-height: 15px;88}89 90.bottom .social-buttons-container {91 display: flex;92 gap: 10px;93 transform-style: preserve-3d;94}95 96.bottom .social-buttons-container .social-button {97 width: 30px;98 aspect-ratio: 1;99 padding: 5px;100 background: rgb(255, 255, 255);101 border-radius: 50%;102 border: none;103 display: grid;104 place-content: center;105 box-shadow: rgba(5, 71, 17, 0.5) 0px 7px 5px -5px;106}107 108.bottom .social-buttons-container .social-button:first-child {109 transition: transform 0.2s ease-in-out 0.4s, box-shadow 0.2s ease-in-out 0.4s;110}111 112.bottom .social-buttons-container .social-button:nth-child(2) {113 transition: transform 0.2s ease-in-out 0.6s, box-shadow 0.2s ease-in-out 0.6s;114}115 116.bottom .social-buttons-container .social-button:nth-child(3) {117 transition: transform 0.2s ease-in-out 0.8s, box-shadow 0.2s ease-in-out 0.8s;118}119 120.bottom .social-buttons-container .social-button .svg {121 width: 15px;122 fill: #00894d;123}124 125.bottom .social-buttons-container .social-button:hover {126 background: black;127}128 129.bottom .social-buttons-container .social-button:hover .svg {130 fill: white;131}132 133.bottom .social-buttons-container .social-button:active {134 background: rgb(255, 234, 0);135}136 137.bottom .social-buttons-container .social-button:active .svg {138 fill: black;139}140 141.logo {142 position: absolute;143 right: 0;144 top: 0;145 transform-style: preserve-3d;146}147 148.logo .circle {149 display: block;150 position: absolute;151 aspect-ratio: 1;152 border-radius: 50%;153 top: 0;154 right: 0;155 box-shadow: rgba(100, 100, 111, 0.2) -10px 10px 20px 0px;156 -webkit-backdrop-filter: blur(5px);157 backdrop-filter: blur(5px);158 background: rgba(0, 249, 203, 0.2);159 transition: all 0.5s ease-in-out;160}161 162.logo .circle1 {163 width: 170px;164 transform: translate3d(0, 0, 20px);165 top: 8px;166 right: 8px;167}168 169.logo .circle2 {170 width: 140px;171 transform: translate3d(0, 0, 40px);172 top: 10px;173 right: 10px;174 -webkit-backdrop-filter: blur(1px);175 backdrop-filter: blur(1px);176 transition-delay: 0.4s;177}178 179.logo .circle3 {180 width: 110px;181 transform: translate3d(0, 0, 60px);182 top: 17px;183 right: 17px;184 transition-delay: 0.8s;185}186 187.logo .circle4 {188 width: 80px;189 transform: translate3d(0, 0, 80px);190 top: 23px;191 right: 23px;192 transition-delay: 1.2s;193}194 195.logo .circle5 {196 width: 50px;197 transform: translate3d(0, 0, 100px);198 top: 30px;199 right: 30px;200 display: grid;201 place-content: center;202 transition-delay: 1.6s;203}204 205.logo .circle5 .svg {206 width: 20px;207 fill: white;208}209 210.parent:hover .card {211 transform: rotate3d(1, 1, 0, 30deg);212 box-shadow: rgba(5, 71, 17, 0.3) 30px 50px 25px -40px, rgba(5, 71, 17, 0.1) 0px 25px 30px 0px;213}214 215.parent:hover .card .bottom .social-buttons-container .social-button {216 transform: translate3d(0, 0, 50px);217 box-shadow: rgba(5, 71, 17, 0.2) -5px 20px 10px 0px;218}219 220.parent:hover .card .logo .circle2 {221 transform: translate3d(0, 0, 60px);222}223 224.parent:hover .card .logo .circle3 {225 transform: translate3d(0, 0, 80px);226}227 228.parent:hover .card .logo .circle4 {229 transform: translate3d(0, 0, 100px);230}231 232.parent:hover .card .logo .circle5 {233 transform: translate3d(0, 0, 120px);234}