css右下角分享按钮点击弹出菜单动画效果代码-html代码-BFW代码库

代码语言：html

代码描述：css右下角分享按钮点击弹出菜单动画效果代码

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

<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
    <style>
@-webkit-keyframes badbounce {
        0%,100% {
            -webkit-transform: translateY(0px);
        }
        10% {
            -webkit-transform: translateY(6px);
        }
        30% {
            -webkit-transform: translateY(-4px);
        }
        70% {
            -webkit-transform: translateY(3px);
        }
        90% {
            -webkit-transform: translateY(-2px);
        }
    }
@-moz-keyframes badbounce {
        0%,100% {
            -moz-transform: translateY(0px);
        }
        10% {
            -moz-transform: translateY(6px);
        }
        30% {
            -moz-transform: translateY(-4px);
        }
        70% {
            -moz-transform: translateY(3px);
        }
        90% {
            -moz-transform: translateY(-2px);
        }
    }
@keyframes badbounce {
        0%,100% {
            -webkit-transform: translateY(0px);
            -moz-transform: translateY(0px);
            -ms-transform: translateY(0px);
            -o-transform: translateY(0px);
            transform: translateY(0px);
        }
        10% {
            -webkit-transform: translateY(6px);
            -moz-transform: translateY(6px);
            -ms-transform: translateY(6px);
            -o-transform: translateY(6px);
            transform: translateY(6px);
        }
        30% {
            -webkit-transform: translateY(-4px);
            -moz-transform: translateY(-4px);
            -ms-transform: translateY(-4px);
            -o-transform: translateY(-4px);
            transform: translateY(-4px);
        }
        70% {
            -webkit-transform: translateY(3px);
            -moz-transform: translateY(3px);
            -ms-transform: translateY(3px);
            -o-transform: translateY(3px);
            transform: translateY(3px);
        }
        90% {
            -webkit-transform: translateY(-2px);
            -moz-transform: translateY(-2px);
            -ms-transform: translateY(-2px);
            -o-transform: translateY(-2px);
            transform: translateY(-2px);
        }
    }
        .ss_animate {
            -webkit-animation: badbounce 1s linear;
            -moz-animation: badbounce 1s linear;
            animation: badbounce 1s linear;
        }

        html, body {
            width: 100%;
            height: 100%;
            background: #212121;
            margin: 0;
            padding: 0;
        }

        #ss_menu {
            bottom: 30px;
            width: 60px;
            height: 60px;
            color: #fff;
            position: fixed;
            -webkit-transition: all 1s ease;
            -moz-transition: all 1s ease;
            transition: all 1s ease;
            right: 30px;
            -webkit-transform: rotate(180deg);
            -moz-transform: rotate(180deg);
            -ms-transform: rotate(180deg);
            -o-transform: rotate(180deg);
            transform: rotate(180deg);
        }
        #ss_menu > .menu {
            display: block;
            position: absolute;
            border-radius: 50%;
            width: 60px;
            height: 60px;
            text-align: center;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.23), 0 3px 10px rgba(0, 0, 0, 0.16);
            color: #fff;
            -webkit-transition: all 1s ease;
            -moz-transition: all 1s ease;
            transition: all 1s ease;
        }
        #ss_menu > .menu .share {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0px;
            top: 0px;
            -webkit-transform: rotate(180deg);
            -moz-transform: rotate(180deg);
            -ms-transform: rotate(180deg);
            -o-transform: rotate(180deg);
            transform: rotate(180deg);
            -webkit-transition: all 1s ease;
            -moz-transition: all 1s ease;
            transition: all 1s ease;
        }
        #ss_menu > .menu .share .circle {
            -webkit-transition: all 1s ease;
            -moz-transition: all 1s ease;
            transition: all 1s ease;
            position: absolute;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #fff;
            top: 50%;
            margin-top: -6px;
            left: 12px;
            opacity: 1;
        }
        #ss_menu > .menu .share .circle:after, #ss_menu > .menu .share .circle:before {
            -webkit-transition: all 1s ease;
            -moz-transition: all 1s ease;
            transition: all 1s ease;
            content: '';
            opacity: 1;
            display: block;
            position: absolute;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #fff;
        }
        #ss_menu > .menu .share .circle:after {
            left: 20.78461px;
            top: 12.0px;
        }
        #ss_menu > .menu .share .circle:before {
            left: 20.78461px;
            top: -12.0px;
        }
        #ss_menu > .menu .share .bar {
            -webkit-transition: all 1s ease;
            -moz-transition: all 1s ease;
            transition: all 1s ease;
            width: 24px;
            height: 3px;
            background: #fff;
            position: absolute;
            top: 50%;
            margin-top: -1.5px;
            left: 18px;
            -webkit-transform-origin: 0% 50%;
            -moz-transform-origin: 0% 50%;
            -ms-transform-origin: 0% 50%;
            -o-transform-origin: 0% 50.........完整代码请登录后点击上方下载按钮下载查看