css实例——“旋转”太极八卦图
话不多说，直接上代码：
HTML代码部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>太极八卦图案例</title>
<link rel="stylesheet" type="text/css" href="buguaStyle.css" />
</head>
<body>
<div class="background"> <!--主要是用到了定位，还有动画 -->
<div class="box">
<div class="Black"></div>
<div class="White"></div>
<div class="medium_black"></div>
<div class="medium_white"></div>
<div class="little_black"></div>
<div class="little_white"></div>
</div>
</div>
</body>
</html>
这里是css代码部分：
*{ /*css代码上来必须写的*/
padding:;
margin:;
list-style: none;
}
.background{
width: 100%;
height: 100%;
background: darkgray;
position: fixed;
/*定位 -> absolute(生成绝对定位元素，相对于父级元素进行定位)
fixed（生成绝对定位元素，相对于浏览器窗口进行定位）
relative（生成相对定位元素，相对于其正常位置进行定位）*/
}
.box{
width: 400px;
height: 400px;
border-radius:50%;
position: absolute; /*因为父级元素有了定位，所以这里用absolute*/
top:; /*上、下、左、右四个属性值来实现元素位置的改变*/
bottom:;
left:;
right:;
margin: auto;
animation:run 5s infinite linear;
}
.Black{
width: 200px;
height: 400px;
background: black;
border-radius: 200px 0 0 200px; /*形成一个黑色的左半圆*/
position: absolute;
}
.White{
width: 200px;
height: 400px;
background: white;
border-radius:0 200px 200px 0; /*形成一个白色的左半圆*/
left: 200px;
position: absolute;
}
.medium_black{
width: 200px;
height: 200px;
background: black;
border-radius: 50%;
position: absolute;
left:;
right:;
margin: auto;
bottom:; /*四个属性实现了中等大小的圆在最xia边的中间的位置*/
}
.medium_white{
width: 200px;
height: 200px;
background: white;
border-radius: 50%;
position: absolute;
left:;
right:;
margin: auto;
top:; /*这个可以写也可以不写，因为是这个默认是在左上角的，写了上边三个属性后就己经能达到想要的效果了*/
}
.little_black{
width: 100px;
height: 100px;
background: black;
border-radius: 50%;
position: absolute;
left:;
right:;
margin: auto;
top: 50px;
}
.little_white{
width: 100px;
height: 100px;
background: white;
border-radius: 50%;
position: absolute;
left:;
right:;
margin: auto;
bottom: 50px;
}
@keyframes run{
from{
transform: rotate(0deg);/*这里不写也是可以的，因为默认的话就是0*/
}
to{
transform: rotate(360deg);
}
}
总结：
主要是用到了定位（position），要熟悉定位的三个常用属性。
css实例——“旋转”太极八卦图的更多相关文章
- 用CSS伪类制作一个不断旋转的八卦图？
前言 介绍一下如何制作一个不断旋转的八卦图.快速预览代码及效果,点击:八卦图 代码如下: HTML部分 <!DOCTYPE html> <html> <head> ...
- CSS3 旋转的八卦图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 【DIV+CSS】代码作业练习DIV+CSS太极阴阳图
1. DIV + CSS 练习:太极阴阳图. 基本思路:由三个div块元素组成: #taiji太极阴阳图底面 #yin太极阴阳图阴面小圆 #yang太极阴阳图阳面小圆 (太极阴阳图:上为阳下 ...
- 使用CSS达到阴阳八卦图等图形
CSS还是比較强大的,能够实现中国古典的"阴阳八卦图"等形状. 正方形 #rectangle { width: 200px; height: 100px; backgrount-c ...
- 用CSS实现阴阳八卦图等图形
CSS还是比较强大的,可以实现中国古典的"阴阳八卦图"等形状. 正方形 #rectangle { width: 200px; height: 100px; backgrount-c ...
- LESS CSS 实例
值得参考的 10 个 LESS CSS 实例 2 收藏(185) LESS, Sass 和其他 CSS 预处理器是一种超棒的方法用来扩展 CSS 功能,使之更适合程序员.你可以使用变量.函数.混合 ...
- canvas画布——画八卦图
实例 创建一个圆形: var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d") ...
- CSS实例
CSS 实例 CSS背景 设置页面的背景颜色 设置不同元素的背景颜色 设置一个图像作为页面的背景 错误的的背景图片 如何在水平方向重复背景图像 如何定位背景图像 一个固定的背景图片(这个图片不会随页面 ...
- CSS之全屏背景图
吐槽啦:Yeah 明天就是国庆了o(*￣▽￣*)o!哈哈,提前祝福各位园友国庆快乐.假期愉快.生活美满.天天开心!国庆我要回家一趟,把一些不用的东西带回家,走访一下亲朋好友,在家打几天酱油~~~ 言 ...
随机推荐
- Linux 安装 PostgreSQL
Linux 安装 PostgreSQL CentOS 7 安装 PostgreSQL 10 步骤 官网安装步骤,选择服务器和数据库版本,会给出相应的安装命令 # 安装 yum install -y h ...
- The Involution Principle
目录 Catalan Paths Vandermonde Determinant The Pfaffian Catalan Paths 从 \((0,0)\) 走到 \((n,n)\), 每次只能向上 ...
- ~/.ssh/目录找不到解决方法
执行 cd ~/.ssh发现.ssh目录找不到 原因是因为没有用root用户ssh登录过,执行一下ssh操作就会自动生成了
- Aspnet Zero中使用Windows service (Topshelf)来承载Quartz.net任务
Aspnet Zero使用Windows service (Topshelf)来承载Quartz.net任务 网上有很多关于如何使用Topshelf创建ABP的Quartz windows服务,但很少 ...
- python设计模式之适配器模式
python设计模式之适配器模式 结构型设计模式一个系统中不同实体(比如,类和对象)之间的关系,关注的是提供一种简单的对象组合方式来创造功能. 适配器模式( Adapter pattern)是一种结构 ...
- 简单的main方法调用一个加减法函数背后的细节
测试程序 /* * AddTest.c * * Created on: 2019年10月13日 * Author: appweb */ #include <stdio.h> int add ...
- 带你用 Python 实现自动化群控设备
1. 前言 群控,相信大部分人都不会陌生!印象里是一台电脑控制多台设备完成一系列的操作,更多的人喜欢把它和灰产绑定在一起! 事实上,群控在自动化测试中也被广泛使用!接下来的几篇文章,我将带大家聊聊企业 ...
- 遗传算法框架-基于java jenetics库实现
本篇并非介绍如何从0开始开发遗传算法框架,反而推荐各位使用已有的GA库jenetics来做遗传算法. GA算法的逻辑还是贴下: 好了,下面介绍的是基于jenetics开发的更贴近业务侧的框架,以及使用 ...
- 牛客网PAT练兵场-程序运行时间
题解:无(注意下四舍五入和输出格式即可) 题目地址:https://www.nowcoder.com/questionTerminal/fabbb85fc2d342418bcacdf0148b6130 ...
- 开始进行lammps手册的学习啦，跟着Manual一边翻译一边做吧！（转载）
转载自:http://blog.sina.com.cn/s/blog_64813e370100ngsz.html 注明:黄色部分基本上为不懂的部分,红色字体为所做注释 一.各种文件的介绍: 1 in ...