css实现弹出更多图标菜单效果-html代码-BFW代码库

css实现弹出更多图标菜单效果

代码语言：html

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>

    <style>
@import url("https://fonts.googleapis.com/css?family=Oxygen:700&display=swap");
        .about {
            position: fixed;
            z-index: 10;
            bottom: 150px;
            right: 130px;
            width: 40px;
            height: 40px;
            display: flex;
            justify-content: flex-end;
            align-items: flex-end;
            transition: all 0.2s ease;
        }
        .about .bg_links {
            width: 40px;
            height: 40px;
            border-radius: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: rgba(255, 255, 255, 0.15);
            border-radius: 100%;
            backdrop-filter: blur(5px);
            position: absolute;
        }
        .about .logo {
            width: 40px;
            height: 40px;
            z-index: 9;
            background-image: url(https://rafaelalucas91.github.io/assets/codepen/logo_white.svg);
            background-size: 50%;
            background-repeat: no-repeat;
            background-position: 10px 7px;
            opacity: 0.9;
            transition: all 1s 0.2s ease;
            bottom: 0;
            right: 0;
        }
        .about .social {
            opacity: 0;
            right: 0;
            bottom: 0;
        }
        .about .social .icon {
            width: 100%;
            height: 100%;
            background-size: 20px;
            background-repeat: no-repeat;
            background-position: center;
            background-color: transparent;
            display: flex;
            transition: all 0.2s ease, background-color 0.4s ease;
            opacity: 0;
            border-radius: 100%;
        }
        .about .social.portfolio {
            transition: all 0.8s ease;
        }
        .about .social.portfolio .icon {
            background-image: url(https://rafaelalucas91.github.io/assets/codepen/link.svg);
        }
        .about .social.dribbble {
            transition: all 0.3s ease;
        }
        .about .social.dribbble .icon {
            background-image: url(https://rafaelalucas91.github.io/assets/codepen/dribbble.svg);
        }
        .about .social.linkedin {
            transition: all 0.8s ease;
        }
        .about .social.linkedin .icon {
 .........完整代码请登录后点击上方下载按钮下载查看