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

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

代码语言：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.........完整代码请登录后点击上方下载按钮下载查看