• 热点推荐:
 首页 / web案例 / 正文
前端小案例旋转菜单,纯CSS制作

Time:2021年08月09日 Read:244 评论:0 作者:小天老师

练习基础小案例旋转菜单,当鼠标点击中心时,菜单就会旋转出现,再次点击时,菜单就会消失~!看起来是不是很炫酷,案例中放的都是不相关的图片;在实际使用中,菜单里可以放一些快捷方式,比如微信,QQ等;此外,在以下代码中还有别的要注意

让一个子元素相对于父元素(都有块级元素的属性)居中对齐,需要添加相对定位,子元素添加left:0;right:0;bottom:0;top:0; margin:auto; 比如让一个块级盒子相对于父级盒子进行居中对齐

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>块级盒子居中对齐</title>
    <style>
        .fater {
            position: relative;
            width: 200px;
            height: 200px;
            border: 1px solid red;
            margin: 100px auto 0;
        }
        
        .son {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            width: 80px;
            height: 80px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="fater">
        <div class="son"></div>
    </div>
</body>

</html>

CSS菜单案例

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旋转菜单</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            background-color: rgb(255, 59, 59);
        }
        
        .box {
            position: relative;
            width: 500px;
            height: 500px;
            margin: 100px auto 0;
        }
        
        .menu-goggler {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            width: 40px;
            height: 30px;
            margin: auto;
            opacity: 0;
            cursor: pointer;
            z-index: 2;
        }
        
        label {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            width: 40px;
            height: 5px;
            margin: auto;
            z-index: 1;
            background-color: rgba(255, 255, 255, .5);
        }
        
        label::before,
        label::after {
            position: absolute;
            left: 0;
            content: '';
            width: 40px;
            height: 5px;
            background-color: rgba(255, 255, 255, .5);
            transition: transform .3s;
        }
        
        label::before {
            top: 10px;
        }
        
        label::after {
            top: -10px;
        }
        /*  */
        
        .menu-goggler:hover+label,
        .menu-goggler:hover+label::before,
        .menu-goggler:hover+label::after {
            background-color: #fff;
        }
        
        .menu-goggler:checked+label {
            background-color: transparent;
        }
        
        .menu-goggler:checked+label::before,
        .menu-goggler:checked+label::after {
            width: 40px;
            top: 0;
            transform-origin: 50% 50%;
        }
        
        .menu-goggler:checked+label::before {
            transform: rotate(45deg);
        }
        
        .menu-goggler:checked+label::after {
            transform: rotate(-45deg);
        }
        
        .box li {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            list-style: none;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            transition: all .5s;
            opacity: 0;
        }
        
        .menu-goggler:checked~ul li:nth-child(1) {
            transform: rotate(0) translateX(-120px);
        }
        
        .menu-goggler:checked~ul li:nth-child(2) {
            transform: rotate(60deg) translateX(-120px);
        }
        
        .menu-goggler:checked~ul li:nth-child(3) {
            transform: rotate(120deg) translateX(-120px);
        }
        
        .menu-goggler:checked~ul li:nth-child(4) {
            transform: rotate(180deg) translateX(-120px);
        }
        
        .menu-goggler:checked~ul li:nth-child(5) {
            transform: rotate(240deg) translateX(-120px);
        }
        
        .menu-goggler:checked~ul li:nth-child(6) {
            transform: rotate(300deg) translateX(-120px);
        }
        
        .menu-goggler:checked~ul li {
            opacity: 1;
        }
        
        .box li a {
            display: block;
            width: inherit;
            height: inherit;
            background: url(http://ysscjak72409.3vhost.net/windows/disktable.jpg) no-repeat -620px -220px;
            border-radius: 50%;
        }
        
        .box li a:hover {
            background: url(http://ysscjak72409.3vhost.net/windows/disktable.jpg) no-repeat -510px -260px;
            box-shadow: 0 0 10px rgba(5, 5, 5, 0.5);
        }
    </style>
</head>

<body>
    <div class="box">
        <input type="checkbox" class="menu-goggler" id="menu-goggler">
        <label for="menu-goggler"></label>
        <ul>
            <li>
                <a href="javascript::"></a>
            </li>
            <li>
                <a href="javascript::"></a>
            </li>
            <li>
                <a href="javascript::"></a>
            </li>
            <li>
                <a href="javascript::"></a>
            </li>
            <li>
                <a href="javascript::"></a>
            </li>
            <li>
                <a href="javascript::"></a>
            </li>
        </ul>
    </div>
</body>

</html>
标签: CSS 

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

排行榜
四种主题风格
广告位 Ad1
关于我们
传授PC资源学习网(www.pc2356.com)个人博客,记录学习前端笔记和日记生活,分享网页源码、软件下载、学习资源等多方面资源网站。
联系我们
意见反馈
举报中心
扫码关注
Copyright@2020-2021 | Powered by©ZBLOG | 传授PC资源分享网 | RSS 订阅 | 站点地图