【css】触发弹出围绕菜单

最新推荐文章于 2023-03-07 10:54:55 发布

夜雨Gecer

最新推荐文章于 2023-03-07 10:54:55 发布

阅读量432

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/weixin_39370093/article/details/100663418

版权

css 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

说的可能比较绕口上效果

效果：

效果的实现主要就是用到了两个效果一个是过度一个是2d转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .menu_father{
            position: absolute;
            right: 20px;
            top: 20px;
            width: 100px;
            height: 100px;
        }
        .menu {
            position: absolute;
            right: 0px;
            top: 0px;
            width: 50px;
            height: 50px;
            background:#007AFF;
            border-radius: 50%;
        }

        .menu div {
            position: absolute;
            right: 25px;
            top: 60px;
            margin-right: -15px;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            transition: transform 0.4s linear,background-color 0.4s linear;
            transform-origin:50% -35px ;
        }

        .menu_father:hover >div> div:nth-of-type(1) {
            transform: rotate(0deg);
            background:  #FDBA09;
        }

        .menu_father:hover >div> div:nth-of-type(2) {
            transform: rotate(45deg);
            background:  #FDBA09;
        }

        .menu_father:hover >div> div:nth-of-type(3) {
            transform: rotate(90deg);
            background:  #FDBA09;
        }


    </style>
</head>
<body>
<div class="menu_father">
    <div class="menu">
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>
</body>
</html>

夜雨Gecer

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【css】触发弹出围绕菜单

说的可能比较绕口上效果效果：效果的实现主要就是用到了两个效果一个是过度一个是2d转换<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style>...
复制链接

扫一扫