无聊想用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. OC--类型为ID 的类的名称

    NSString *str = [[view class] description];

  2. CocoaPods ReactiveCocoa 学习实践一 之 配置环境

    1.安装CocoaPods 1.00.参考 CocoaPods 文档 1.01.是否已安装 which pod 1.1.升级gem命令 sudo gem update --system 1.2.切换C ...

  3. db2 数据类型

    数据类型: 字符串类型 描述 CHARACTER(n) n bytes定长字符串. n 大于0 不大于255. 默认 1. VARCHAR(n) 变长字符串,最大 n bytes. n大于 0 小于表 ...

  4. js如何准确获取当前页面url网址信息

    1.window.location.href(设置或获取整个 URL 为字符串) var test = window.location.href;alert(test);返回:http://i.cnb ...

  5. MyEclipse 中 添加 js自动完成模版

    MyEclipse 中 添加 js自动完成模版: window>preference>MyEclipse>Files and Editors>JavaScript>Edi ...

  6. WinForm TextBox 实现自动索引功能

    源代码如下: http://pan.baidu.com/s/1bnOz4hp

  7. 微信扫码下载APP

    前段时间开发过程中,要实现一个扫描二维码下载APP的功能,但是苹果系统中,微信不可以直接跳转苹果商店,需要先下载应用宝,显然太麻烦... 这样我们可以做个中间页,用中间页面生成二维码链接,在中间页代码 ...

  8. 简单加解密算法 - vb.net

    Public Class Form1    Dim charAarray() As Char    '加密    Private Sub Btn_En_Click(sender As System.O ...

  9. java算法 蓝桥杯 格子位置

    问题描述 输入三个自然数N,i,j (1<=i<=N,1<=j<=N),输出在一个N*N格的棋盘中,与格子(i,j)同行.同列.同一对角线的所有格子的位置. 输入格式 输入共三 ...

  10. Bezier（贝塞尔）曲线简介

    在计算机图形学中,Bezier曲线被广泛用于对平滑的曲线进行建模,对其有适当的了解是必要的.一条Bezier曲线由一系列控制点定义,称为曲线的阶数,由此可知,使用两个控制点()可以定义一条一阶Bezi ...