css分享按钮点击翻转显示更多效果代码-html代码-BFW代码库

代码语言：html

代码描述：css分享按钮点击翻转显示更多效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
:root {
    --dark-color: rgb(41, 41, 41);
    --light-color: rgb(255, 255, 255);
}

/* CAN GET RID OF THIS IN PROD */
body,
html {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-color: rgb(233, 233, 233);
    font-family: Arial, Helvetica, sans-serif;
}


.share-widget {
    margin: 10px; 
}
/* END */


.share-widget .share-widget-title {
    display: flex;
    justify-content: center;
    align-items: center;
}

.share-widget .share-widget-title svg {
    width: 20px;
    margin-right: 10px;
}

.share-widget .share-widget-title div {
    font-size: 14px;
    letter-spacing: 1px;
}

.share-widget a {
    text-decoration: none;
}


.share-widget a svg {
    width: 24px;
    margin: 7px;
    transition: .2s ease-in-out;
}

.share-widget a svg:hover {
    transform: scale(1.1);
    transition: .2s ease-in-out;
}




/* FLIP ANIMATION */
.share-widget-container {
    perspective: 300px;
    width: 220px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.share-widget-container .share-widget {
    width: 100%;
    max-width: 400px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    transition: -webkit-transform 0.6s;
    -webkit-transition: -webkit-transform 0.6s;
    transition: transform 0.6s;
    transition: transform 0.6s, -webkit-transform 0.6s;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.share-widget .share-widget-title,
.share-widget .share-widget-icons {
    position: absolute;
    width: 100%;
    height: 50px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.share-widget .share-widget-icons {
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg);
}

.share-widget.flipped {
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg);
}


/* LIGHT & DARK STYLES */
.share-widget.dark a svg {
    fill: var(--light-color);
}

.share-widget.light a svg {
    fill: var(--dark-color);
}

.share-widget.light .share-widget-title,
.share-widget.light .share-widget-icons {
    background-color: var(--light-color);
}

.share-widget.dark .share-widget-title,
.share-widget.dark .share-widget-icons {
    background-color: var(--dark-color);
}

.share-widget.light {
    color: var(--dark-color);
}

.share-widget.dark {
    color: var(--light-color);
}

.share-widget.light .share-widget-title svg {
    fill: var(--dark-color);
}

.share-widget.dark .share-widget-title svg {
    fill: var(--light-color);
}
</style>



</head>

<body >
  <body>
    <div class="share-widget-container">
        <div class="share-widget dark">
            <div class="share-widget-title">
                <svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'>
                    <path
                        d='M384 336a63.78 63.78 0 00-46.12 19.7l-148-83.27a63.85 63.85 0 000-32.86l148-83.27a63.8 63.8 0 10-15.73-27.87l-148 83.27a64 64 0 100 88.6l148 83.27A64 64 0 10384 336z' />
                </svg>
                <div>
                    SHARE
                </div>
            </div>

            <div class="share-widget-icons">
                <a href="#">
                    <svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'>
                        <path
                            d='M480 257.35c0-123.7-100.3-224-224-224s-224 100.3-224 224c0 111.8 81.9 204.47 189 221.29V322.12h-56.89v-64.77H221V208c0-56.13 33.45-87.16 84.61-87.16 24.51 0 50.15 4.38 50.15 4.38v55.13H327.5c-27.81 0-36.51 17.26-36.51 35v42h62.12l-9.92 64.77H291v156.54c107.1-16.81 189-109.48 189-221.31z'
                            fill-rule='evenodd' />
                    </svg>
                </a>
                <a href="#">
                    <svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'>
                        <path
                            d='M444.17 32H70.28C49.85 32 32 46.7 32 66.89v374.72C32 461.91 49.85 480 70.28 480h373.78c20.54 0 35.94-18.21 35.94-38.39V66.89C480.12 46.7 464.6 32 444.17 32zm-273.3 373.43h-64.18V205.88h64.18zM141 175.54h-.46c-20.54 0-33.84-15.29-33.84-34.43 0-19.49 13.65-34.42 34.65-34.42s33.85 14.82 34.31 34.42c-.01 19.14-13.31 34.43-34.66 34.43zm264.43 229.89h-64.18V296.32c0-26.14-9.34-44-32.56-44-17.74 0-28.24 12-32.91 23.69-1.75 4.2-2.22 9.92-2.22 15.76v113.66h-64.18V205.88h64.18v27.77c9.34-13.3 23.93-32.44 57.88-32.44 42.13 0 74 27.77 74 87.64z' />
                    </svg>
                </a>
                <a href="#">
                    <svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'>
                        <path
                            d='M256.05 32c-123.7 0-224 100.3-224 224 0 91.7 55.2 170.5 134.1 205.2-.6-15.6-.1-34.4 3.9-51.4 4.3-18.2 28.8-122.1 28.8-122.1s-7.2-14.3-7.2-35.4c0-33.2 19.2-58 43.2-58 20.4 0 30.2 15.3 30.2 33.6 0 20.5-13.1 51.1-19.8 79.5-5.6 23.8 11.9 43.1 35.4 43.1 42.4 0 71-54.5 71-119.1 0-49.1-33.1-85.8-93.2-85.8-67.9 0-110.3 50.7-110.3 107.3 0 19.5 5.8 33.3 14.8 43.9 4.1 4.9 4.7 6.9 3.2 12.5-1.1 4.1-3.5 14-4.6 18-1.5 5.7-6.1 7.7-11.2 5.6-31.3-12.8-45.9-47-45.9-85.6 0-63.6 53.7-139.9 160.1-139.9 85.5 0 141.8 61.9 141.8 128.3 0 87.9-48.9 153.5-120.9 153.5-24.2 0-46.9-13.1-54.7-27.9 0 0-13 51.6-15.8 61.6-4.7 17.3-14 34.5-22.5 48a225.13 225.13 0 0063.5 9.2c123.7 0 224-100.3 224-224S379.75 32 256.05 32z' />
                    </svg>
                </a>
                <a href="#">
                    <svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'>
                        <path
                            d='M496 109.5a201.8 201..........完整代码请登录后点击上方下载按钮下载查看