CSS3实现阴阳鱼

最新推荐文章于 2021-06-18 12:11:28 发布

Travelling1006

最新推荐文章于 2021-06-18 12:11:28 发布

阅读量188

点赞数 1

原文链接：http://www.cnblogs.com/talentzemin/p/5919803.html

版权

直接上代码：

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>阴阳鱼</title>
    <style>
        body { background: #F0DFAD; }
        .yin-yang { position: fixed; top: 50%; left: 50%; margin: -5rem 0 0 -5rem; height: 10rem; width: 10rem; border-radius: 50%; background: -webkit-linear-gradient(top, #fff 0%, #fff 50%, #000 50%, #000 100%); background: linear-gradient(to bottom, #fff 0%, #fff 50%, #000 50%, #000 100%); box-shadow: 0 0 1rem rgba(0, 0, 0, 0.4); -webkit-animation: rotate 10s linear infinite; animation: rotate 10s linear infinite; }

        @-webkit-keyframes rotate {
            0% { -webkit-transform: rotate(0); transform: rotate(0); }
            100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
        }

        @keyframes rotate {
            0% { -webkit-transform: rotate(0); transform: rotate(0); }
            100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
        }

        .yin-yang:before,
        .yin-yang:after { content: ''; box-sizing: border-box; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); height: 50%; width: 50%; border-radius: 50%; }
        .yin-yang:before { left: 0; background: #FFF; border: 2rem solid #000; }
        .yin-yang:after { right: 0; background: #000; border: 2rem solid #fff; }
    </style>
</head>
<body>
    <div class="yin-yang"></div>
</body>
</html>