前端开发CSS3旋转的小星星

java前端android开发工具
苹果和安卓通用的前端开发工具
前端在线开发工具

css3旋转的小星星

<!DOCTYPE html>
    <head>
        <meta charset=”utf-8″ />
        <title></title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            ul,
            ol,
            li {
                list-style: none;
            }
            .box {
                position: relative;
                width: 100px;
                height: 100px;
                margin: 100px auto;
            }
            .box a {
                display: block;
                width: 100px;
                height: 100px;
                background: pink;
                text-align: center;
                text-decoration: none;
                color: #cdcdcd;
                line-height: 100px;
                transform: rotate(-45deg);
                transition: all 2s;
                border-radius: 50%;
            }
            .box span {
                display: block;
                width: 100px;
                height: 100px;
                background: pink;
                transform: rotate(22.5deg);
                border-radius: 50%;
                transition: all 2s;
            }
            .box a:hover,
            .box span:hover {
                text-shadow: 0 0 20px #fff, 0 0 8px #fff;
                background-color: #fa0;
                border-radius: 0;
            }
            .box a:hover {
                transform: rotate(315deg);
            }
            .box2 {
                position: relative;
                width: 100px;
                height: 100px;
                margin: 100px auto;
            }
            .box2 a {
                display: block;
                width: 100px;
                height: 100px;
                background: pink;
                text-align: center;
                text-decoration: none;
                color: #cdcdcd;
                line-height: 100px;
                transform: rotate(-45deg);
                transition: all 2s;
            }
            .box2 span {
                display: block;
                width: 100px;
                height: 100px;
                background: pink;
                transform: rotate(22.5deg);
                transition: all 2s;
            }
            .box2 a:hover,
            .box2 span:hover {
                text-shadow: 0 0 20px #fff, 0 0 8px #fff;
                background-color: #fa0;
            }
            .box2 a:hover {
                transform: rotate(315deg);
            }
        </style>
    </head>
    <body>
        <div class=”box”>
            <a href=”##”>
                <span
                    ><span><span>小星星</span></span></span
                >
            </a>
        </div>
        <div class=”box2″>
            <a href=”##”>
                <span
                    ><span><span>小星星</span></span></span
                >
            </a>
        </div>
    </body>
</html>
wedstrom前端开发工具
前端代码开发工具
web前端开发工具推荐
» 本文来自:前端开发者 » 《前端开发CSS3旋转的小星星》
» 本文链接地址:https://www.rokub.com/8114.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!