无聊想用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. js原生写的微博留言板有angularjs效果

    1.HTML: <!DOCTYPE html><html><head lang="en">    <meta charset=" ...

  2. Angular - - 脏值检查及其相关

    今天突然就想写写$digest和$apply,这些都是脏值检查的主体内容. 先以普通js来做一个简单的监控例子吧: var div = ducoment.getElementById("my ...

  3. HDU-1754-I Hate It（线段树，简单，不过好像有点问题）

    题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=1754 题目不难,不过开始我犯了一个低级错误,输入n,m,m代表操作的数目,我没有写了,写代码的时候,就 ...

  4. 关于oracle导出时的query用法

    QUERY参数后面跟的是where条件,值得注意的是,整个where子句需要使用""括起来,where子句的写法和SELECT中相同: 如果是UNIX平台所有"和'都需 ...

  5. 删除坐标相同文本对象 按照原y坐标排序

    ;; ;;程序名称:对象水平对齐程序,并且按照竖直方向排列 ;;执行命令:tb2 ;;程序功能:将选定的对象左对齐,并且按照竖直方向排列. ;; (defun c:tb2(/ selobjs oldc ...

  6. Java 导出Excel的各种尝试

    最近的一个项目比较忙,一直没时间过来跟新博客.今天过来分享一下在此项目中遇到的一个小问题:导出Excel:相信导出Excel这个功能是特别常见的,也有很多的方式.好了,不多说了,直接说说自己遇到的各种 ...

  7. Bootstrap入门（四）表格

    Bootstrap入门(四)表格 <table>标签 首先,引入bootstrap的css文件,然后表格内容放在一个class为table的<table>标签中(class=& ...

  8. linux系统时间同步

    1.linux系统时间同步[root@xuegod62 ~]# /usr/sbin/ntpdate ntp1.aliyun.com2.linux系统定时同步[root@xuegod62 ~]# ech ...

  9. [原创.数据可视化系列之十二]使用 nodejs通过async await建立同步数据抓取

    做数据分析和可视化工作,最重要的一点就是数据抓取工作,之前使用Java和python都做过简单的数据抓取,感觉用的很不顺手. 后来用nodejs发现非常不错,通过js就可以进行数据抓取工作,类似jqu ...

  10. SQL SERVER运维日记--收缩数据库

    一个小故事 某天,小王正在和HR妹妹闲聊,正HAPPY时,,突然收到系统告警消息,数据库磁盘被剩余空间500M,OMG,不行,磁盘快满了,要是业务要停了,,那就小王只能删库到跑路了,,, 先检查下,有 ...