首页手记超简单-C3实现旋转六边形

超简单-C3实现旋转六边形

标签：

CSS3

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>正六边形旋转</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .kevin{
                width: 174px;
                height: 100px;
                margin: 50px auto;
                position: relative;
                transition: all 1s ease-in-out; 
            }
            .hexagon{
                width: 174px;
                height: 100px;
                background-color: rgba(0,0,0,0.4);
                position: relative;
                left: 0;
                top: 0;
            }
            .hexagon:before{
                content: "";
                display: block;
                width: 174px;
                height: 100px;
                background-color: rgba(0,0,0,0.4);
                transform: rotate(60deg);
                position: absolute;
                left: 0;
                top: 0;
            }
            .hexagon:after{
                content: "";
                display: block;
                width: 174px;
                height: 100px;
                background-color: rgba(0,0,0,0.4);
                transform: rotate(-60deg);
                position: absolute;
                left: 0;
                top: 0;
            }
            .kevin:hover{
                transform: rotate(360deg);
                transition: all .5s ease-in-out; 
            }
        </style>
    </head>
    <body>
        <div class="kevin">
            <div class="hexagon"></div>
        </div>
    </body>
</html>

点击查看更多内容