云台方向控制按钮

一个开发菜鸟
于 2023-08-18 17:31:26 发布
阅读量606
点赞数
文章标签： css css3 前端
本文链接：https://blog.csdn.net/qq_36406553/article/details/132366353
版权
在这里插入图片描述
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>八方向云台控制器</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .yt_box {
            width: 220px;
            height: 220px;
            /* width: 320px; */
            padding: 20px;
            /* background-color: #f6f8fe; */
            border-radius: 50%;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .pie {
            position: relative;
            box-shadow: 0 0 20px #ccc;
            padding: 0;
            /* width: 300px; */
            width: 200px;
            height: 200px;
            border-radius: 50%;
            list-style: none;
            overflow: hidden;
            background: url('bg.png') no-repeat center center / 100% 100%;

            background-color: #fdfefe;
        }

        .center {
            position: absolute;
            width: 80px;
            height: 80px;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            /* background: url('paly.png') no-repeat center center / 60% 60%; */
            border: 1px solid #eee;
            background-color: #fff;

        }

        .slice {
            overflow: hidden;
            position: absolute;
            top: 0;
            right: 0;
            width: 50%;
            height: 50%;
            transform-origin: 0% 100%;
            background-color: #fff;

        }

        .slice img {
            max-width: 20px;
            margin-top: 46px;
            margin-left: 20px;
            /* margin-top: 70px;
            margin-left: 40px; */
        }

        .slice-one {
            transform: rotate(-22.5deg) skewY(-45deg);
            /* background-color: red; */
            /* background-color: #f8f8f8; */

        }



        .slice-one img {
            transform: skewY(45deg) rotate(22.5deg);

        }

        .slice-two {
            /* background-color: green; */
            transform: rotate(22.5deg) skewY(-45deg);

        }

        .slice-two img {
            transform: skewY(45deg) rotate(22.5deg);

        }

        .slice-three {
            /* background-color: blue; */
            transform: rotate(67.5deg) skewY(-45deg);

        }

        .slice-three img {

            transform: skewY(45deg) rotate(22.5deg);

        }

        .slice-four {
            /* background-color: yellow; */
            transform: rotate(112.5deg) skewY(-45deg);

        }

        .slice-four img {
            transform: skewY(45deg) rotate(20.5deg);

        }

        .slice-five {
            /* background-color: black; */
            transform: rotate(157.5deg) skewY(-45deg);

        }

        .slice-five img {
            transform: skewY(45deg) rotate(20.5deg);

        }

        .slice-six {
            /* background-color: seagreen; */
            transform: rotate(202.5deg) skewY(-45deg);

        }

        .slice-six img {
            transform: skewY(45deg) rotate(20.5deg);

        }

        .slice-seven {
            /* background-color: darkgoldenrod; */
            transform: rotate(247.5deg) skewY(-45deg);

        }

        .slice-seven img {
            transform: skewY(45deg) rotate(22.5deg);

        }

        .slice-eight {
            /* background-color: maroon; */
            transform: rotate(292.5deg) skewY(-45deg);

        }

        .slice-eight img {
            transform: skewY(45deg) rotate(22.5deg);

        }
    </style>
</head>

<body>

    <div class="yt_box">
        <ul class='pie'>
            <li class='slice-one slice'>

                <img src="icon.png" alt="">

            </li>
            <li class='slice-two slice'>

                <img src="icon.png" alt="">

            </li>
            <li class='slice-three slice'>

                <img src="icon.png" alt="">

            </li>
            <li class='slice-four slice'>

                <img src="icon.png" alt="">

            </li>
            <li class='slice-five slice'>

                <img src="icon.png" alt="">
            </li>
            <li class='slice-six slice'>

                <img src="icon.png" alt="">

            </li>
            <li class='slice-seven slice'>

                <img src="icon.png" alt="">
            </li>
            <li class='slice-eight slice'>

                <img src="icon.png" alt="">

            </li>
            <div class="center"></div>
            <ul>
    </div>
</body>

</html>```