css3八卦,CSS3 旋转的八卦图

#container{height: 202px;width: 200px;border-radius: 200px;box-shadow: 0 0 4px #666666;margin: 100px auto;

background: linear-gradient(90deg,black 50%,white 50%);}

#top,#bottom{height: 100px;width: 100px;margin: 0 auto;border-radius: 100px}

#top{border: 1px solid white;}

#bottom{border: 1px solid black;}

#inner1,#inner2{height:50px;width: 50px;margin: 25px auto;border-radius: 50px; }

#inner1{background: black}

#inner2{background: white}

#top{background: white}

#bottom{background: black}

@keyframes bonce{

0%{transform: rotate(0deg)}

100%{transform: rotate(360deg)}

}

#container{animation-name: bonce;animation-duration: 5s;animation-iteration-count: 100;animation-timing-function: linear;}

就是还没搞清楚inner1、inner2的border如果取消的话就会发生偏移，容我再研究。

用CSS伪类制作一个不断旋转的八卦图？

前言 介绍一下如何制作一个不断旋转的八卦图.快速预览代码及效果,点击:八卦图 代码如下: HTML部分

...

css实例——“旋转”太极八卦图

话不多说,直接上代码: HTML代码部分:

css3旋转小三角

canvas画布——画八卦图

实例 创建一个圆形: var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d") ...

css3实现轮播图

css3动画属性简写: animation: name  duration  timing-function  delay  iteration-count  direction  fill-mode ...

随机推荐

【WCF】错误协定声明

在上一篇烂文中,老周给大伙伴们介绍了 IErrorHandler 接口的使用,今天,老周补充一个错误处理的知识点——错误协定. 错误协定与IErrorHandler接口不同,大伙伴们应该记得,上回我们 ...

magento做手机端思路

有个插件可以检测移动设备访问,然后显示对于的手机主题这个方法最简单另外的就是调接口了这个用来做app也行不过mg的数据不是json数据,是xml速度很慢

[JavaEE] Eclipse中web-inf和meta-inf文件夹的信息

WEB-INF    /WEB-INF/web.xml        你的Web应用程序配置文件,这是一个XML文件,其中描述了 servlet 和其他的应用组件配置及命名规则:    /WEB- I ...

JAVA 8 新特性和改进

Java 8的所有新特性及改进包括(JEP全称为JDK Enhancement Proposal,JDK改进建议): 语言改进: JEP 126:Lambda表达式 & 虚拟扩展方法 JEP ...

Java_web学习(二) eclipse(tomcat)配置

1.先下载eclipse,隔代版本最佳 https://www.eclipse.org/ 2.创建workspace01存放项目代码 3.配置工作目录: IDE相关配置信息 2 没有配置tomcat, ...

selenium环境搭建-python自动化脚本测试

站在朋友的肩膀上学习!!! 前提:python环境已经搭建完成 1.安装selenium 命令行输入“pip install selenium"一键式安装 2.检查Selenium是否安装成 ...

django之ORM数据库操作

一.ORM介绍 映射关系: 表名 -------------------->类名 字段-------------------->属性 表记录----------------->类实例 ...

codeforces 798 D. Mike and distribution

D. Mike and distribution time limit per test 2 seconds memory limit per test 256 megabytes input sta ...

module 'pip' has no attribute 'pep425tags'

AMD64 import pip._internal print(pip._internal.pep425tags.get_supported()) 1 2 WIN32 import pip prin ...

idea窗口下方滚动条不明显设置

在使用idea时,下方的滚动条老是显示不明显,每次点击拖拽都很费劲,在网上找了很多相关设置,最后确定了一个最好的办法解决问题: Shift (上档) +  鼠标滚动,这样就可以横向翻滚了,很方便 此方 ...