无聊想用JS写个五子棋玩玩，这边先用CSS3画出了五子棋，感觉挺惊艳的。发上来看看

PS:第一次发博文T-T  此为个人原创。

不多说上图：

代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .box{

            width:500px;

            height:500px;

            margin:100px auto;

            background:#F6D67B;

            border:1px dashed #ff0;

        }

        .white-chess{

            width:50px;

            height:50px;

            border-radius:50%;

            background:radial-gradient(15px 15px at 15px 15px,#fff,#e2e2e2);

            margin:50px auto;

            box-shadow:2px 2px 4px rgba(0,0,0,0.3);

        }

        .black-chess{

            width:50px;

            height:50px;

            border-radius:50%;

            background:radial-gradient(10px 10px at 15px 15px,#fff,#333);

            margin:50px auto;

            box-shadow:2px 2px 4px rgba(0,0,0,0.4);

        }

        .black-chess1{

            width:50px;

            height:50px;

            position:relative;

            border-radius:50%;

            background:#333;

            margin:50px auto;

            box-shadow:2px 2px 4px rgba(0,0,0,0.4);

        }

        .black-chess1:after{

            content: "";

            display: block;

            width: 20px;

            height: 10px;

            border-radius: 50%;

            position: absolute;

            top: 10px;

            left: 4px;

            transform: rotate(-45deg);

            background: radial-gradient(20px 10px at 10px 5px,#fff,#aaa);

            box-shadow: 0 0 8px #fff;

        }

        .black-chess2{

            width:50px;

            height:50px;

            position:relative;

            border-radius:50%;

            background:#333;

            margin:50px auto;

            box-shadow:2px 2px 4px rgba(0,0,0,0.4);

        }

        .black-chess2:before{

            content: "";

            display: block;

            width: 10px;

            height: 10px;

            border-radius: 50%;

            position: absolute;

            top: 10px;

            left: 10px;

            background: radial-gradient(20px 10px at 10px 5px,#fff,#aaa);

            box-shadow: 0 0 8px #fff;

        }

        .black-chess2:after{

            content: "";

            display: block;

            width: 10px;

            height: 10px;

            border-radius: 50%;

            position: absolute;

            top: 10px;

            left: 28px;

            background: radial-gradient(20px 10px at 10px 5px,#fff,#aaa);

            box-shadow: 0 0 8px #fff;

        }

    </style>

</head>

<body>

    <div class="box">

        <div class="white-chess"></div>

        <div class="black-chess"></div>

        <div class="black-chess1"></div>

        <div class="black-chess2"></div>

    </div>

</body>

</html>

最后对box-shadow和background-gradient样式说明：

box-shadow属性值有4个参数：

第一个参数为阴影横向偏移，可为负数；
第二个参数为阴影竖向偏移，可为负数；
第三个参数为模糊度；
第四个参数为阴影颜色，可为rgba颜色；
background: radial-gradient(20px 10px at 10px 5px,#fff,#aaa);
 radial-gradient也就是径向渐变色，在这里的意思是(渐变大小)at(圆心坐标)，后面为渐变首尾颜色

纯CSS3之五子棋（黑白棋）画法的更多相关文章

  1. 纯css3手机页面图标样式代码

    全部图标:http://hovertree.com/texiao/css/19/ 先看效果: 或者点这里:http://hovertree.com/texiao/css/19/hoverkico.ht ...

  2. 纯CSS3实现的一些酷炫效果

    之前在网上看到一些用纯CSS3实现的酷炫效果,以为实现起来比较困难,于是想看看具体是怎么实现的. 一.笑脸猫动画 实现效果如下: 这个实现起来确实比较麻烦,很多地方需要花时间,有耐心地调整. 1.先看 ...

  3. 纯css3圆形从中心向四周扩散动画效果

    查看效果:http://hovertree.com/texiao/css3/37/ 先来个简单的示例,例如: @keyframes hovertreemove{from {top:30px;}to { ...

  4. 纯css3 3D图片立方体旋转动画特效

    纯css3 3D立方体模块,鼠标触碰,模块炸开,大立方体中套小立方体 效果展示 手机扫描二维码体验效果: 效果图如下: 源码下载:http://hovertree.com/h/bjaf/0qmul8g ...

  5. 纯CSS3实现多层云彩变换飞行动画

    查看效果:http://hovertree.com/texiao/css3/4/效果2 效果图: 代码如下: <!doctype html> <html lang="zh& ...

  6. 纯css3艺术文字样式效果代码

    效果:http://hovertree.com/texiao/css3/1/ 本效果主要使用text-shadow实现.参考:http://hovertree.com/h/bjaf/css3_text ...

  7. 纯CSS3实现动态火车行驶特效

    上次开完飞机,这次开火车 查看效果:http://hovertree.com/texiao/css3/7/ 效果图: 代码如下: <!DOCTYPE html> <html> ...

  8. [原创]纯CSS3打造的3D翻页翻转特效

    刚接触CSS3动画,心血来潮实现了一个心目中自己设计的翻页效果的3D动画,页面纯CSS3,目前只能在Chrome中玩,理论上可以支持Safari. 1. 新建HTML,代码如下(数据和翻页后的数据都是 ...

  9. 纯CSS3写的10个不同的酷炫图片遮罩层效果【转】

    这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...

随机推荐

  1. 【Xilinx-ZYNQ ucos-iii的移植与开发】-00-开始

    前一段时间,调试了一块ZYNQ的板子,上面用到了ucos-iii操作系统,最终在该板子上实现了操作系统的运行,并实现了一些外设模块的功能,主要包括PWM,I2C,GPIO,两级中断. 等有空了总结一下 ...

  2. Win10 的虛擬桌面

    Win10 的虛擬桌面我覺得蠻多餘的,平常很少用,除非是像以前的 "切換老闆鍵" ,老闆來了,你不想讓他知道你在幹嘛,趕快切換另外一個桌面. 切換工作視窗:Alt + Tab 叫出 ...

  3. 在vhd中安装win7，并建立分差vhd

    准备:硬盘分区激活第一个分区; imagex.exe; install.wim; winpe boot pc 1.cmd命令下,创建主vhd      (1)diskpart       (打开dis ...

  4. Angular - -ngKeydown/ngKeypress/ngKeyup 键盘事件和鼠标事件

    ngKeydown/ngKeypress/ngKeyup 该指令在按键按下/按键按下/按键松开时执行指定表达式. ngKeydown和ngKeypress略有不同,目前的测试是ngKeypress针对 ...

  5. Linux系统迁移

    文章来源http://blog.csdn.net/gt945/article/details/12253585 sudo rsync -aAXvP --exclude-from=exclude.txt ...

  6. HTML5定稿：手机App将三年内消失，互联网世界的第二次大战

    HTML5与app以对立竞争的产品形态展现在大众视野.从去年开始又有一大批技术派或者创业者盯向html5领域,移动游戏的爆发和微信朋友圈等众多平台为HTML5导流,能不能颠覆,或许只是时间上的问题. ...

  7. iOS 之 alcatraz (插件管理器)

    1. 安装 1.1. 打开命令行 curl -fsSL https://raw.githubusercontent.com/supermarin/Alcatraz/deploy/Scripts/ins ...

  8. js判断ip地址，子网掩码，网关的逻辑性检查

    因为要做静态地址配置的js校验,找了好多资料发现网上都是关于ip,mask的有效性检查,没有ip,submask,gateway的逻辑性判断,自己写下代码供需要的人参考. 普及下网关地址知识: 就是进 ...

  9. NetStream.appendBytes, 走向Flash P2P VOD的第一步

    之前被告知可以自行实现Flash p2p的点播功能, 但一直疑惑, 印象中NetStream并未提供相关方法, 前天看订阅时发现的文章: ByteArray Access to NetStream i ...

  10. SSM框架整合(注解)-Spring+SpringMVC+MyBatis+MySql

    准备工作: 下载整合所需的jar包 点击此处下载 使用MyBatis Generator生成dao接口.映射文件和实体类 如何生成 搭建过程: 先来看一下项目的 目录结构 1.配置dispatcher ...