卡片的边框出现了问题。我该如何修复这个问题？

huangapple
go评论116阅读模式
英文:

Card's borders are messed up. How do I fix this?

问题

当我将鼠标悬停在上面时，先前的边框仍然存在，并且有点偏移重叠。做一些操作，使得.flip-card-back的边框替换.flip-card-inner的边框。当我将鼠标悬停在上面时，先前的边框仍然存在，并且有点偏移重叠。做一些操作，使得.flip-card-back的边框替换.flip-card-inner的边框。类似于以下效果：

非悬停状态：

卡片的边框出现了问题。我该如何修复这个问题？

悬停状态：

卡片的边框出现了问题。我该如何修复这个问题？

期望的悬停状态：

卡片的边框出现了问题。我该如何修复这个问题？

Card.jsx：

import React from 'react';
import './style.scss';

const Card = () => {
    return (
        <div className="flip-card">
            <div className="flip-card-inner">
                <div className="flip-card-front">
                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        xmlnsXlink="http://www.w3.org/1999/xlink"
                        width="110"
                        height="110"
                        x="0"
                        y="0"
                        viewBox="0 0 512 512"
                        style={{ enableBackground: 'new 0 0 512 512' }}
                        xmlSpace="preserve"
                        className=""
                    >
                        <g>
                            <linearGradient id="a" x1="256" x2="256" y1="17.276" y2="497.276" gradientTransform="matrix(1 0 0 -1 0 513.276)" gradientUnits="userSpaceOnUse">
                                <stop stopOpacity="1" stopColor="#12bee5" offset="0"></stop>
                                <stop stopOpacity="1" stopColor="#c071e9" offset="0"></stop>
                                <stop stopOpacity="1" stopColor="#6df1b2" offset="0"></stop>
                            </linearGradient>
                            <path fill="url(#a)" d="m493.7 98.3-80-80c-1.5-1.5-3.5-2.3-5.7-2.3H216c-4.4 0-8 3.6-8 8v56H104c-4.4 0-8 3.6-8 8 0 1.1.2 2.1.6 3.1l23.4 56.2c-8.8 3.9-15.9 10.7-20.1 19.3l-.2-.3C47.3 197.5 16 257.9 16 328c0 34.8 7 78.8 12.9 109.6 6.5 33.9 36.2 58.4 70.7 58.4H488c4.4 0 8-3.6 8-8V104c0-2.1-.8-4.2-2.3-5.7zm-77.7-55L468.7 96H416zM224 32h176v72c0 4.4 3.6 8 8 8h72v240H351.1c.6-8.6.9-16.7.9-24 0-8-.4-16-1.3-24H448c4.4 0 8-3.6 8-8s-3.6-8-8-8h-99.6c-1-5.4-2.2-10.8-3.5-16H448c4.4 0 8-3.6 8-8s-3.6-8-8-8H339.9c-2-5.5-4.1-10.8-6.5-16H448c4.4 0 8-3.6 8-8s-3.6-8-8-8H325c-3.2-5.5-6.8-10.9-10.6-16H448c4.4 0 8-3.6 8-8s-3.6-8-8-8H300.7c-9.6-9.9-20.6-18.6-32.5-25.7l-.2.3c-4.2-8.6-11.3-15.5-20.1-19.3l23.4-56.2c1.7-4.1-.2-8.8-4.3-10.5-1-.4-2-.6-3.1-.6h-40V32zm256 352h-80v-16h80zm-80 48h80v16h-80zm0-16v-16h80v16zm-216 8c-44.2 0-80-35.8-80-80s35.8-80 80-80 80 35.8 80 80c-.1 44.2-35.8 79.9-80 80zm168-8h-72v-16h72zm-72 16h72v16h-72zm72-48h-72v-16h72zM252 96l-33.3 80h-69.3L116 96zm-125.8 66.1 10.4 25c1.2 3 4.2 4.9 7.4 4.9h80c3.2 0 6.1-1.9 7.4-4.9l10.4-25c12.1 5.4 17.5 19.6 12.1 31.7-3.9 8.6-12.4 14.2-21.9 14.2h-96c-13.2 0-24-10.7-24-24 0-9.4 5.6-18 14.2-21.9zM44.6 434.6C38.9 404.5 32 361.6 32 328c0-58.9 23.8-110.1 64.2-140.1 2 20.5 19.2 36 39.8 36.1h96c20.6 0 37.8-15.6 39.8-36.1 43.7 33.2 63.8 83.8 64.2 140.1 0 7.2-.3 15.3-1 24h-55.4c.2-2.6.3-5.3.3-8 .1-53.1-42.9-96.1-96-96.2s-96.1 42.9-96.2 96 42.9 96.1 96 96.2c32.2 0 62.4-16.1 80.2-43v83H99.6c-26.8 0-49.9-19.1-55-45.4zM280 464h72v16h-72zm88 16V368h16v112zm32 0v-16h80v16zM176 328c0 4.4 3.6 8 8 8 13.3 0 24 10.8 24 24 0 10.2-6.4 19.2-16 22.6v9.4c0 4.4-3.6 8-8 8s-8-3.6-8-8v-8h-8c-4.4 0-8-3.6-8-8s3.6-8 8-8h16c4.4 0 8-3.6 8-8s-3.6-8-8-8c-13.3 0-24-10.8-24-24 0-10.2 6.4-19.2 16-22.6V296c0-4.4 3.6-8 8-8s8 3.6 8 8v8h8c4.4 0 8 3.6 8 8s-3.6 8-8 8h-16c-4.4 0-8 3.6-8 8zm160-160c0-4.4 3.6-8 8-8h104c4.4 0 8 3.6 8 8s-3.6 8-8 8H344c-4.4 0-8-3.6-8-8zm0-32c0-4.4 3.6-8 8-8h104c4.4 0 8 3.6 8 8s-3.6 8-8 8H344c-4.4 0-8-3.6-8-8z" data-original="url(#a)"></path>
                        </g>
                    </svg>
                    <p className='front-card-text'>Save Money</p>
                </div>
                <div className="flip-card-back">
                    <h1>John Doe</h1>
                    <p>Architect & Engineer</p>
                    <p>We love that guy</p>
                </div>
            </div>
        </div>
    )
}

