CSS之用圆角属性画八卦图/纯CSS旋转八卦图【2018-7-3】

    选择打赏方式

微信公众号伊伊兔,QQ群号:455535550,淘宝天猫优惠劵领取网站:dy208.cn

2018年7月3日的课堂作业

第一份代码是旋转的八卦图,是后来我网上找的参考

第二份是自己画出来的没有旋转效果(看完别人代码才发现我直接拼图好low啊= =)

QQ截图20180703125913.jpg

旋转八卦图:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }



        .yin-yang1 {
            width: 200px;
            height: 200px;
            background: black;
            border-radius: 50%;
            border: 1px solid black;
            position: relative;
            animation: spin 1s linear infinite; /*动画设置*/
        }
        @keyframes spin {
            0%{
                transform: rotate(0deg);
            }
            100%{
                transform: rotate(360deg);
            }
        }

        .yin-yang2 {
            width: 200px;
            height: 100px;
            background: white;
            border-radius: 100px 100px 0 0;
            position: absolute;
            z-index: 5;
        }

        .yin-yang3 {
            width: 100px;
            height: 100px;
            background: white;
            position: absolute;
            z-index: 6;
            top:50px;
            border-radius: 50%;
        }
        .yin-yang4{
            width: 100px;
            height: 100px;
            background: black;
            position: absolute;
            top:50px;
            left:100px;
            z-index: 7;
            border-radius: 50%;
        }
        .yin-yang5{
            width: 30px;
            height: 30px;
            background: black;
            position: absolute;
            top:85px;
            left:35px;
            z-index: 8;
            border-radius: 50%;
        }
        .yin-yang6{
            width: 30px;
            height:30px;
            background: white;
            position: absolute;
            top:85px;
            left:135px;
            z-index: 9;
            border-radius: 50%;
        }
    </style>
</head>
<body>

<div class="yin-yang1">
    <div class="yin-yang2"></div>
    <div class="yin-yang3"></div>
    <div class="yin-yang4"></div>
    <div class="yin-yang5"></div>
    <div class="yin-yang6"></div>
</div>
</body>
</html>

个人作业:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	 

		.yuan{
			width: 360px;
			height: 360px;
			background: black;
			border-radius: 50%;
			 border: 1px solid black;


		}
		.yuan1{
			width: 360px;
			height:180px;
			background: white;
			border-radius: 180px 180px 0 0;
			position: absolute;
			top:0;
			left:8px;
			border: 1px solid black;

		}
		.yuanyou{
			width: 180px;
			height: 180px;
			border-radius: 50%;
			background: black;
			position: absolute;
			left:189px;
			top:90px;
			/*border:1px solid black;*/
		}
		.yuanzuo{
			width: 180px;
			height: 180px;
			border-radius: 50%;
			background: white;
			position: absolute;
			left:9px;
			top:90px;
			/*border:1px solid white;*/
		}
		.yuanx1{
			width: 60px;
			height: 60px;
			background: white;
			border-radius: 50%;
			position: absolute;
			top:150px;
			left: 270px;
         border:1px solid white;

		}
				.yuanx2{
			width: 60px;
			height: 60px;
			background: black;
			border-radius: 50%;
			position: absolute;
			top:150px;
			left: 90px;
         border:1px solid black;

		}
		
		
	</style>
</head>
<body>
	<div class="yuan"></div>
	<div class="yuan1"></div>
	<div class="yuanyou"></div>
	<div class="yuanx1"></div>
	<div class="yuanzuo"></div>
	<div class="yuanx2"></div>
</body>
</html>

版权声明:若无特殊注明,本文皆为《 子成君 》原创,转载请保留文章出处。
本文链接:CSS之用圆角属性画八卦图/纯CSS旋转八卦图【2018-7-3】 https://www.zcjun.com/learn/104.html
百度收录:本文已被百度收录点击查看详情!
本文到此结束

热门推荐

发表吐槽

你肿么看?

你还可以输入 250 / 250 个字

爱你允悲悲伤吃惊委屈可怜憧憬吃瓜大哭开心坏笑笑哭哼打哈欠鼓掌乖嘘阴险日了狗费解挤眼滑稽666比心


既然没有吐槽,那就赶紧抢沙发吧!