无聊想用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. scala和maven整合实践

    .scala和maven如何整合     网上有一堆教程讲idea如何new module或new project一步一步来创建scala工程,在这里我不推荐这个.原因是现在主流的开发环境,大多数是采 ...

  2. PHP新手之学习数组声明

    数组是在程序设计中,为了处理方便, 把具有相同类型的若干变量按有序的形式组织起来的一种形式.这些按序排列的同类数据元素的集合称为数组.下面介绍PHP中的数组声明. 一.数组的概述 1.数组的本质:管理 ...

  3. JavaScript中typeof和instanceof深入详解

    这次主要说说javascript的类型判断函数typeof和判断构造函数原型instanceof的用法和注意的地方. typeof 先来说说typeof吧.首先需要注意的是,typeof方法返回一个字 ...

  4. jQuery如何创建元素

    1.$("<ul>").attr("id","taglist").appendTo("#tagCloud") ...

  5. jQuery DataTables and ASP.NET MVC Integration

    part 1 : http://www.codeproject.com/Articles/155422/jQuery-DataTables-and-ASP-NET-MVC-Integration-Pa ...

  6. HTTP的GET方法模拟

    进行GET方法的测试 #telnet[ ]10.1.1.11[ ]80 GET[ ]/[ ]HTTP/1.0 [两个回车] HEAD[]/[]HTTP/1.0[回车回车] http://www.cnb ...

  7. Vue.js自定义指令的用法与实例

    市面上大多数关于Vue.js自定义指令的文章都在讲语法,很少讲实际的应用场景和用例,以致于即便明白了怎么写,也不知道怎么用.本文不讲语法,就讲自定义指令的用法. 自定义指令是用来操作DOM的.尽管Vu ...

  8. VisualGDB Makefiles

    以下内容是VisualGDB官网对VisualGDB编译时获取相关编译信息的说明: When you create a new project using VisualGDB, it will gen ...

  9. 为什么我最终替换掉了NATS

    之前公司没有使用msmq/rebbitmq等消息队列,一方面是觉得太重,想避免在引入中间件.另外的原因是公司的业务并不需要消息持久化和确保可送达(at-least-once VS at-more-on ...

  10. Redis系列一（Redis环境的搭建）

    最近工作中需要Redis缓存,由于也是第一次弄,在网上找了很多资料,在此记录一下. 安装Redis 我使用的系统是CentOS 6.6,安装步骤如下: 1.下载源码,解压后编译源码.(如果没有 wge ...