export default Card

style.scss：

.flip-card {
    background-color: transparent;
    width: 340px;
    height: 290px;
    perspective: 1000px;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    border: 2px solid #6df1b2;
    transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.flip-card-front {
    background-color: transparent;
    color: #6df1b2;
    font-size: 2.5rem;
    padding: 1rem 0;

    .front-card-text {
        margin: 0 0 10px;
    }
}

.flip-card-back {
    border: 2px solid white;
    color: white;
    transform: rotateY(180deg);
}

svg {
    padding: 15px;
    margin-top: 1rem;
}
英文:

When I hover on it, the previous border remains and kind of shifted overlaps it. Do something so that .flip-card-back border replaces the .flip-card-inner border. When I hover on it, the previous border remains and kind of shifted overlaps it. Do something so that .flip-card-back border replaces the .flip-card-inner border. It's something like this:-

Non-hover state:-

卡片的边框出现了问题。我该如何修复这个问题？

Hover state:-

卡片的边框出现了问题。我该如何修复这个问题？

Desired hover state:-

卡片的边框出现了问题。我该如何修复这个问题？

Card.jsx:-

import React from &#39;react&#39;
import &#39;./style.scss&#39;
const Card = () =&gt; {
return (
&lt;div className=&quot;flip-card&quot;&gt;
&lt;div className=&quot;flip-card-inner&quot;&gt;
&lt;div className=&quot;flip-card-front&quot;&gt;
&lt;svg
xmlns=&quot;http://www.w3.org/2000/svg&quot;
xmlnsXlink=&quot;http://www.w3.org/1999/xlink&quot;
width=&quot;110&quot;
height=&quot;110&quot;
x=&quot;0&quot;
y=&quot;0&quot;
viewBox=&quot;0 0 512 512&quot;
style={{ enableBackground: &#39;new 0 0 512 512&#39; }}
xmlSpace=&quot;preserve&quot;
className=&quot;&quot;
&gt;&lt;g&gt;&lt;linearGradient id=&quot;a&quot; x1=&quot;256&quot; x2=&quot;256&quot; y1=&quot;17.276&quot; y2=&quot;497.276&quot; gradientTransform=&quot;matrix(1 0 0 -1 0 513.276)&quot; gradientUnits=&quot;userSpaceOnUse&quot;&gt;&lt;stop stopOpacity=&quot;1&quot; stopColor=&quot;#12bee5&quot; offset=&quot;0&quot;&gt;&lt;/stop&gt;&lt;stop stopOpacity=&quot;1&quot; stopColor=&quot;#c071e9&quot; offset=&quot;0&quot;&gt;&lt;/stop&gt;&lt;stop stopOpacity=&quot;1&quot; stopColor=&quot;#6df1b2&quot; offset=&quot;0&quot;&gt;&lt;/stop&gt;&lt;/linearGradient&gt;&lt;path fill=&quot;url(#a)&quot; d=&quot;m493.7 98.3-80-80c-1.5-1.5-3.5-2.3-5.7-2.3H216c-4.4 0-8 3.6-8 8v56H104c-4.4 0-8 3.6-8 8 0 1.1.2 2.1.6 3.1l23.4 56.2c-8.8 3.9-15.9 10.7-20.1 19.3l-.2-.3C47.3 197.5 16 257.9 16 328c0 34.8 7 78.8 12.9 109.6 6.5 33.9 36.2 58.4 70.7 58.4H488c4.4 0 8-3.6 8-8V104c0-2.1-.8-4.2-2.3-5.7zm-77.7-55L468.7 96H416zM224 32h176v72c0 4.4 3.6 8 8 8h72v240H351.1c.6-8.6.9-16.7.9-24 0-8-.4-16-1.3-24H448c4.4 0 8-3.6 8-8s-3.6-8-8-8h-99.6c-1-5.4-2.2-10.8-3.5-16H448c4.4 0 8-3.6 8-8s-3.6-8-8-8H339.9c-2-5.5-4.1-10.8-6.5-16H448c4.4 0 8-3.6 8-8s-3.6-8-8-8H325c-3.2-5.5-6.8-10.9-10.6-16H448c4.4 0 8-3.6 8-8s-3.6-8-8-8H300.7c-9.6-9.9-20.6-18.6-32.5-25.7l-.2.3c-4.2-8.6-11.3-15.5-20.1-19.3l23.4-56.2c1.7-4.1-.2-8.8-4.3-10.5-1-.4-2-.6-3.1-.6h-40V32zm256 352h-80v-16h80zm-80 48h80v16h-80zm0-16v-16h80v16zm-216 8c-44.2 0-80-35.8-80-80s35.8-80 80-80 80 35.8 80 80c-.1 44.2-35.8 79.9-80 80zm168-8h-72v-16h72zm-72 16h72v16h-72zm72-48h-72v-16h72zM252 96l-33.3 80h-69.3L116 96zm-125.8 66.1 10.4 25c1.2 3 4.2 4.9 7.4 4.9h80c3.2 0 6.1-1.9 7.4-4.9l10.4-25c12.1 5.4 17.5 19.6 12.1 31.7-3.9 8.6-12.4 14.2-21.9 14.2h-96c-13.2 0-24-10.7-24-24 0-9.4 5.6-18 14.2-21.9zM44.6 434.6C38.9 404.5 32 361.6 32 328c0-58.9 23.8-110.1 64.2-140.1 2 20.5 19.2 36 39.8 36.1h96c20.6 0 37.8-15.6 39.8-36.1 43.7 33.2 63.8 83.8 64.2 140.1 0 7.2-.3 15.3-1 24h-55.4c.2-2.6.3-5.3.3-8 .1-53.1-42.9-96.1-96-96.2s-96.1 42.9-96.2 96 42.9 96.1 96 96.2c32.2 0 62.4-16.1 80.2-43v83H99.6c-26.8 0-49.9-19.1-55-45.4zM280 464h72v16h-72zm88 16V368h16v112zm32 0v-16h80v16zM176 328c0 4.4 3.6 8 8 8 13.3 0 24 10.8 24 24 0 10.2-6.4 19.2-16 22.6v9.4c0 4.4-3.6 8-8 8s-8-3.6-8-8v-8h-8c-4.4 0-8-3.6-8-8s3.6-8 8-8h16c4.4 0 8-3.6 8-8s-3.6-8-8-8c-13.3 0-24-10.8-24-24 0-10.2 6.4-19.2 16-22.6V296c0-4.4 3.6-8 8-8s8 3.6 8 8v8h8c4.4 0 8 3.6 8 8s-3.6 8-8 8h-16c-4.4 0-8 3.6-8 8zm160-160c0-4.4 3.6-8 8-8h104c4.4 0 8 3.6 8 8s-3.6 8-8 8H344c-4.4 0-8-3.6-8-8zm0-32c0-4.4 3.6-8 8-8h104c4.4 0 8 3.6 8 8s-3.6 8-8 8H344c-4.4 0-8-3.6-8-8z&quot; data-original=&quot;url(#a)&quot;&gt;&lt;/path&gt;&lt;/g&gt;
&lt;/svg&gt;
&lt;p className=&#39;front-card-text&#39;&gt;Save Money&lt;/p&gt;
&lt;/div&gt;
&lt;div className=&quot;flip-card-back&quot;&gt;
&lt;h1&gt;John Doe&lt;/h1&gt;
&lt;p&gt;Architect &amp; Engineer&lt;/p&gt;
&lt;p&gt;We love that guy&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
)
}
export default Card

style.scss:-

.flip-card {
background-color: transparent;
width: 340px;
height: 290px;
perspective: 1000px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
border: 2px solid #6df1b2;
transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-card-front {
background-color: transparent;
color: #6df1b2;
font-size: 2.5rem;
padding: 1rem 0;
.front-card-text {
margin: 0 0 10px;
}
}
.flip-card-back {
border: 2px solid white;
color: white;
transform: rotateY(180deg);
}
svg {
padding: 15px;
margin-top: 1rem;
}

答案1

得分: 0

将边框从flip-card-inner移动到flip-card-front。

我还在flip-card-back中添加了背景和边框半径，并从flip-card-front中移除了填充。

.flip-card {
  background-color: transparent;
  width: 340px;
  height: 290px;
  perspective: 1000px;
}

.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 {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: transparent;
  color: #6df1b2;
  font-size: 2.5rem;
  border: 2px solid #6df1b2;

  .front-card-text {
    margin: 0 0 10px;
  }
}

.flip-card-back {
  border: 2px solid white;
  border-radius: 2rem 0;
  color: white;
  background-color: black;
  transform: rotateY(180deg);
}

svg {
  padding: 15px;
  margin-top: 1rem;
}

body {
  margin: 0 auto;
  padding: 2rem;
  background-color: black;
}

<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" width="110" height="110" x="0" y="0" viewBox="0 0 512 512" style="enable-background: 'new 0 0 512 512'" xmlSpace="preserve" class="">
        <g>
          <linearGradient id="a" x1="256" x2="256" y1="17.276" y2="497.276" gradient-transform="matrix(1 0 0 -1 0 513.276)" gradient-units="userSpaceOnUse">
            <stop stop-opacity="1" stop-color="#12bee5" offset="0"></stop>
            <stop stop-opacity="1" stop-color="#c071e9" offset="0"></stop>
            <stop stop-opacity="1" stop-color="#6df1b2" offset="0"></stop>
          </linearGradient>
          <path fill="url(#a)" d="m493.7 98.3-80-80c-1.5-1.5-3.5-2.3-5.7-2.3H216c-4.4 0-8 3.6-8 8v56H104c-4.4 0-8 3.6-8 8 0 1.1.2 2.1.6 3.1l23.4 56.2c-8.8 3.9-15.9 10.7-20.1 19.3l-.2-.3C47.3 197.5 16 257.9 16 328c0 34.8 7 78.8 12.9 109.6 6.5 33.9 36.2 58.4 70.7 58.4H488c4.4 0 8-3.6 8-8V104c0-2.1-.8-4.2-2.3-5.7zm-77.7-55L468.7 96H416zM224 32h176v72c0 4.4 3.6 8 8 8h72v240H351.1c.6-8.6.9-16.7.9-24 0-8-.4-16-1.3-24H448c4.4 0 8-3.6 8-8s-3.6-8-8-8h-99.6c-1-5.4-2.2-10.8-3.5-16H448c4.4 0 8-3.6 8-8s-3.6-8-8-8H339.9c-2-5.5-4.1-10.8-6.5-16H448c4.4 0 8-3.6 8-8s-3.6-8-8-8H325c-3.2-5.5-6.8-10.9-10.6-16H448c4.4 0 8-3.6 8-8s-3.6-8-8-8H300.7c-9.6-9.9-20.6-18.6-32.5-25.7l-.2.3c-4.2-8.6-11.3-15.5-20.1-19.3l23.4-56.2c1.7-4.1-.2-8.8-4.3-10.5-1-.4-2-.6-3.1-.6h-40V32zm256 352h-80v-16h80zm-80 48h80v16h-80zm0-16v-16h80v16zm-216 8c-44.2 0-80-35.8-80-80s35.8-80 80-80 80 35.8 80 80c-.1 44.2-35.8 79.9-80 80zm168-8h-72v-16h72zm-72 16h72v16h-72zm72-48h-72v-16h72zM252 96l-33.3 80h-69.3L116 96zm-125.8 66.1 10.4 25c1.2 3 4.2 4.9 7.4 4.9h80c3.2 0 6.1-1.9 7.4-4.9l10.4-25c12.1 5.4 17.5 19.6 12.1 31.7-3.9 8.6-12.4 14.2-21.9 14.2h-96c-13.2 0-24-10.7-24-24 0-9.4 5.6-18 14.2-21.9zM44.6 434.6C38.9 404.5 32 361.6 32 328c0-58.9 23.8-110.1 64.2-140.1 2 20.5 19.2 36 39.8 36.1h96c20.6 0 37.8-15.6 39.8-36.1 43.7 33.2 63.8 83.8 64.2 140.1 0 7.2-.3 15.3-1 24h-55.4c.2-2.6.3-5.3.3-8 .1-53.1-42.9-96.1-96-96.2s-96.1 42.9-96.2 96 42.9 96.1 96 96.2c32.2 0 62.4-16.1 80.2-43v83H99.6c-26.8 0-49.9-19.1-55-45.4zM280 464h72v16h-72zm88 16V368h16v112zm32 0v-16h80v16zM176 328c0 4.4 3.6 8 8 8 13.3 0 24 10.8 24 24 0 10.2-6.4 19.2-16 22.6v9.4c0 4.4-3.6 8-8 8s-8-3.6-8-8v-8h-8c-4.4 0-8-3.6-8-8s3.6-8 8-8h16c4.4 0 8-3.6 8-8s-3.6-8-8-8c-13.3 0-24-10.8-24-24 0-10.2 6.4-19.2 16-22.6V296c0-4.4 3.6-8 8-8s8 3.6 8 8v8h8c4.4 0 8 3.6 8 8s-3.6 8-8 8h-16c-4.4 0-8 3.6-8 8zm160-160c0-4.4 3.6-8 8-8h104c4.4 0 8 3.6 8 8s-3.6 8-8 8H344c-4.4 0-8-3.6-8-8zm0-32c0-4.4 3.6-8 8-8h104c4.4 0 8 3.6 8 8s-3.6 8-8 8H344c-4.4 0-8-3.6-8-8z" data-original="url(#a)"></path>
        </g>
      </svg>
      <p class='front-card-text'>Save Money</p>
    </div>
    <div class="flip-card-back">
      <h1>John Doe</h1>
      <p>Architect & Engineer</p>
      <p>We love that guy</p>
    </div>
  </div>
</div>
英文:

Move the border from flip-card-inner to flip-card-front

I also added a background and border-radius to flip-card-back and removed the padding from flip-card-front

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.flip-card {
background-color: transparent;
width: 340px;
height: 290px;
perspective: 1000px;
}
.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 {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-card-front {
background-color: transparent;
color: #6df1b2;
font-size: 2.5rem;
border: 2px solid #6df1b2;
.front-card-text {
margin: 0 0 10px;
}
}
.flip-card-back {
border: 2px solid white;
border-radius: 2rem 0;
color: white;
background-color: black;
transform: rotateY(180deg);
}
svg {
padding: 15px;
margin-top: 1rem;
}
body {
margin: 0 auto;
padding: 2rem;
background-color: black;
}

<!-- language: lang-html -->

&lt;div class=&quot;flip-card&quot;&gt;
&lt;div class=&quot;flip-card-inner&quot;&gt;
&lt;div class=&quot;flip-card-front&quot;&gt;
&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlnsXlink=&quot;http://www.w3.org/1999/xlink&quot; width=&quot;110&quot; height=&quot;110&quot; x=&quot;0&quot; y=&quot;0&quot; viewBox=&quot;0 0 512 512&quot; style=&quot;enable-background: &#39;new 0 0 512 512&#39;&quot; xmlSpace=&quot;preserve&quot; class=&quot;&quot;&gt;
&lt;g&gt;
&lt;linearGradient id=&quot;a&quot; x1=&quot;256&quot; x2=&quot;256&quot; y1=&quot;17.276&quot; y2=&quot;497.276&quot; gradient-transform=&quot;matrix(1 0 0 -1 0 513.276)&quot; gradient-units=&quot;userSpaceOnUse&quot;&gt;
&lt;stop stop-opacity=&quot;1&quot; stop-color=&quot;#12bee5&quot; offset=&quot;0&quot;&gt;&lt;/stop&gt;
&lt;stop stop-opacity=&quot;1&quot; stop-color=&quot;#c071e9&quot; offset=&quot;0&quot;&gt;&lt;/stop&gt;
&lt;stop stop-opacity=&quot;1&quot; stop-color=&quot;#6df1b2&quot; offset=&quot;0&quot;&gt;&lt;/stop&gt;
&lt;/linearGradient&gt;
&lt;path fill=&quot;url(#a)&quot; d=&quot;m493.7 98.3-80-80c-1.5-1.5-3.5-2.3-5.7-2.3H216c-4.4 0-8 3.6-8 8v56H104c-4.4 0-8 3.6-8 8 0 1.1.2 2.1.6 3.1l23.4 56.2c-8.8 3.9-15.9 10.7-20.1 19.3l-.2-.3C47.3 197.5 16 257.9 16 328c0 34.8 7 78.8 12.9 109.6 6.5 33.9 36.2 58.4 70.7 58.4H488c4.4 0 8-3.6 8-8V104c0-2.1-.8-4.2-2.3-5.7zm-77.7-55L468.7 96H416zM224 32h176v72c0 4.4 3.6 8 8 8h72v240H351.1c.6-8.6.9-16.7.9-24 0-8-.4-16-1.3-24H448c4.4 0 8-3.6 8-8s-3.6-8-8-8h-99.6c-1-5.4-2.2-10.8-3.5-16H448c4.4 0 8-3.6 8-8s-3.6-8-8-8H339.9c-2-5.5-4.1-10.8-6.5-16H448c4.4 0 8-3.6 8-8s-3.6-8-8-8H325c-3.2-5.5-6.8-10.9-10.6-16H448c4.4 0 8-3.6 8-8s-3.6-8-8-8H300.7c-9.6-9.9-20.6-18.6-32.5-25.7l-.2.3c-4.2-8.6-11.3-15.5-20.1-19.3l23.4-56.2c1.7-4.1-.2-8.8-4.3-10.5-1-.4-2-.6-3.1-.6h-40V32zm256 352h-80v-16h80zm-80 48h80v16h-80zm0-16v-16h80v16zm-216 8c-44.2 0-80-35.8-80-80s35.8-80 80-80 80 35.8 80 80c-.1 44.2-35.8 79.9-80 80zm168-8h-72v-16h72zm-72 16h72v16h-72zm72-48h-72v-16h72zM252 96l-33.3 80h-69.3L116 96zm-125.8 66.1 10.4 25c1.2 3 4.2 4.9 7.4 4.9h80c3.2 0 6.1-1.9 7.4-4.9l10.4-25c12.1 5.4 17.5 19.6 12.1 31.7-3.9 8.6-12.4 14.2-21.9 14.2h-96c-13.2 0-24-10.7-24-24 0-9.4 5.6-18 14.2-21.9zM44.6 434.6C38.9 404.5 32 361.6 32 328c0-58.9 23.8-110.1 64.2-140.1 2 20.5 19.2 36 39.8 36.1h96c20.6 0 37.8-15.6 39.8-36.1 43.7 33.2 63.8 83.8 64.2 140.1 0 7.2-.3 15.3-1 24h-55.4c.2-2.6.3-5.3.3-8 .1-53.1-42.9-96.1-96-96.2s-96.1 42.9-96.2 96 42.9 96.1 96 96.2c32.2 0 62.4-16.1 80.2-43v83H99.6c-26.8 0-49.9-19.1-55-45.4zM280 464h72v16h-72zm88 16V368h16v112zm32 0v-16h80v16zM176 328c0 4.4 3.6 8 8 8 13.3 0 24 10.8 24 24 0 10.2-6.4 19.2-16 22.6v9.4c0 4.4-3.6 8-8 8s-8-3.6-8-8v-8h-8c-4.4 0-8-3.6-8-8s3.6-8 8-8h16c4.4 0 8-3.6 8-8s-3.6-8-8-8c-13.3 0-24-10.8-24-24 0-10.2 6.4-19.2 16-22.6V296c0-4.4 3.6-8 8-8s8 3.6 8 8v8h8c4.4 0 8 3.6 8 8s-3.6 8-8 8h-16c-4.4 0-8 3.6-8 8zm160-160c0-4.4 3.6-8 8-8h104c4.4 0 8 3.6 8 8s-3.6 8-8 8H344c-4.4 0-8-3.6-8-8zm0-32c0-4.4 3.6-8 8-8h104c4.4 0 8 3.6 8 8s-3.6 8-8 8H344c-4.4 0-8-3.6-8-8z&quot; data-original=&quot;url(#a)&quot;&gt;&lt;/path&gt;
&lt;/g&gt;
&lt;/svg&gt;
&lt;p class=&#39;front-card-text&#39;&gt;Save Money&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;flip-card-back&quot;&gt;
&lt;h1&gt;John Doe&lt;/h1&gt;
&lt;p&gt;Architect &amp; Engineer&lt;/p&gt;
&lt;p&gt;We love that guy&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年8月9日 04:36:13
  • 转载请务必保留本文链接：https://go.coder-hub.com/76863054.html
  • css
  • html
  • javascript
  • reactjs
  • sass
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定