Css 八卦
- <div class="box">
- <div class="right_d"></div>
- <span class="back">
- <span class="n1"></span>
- </span>
- <span class="backs">
- <span class="n2"></span>
- </span>
- </div>
- .box{
- border:5px solid #;
- border-radius:500px;
- width:500px;
- height:500px;
- position: relative;
- overflow:hidden;
- }
- .back{
- background: #;
- width: 250px;
- height: 250px;
- position: absolute;
- border-radius: 500px;
- left: %;
- }
- .backs{
- background: #fff;
- width: 250px;
- height: 250px;
- position: absolute;
- border-radius: 500px;
- left: %;
- bottom:;
- }
- .right_d{
- background:#;
- width:250px;
- height:500px;
- right:;
- position:absolute;
- }
- .n1{
- background:#fff;
- width:100px;
- height:100px;
- border-radius:100px;
- position:absolute;
- top:%;
- left:%;
- }
- .n2{
- background:#;
- width:100px;
- height:100px;
- border-radius:100px;
- position:absolute;
- bottom:%;
- left:%;
- }
Css 八卦的更多相关文章
- Matplotlib数据可视化(3):文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- CSS实现圆角,三角,五角星,五边形,爱心,12角星,8角星,圆,椭圆,圆圈,八卦
转自:http://blog.csdn.net/chenhongwu666/article/details/38905803 CSS实现圆角,三角,五角星,五边形,爱心,12角星,8角星,圆,椭圆,圆 ...
- 使用CSS达到阴阳八卦图等图形
CSS还是比較强大的,能够实现中国古典的"阴阳八卦图"等形状. 正方形 #rectangle { width: 200px; height: 100px; backgrount-c ...
- CSS之纯CSS画的基本图形(矩形、圆形、三角形、多边形、爱心、八卦等)
图形包括基本的矩形.圆形.椭圆.三角形.多边形,也包括稍微复杂一点的爱心.钻石.阴阳八卦等.当然有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,我希望你用的是firefox或者chrome, ...
- 用CSS伪类制作一个不断旋转的八卦图?
前言 介绍一下如何制作一个不断旋转的八卦图.快速预览代码及效果,点击:八卦图 代码如下: HTML部分 <!DOCTYPE html> <html> <head> ...
- 用CSS实现阴阳八卦图等图形
CSS还是比较强大的,可以实现中国古典的"阴阳八卦图"等形状. 正方形 #rectangle { width: 200px; height: 100px; backgrount-c ...
- css实例——“旋转”太极八卦图
话不多说,直接上代码: HTML代码部分: <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...
- css 实现旋转八卦图
虽然这不算什么亮点,不过也可以供路上的小伙伴学习下 直接上干货: <!doctype html> <html lang="en"> <head> ...
- 纯CSS画的基本图形(圆形、三角形、多边形、爱心、八卦等)
1.圆形 .circle { width: 100px; height: 100px; background: red; border-radius: 50px; } 2.椭圆 .oval { wid ...
随机推荐
- 在Qt中将函数发送到主线程执行
考虑这样一种需求,使用Qt的线程类QThread在后台执行操作(比如说拷贝文件)的时候发生了错误,产生了一个错误信息需要提醒给用户,在后台输出很显然是不够的,因为用户可能根据就没有任何控制台可供程序输 ...
- WordPress ‘crypt_private()’方法远程拒绝服务漏洞
漏洞名称: WordPress ‘crypt_private()’方法远程拒绝服务漏洞 CNNVD编号: CNNVD-201306-250 发布时间: 2013-06-20 更新时间: 2013-06 ...
- Python核心编程 练习
2–9.循环和运算符 创建一个包含五个固定数值的列表或元组,输出他们的平均值.本练习的难点之一是通过除法得到平均值. 你会发现整数除会截去小数,因此你必须使用浮点除以得到更精确的结果. float() ...
- MapReduce的reduce函数里的key用的是同一个引用
最近写MapReduce程序,出现了这么一个问题,程序代码如下: package demo; import java.io.IOException; import java.util.HashMap; ...
- Back to Basics: Using KVO
One of the things I like most about Apple’s iOS SDK is the consistent and easy-to-use API they provi ...
- js转码和解码兼容低版本火狐
function HTMLEncode(html) { var temp = document.createElement("div"); ...
- java垃圾回收算法
1.标记-清除 2.标记-复制 3.标记-整理 4.分代混合算法
- js中widow.open()方法详解
一. window.open() 支持环境: JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+ 二.基本语法: window.open(pageURL,nam ...
- 查询表达式Linq
LINQ简介 OO(面向对象)以外的疆域:信息的访问与整合.关系数据库与XML为其中的典型应用. .net Language Integrated Query(Linq):不采用特定关于数据库与XML ...
- Activity进入与退出的动画
1.在res建立目录anim放入动画效果xml文件 1.1 进入文件 push_left_in.xml <?xml version="1.0" encoding=&qu ...