无聊想用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. OpenSceneGraph几个重要功能节点练习

    OpenSceneGraph几个重要功能节点练习 一. 空间变换节点 空间变换中最重要的是坐标系和矩阵运算了.OSG坐标系中使用右手系,Z轴垂直向上,X轴水平向右,Y轴垂直屏幕向里,与OpenGL和D ...

  2. 为什么ajax 必须同源，same origin policy

    ajax 所有请求都会附带主域的cookie, 若没有同源策略,攻击者就可以获取你的cookie,状态.

  3. Intellij idea 15配置tomcat，maven

    刚导了个项目进去,想把项目运行起开,怎么也找不到tomcat... ctrl + alt +s,打开设置窗,搜索 Application Server Tomcat: 点中间绿色的“+”号,添加选择t ...

  4. 1.3.2. App Icon 和 Launch Image（Core Data 应用程序实践指南）

    App Icon: 选中 Assets.xcassets 选择 AppIcon ,并拖入图片(29.40.60) Launch Image: 创建 Launch Image 拖入图片(2x.R4)

  5. 笔记整理——linux程序设计

    数据库 (2013/2/27 16:07:11) 线程 (2013/2/27 15:47:51)   信号 (2013/2/27 15:31:28)         消息队列.共享内存 (2013/2 ...

  6. js原生继承之——组合式继承实例

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  7. JSP获取绝对物理地址

    session.getServletContext().getRealPath(""); 但是 getRealPath("a"+File.separator); ...

  8. SSM（Maven集成）

    ssm全称:Spring+SpringMVC+Mybatis ssm简介: 1.Spring Spring是一个开源框架,Spring是于2003 年兴起的一个轻量级的Java 开发框架,由Rod J ...

  9. Mongoose与bluebird结合使用实例

    nodejs的所有调用几乎是全异步的,而所有的IO操作也都是通过回调函数才能知道结果. 如果一个异步调用依赖另一个异步调用,如果没有Promise的话,有可能陷入传说中的回调地狱. bluebird实 ...

  10. nw.js桌面程序自动更新（node.js表白记）

    Hello Google Node.js 一个基于Google V8 的JavaScript引擎. 一个伟大的端至端语言,或许我对你的热爱源自于web这门极富情感的技术吧! 注: 光阴似水,人生若梦, ...