经典Windows扫雷小游戏

/* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */

@charset "UTF-8";

body {

min-height: 100vh;

padding: 1px;

box-sizing: border-box;

counter-reset: mines 10;

}

form {

display: flex;

flex-flow: column nowrap;

align-items: center;

}

input {

visibility: hidden;

position: absolute;

top: -99px;

left: -99px;

}

input[id^="f"]:checked {

counter-increment: mines -1;

}

.infos {

order: 2;

display: flex;

flex-flow: row nowrap;

justify-content: space-between;

width: 216px;

}

.timer {

font-family: "Roboto Sans", monospace;

font-size: 0;

background: #ccc;

border: 1px solid #808080;

height: 2.25rem;

line-height: 2.25rem;

padding: 0 .5rem;

}

.timer .separator {

display: inline-block;

vertical-align: middle;

font-size: 1rem;

}

.timer .separator:before {

content: ':';

}

@keyframes digit {

from {

top: 0;

}

to {

top: -1000%;

}

}

@keyframes digitTo6 {

from {

top: 0;

}

to {

top: -600%;

}

}

@keyframes extend {

from {

width: 0;

}

10%, to {

width: auto;

}

}

.timer .digit {

display: inline-block;

position: relative;

overflow: hidden;

vertical-align: middle;

font-size: 1rem;

}

.timer .digit:before {

content: '0';

visibility: hidden;

}

.timer .digit:after {

content: '0 \A 1 \A 2 \A 3 \A 4 \A 5 \A 6 \A 7 \A 8 \A 9';

position: absolute;

top: 0;

left: 0;

animation: digit 1s steps(10) infinite paused;

}

.timer .digit:nth-last-child(1):after {

animation-duration: 10s;

}

.timer .digit:nth-last-child(2):after {

content: '0 \A 1 \A 2 \A 3 \A 4 \A 5';

animation-name: digitTo6;

animation-timing-function: steps(6);

animation-duration: 60s;

}

.timer .digit:nth-last-child(4):after {

animation-duration: 600s;

}

.timer .digit:nth-last-child(5):after {

animation-duration: 6000s;

}

.timer .digit:nth-last-child(6) {

width: 0;

animation: extend 60000s steps(1) infinite paused;

}

.timer .digit:nth-last-child(6):after {

animation-duration: 60000s;

}

.counter {

display: inline-block;

border: 1px solid #808080;

background: #ccc;

padding: 0 .5rem;

font-size: 1.25rem;

font-family: "Roboto Sans", monospace;

height: 2.25rem;

line-height: 2.25rem;

}

.counter:before {

content: '

游戏缺少index.html,index.html相关推荐

  1. mysql ignore index,mysql强制索引FORCE INDEX/IGNORE INDEX忽略索引

    FORCE INDEX 通常用来对查询强制使用一个或者多个索引. MySQL 通常会根据统计信息选择正确的索引,但是当查询优化器选择了错误的索引或者根本没有使用索引的时候,这个提示将非常有用. IGN ...

  2. :/index.php,http://localhost/my/INDEX.PHP/INDEX/INDEX无法正常运行:解决时找不到Options FollowSymLinks谢谢...

    源自:2-3 路由类 http://localhost/my/INDEX.PHP/INDEX/INDEX无法正常运行:解决时找不到Options FollowSymLinks谢谢 打不到: Optio ...

  3. url(r'^index/$',views.index)的含义解释

    已知: urls.py中的代码是: from django.contrib import admin from django.urls import path from django import u ...

  4. 玩游戏计算机丢失msvcp,Win10系统玩吃鸡提示游戏缺少msvcp140.dll的解决方法

    最近有位win10系统用户反映,电脑运行吃鸡游戏的时候,系统弹出提示:"无法启动此程序,因为计算机中丢失msvcp140.dll,尝试重新安装该程序以解决此问题.",其实这是win ...

  5. php_self include,PHP_SELF返回/index.php/index.php

    为什么$_SERVER ['PHP_SELF']会返回/index.php/index.php ?? 请求 http://example.com 产量 /index.php/index.php 的in ...

  6. Python中[index for index, value in enumerate(a) if value > 3]

    并不是index for index,这段代码应该这么看.(大括号内视为一个整体) [{index} for {index, value} in {enumerate(x)} if {value == ...

  7. html中index函数,INDEX函数.doc

    INDEX函数 INDEX函数(有数组和引用两种用法.) 贡献者:HYPERLINK "/space-uid-1450717.html"843211 日期:2008-07-22 阅 ...

  8. TP6 控制器不存在:app\index\controller\Index

    今天把网站部署到服务器碰到一个大坑,代码本地运行没有问题,但是放到服务器就一直报错 控制器不存在:app\index\controller\Index 然后各种找原因,百度了说是Linux对大小写要求 ...

  9. Cordova工程index.html/index.css/index.js结构及关键代码

    Cordova工程index.html/index.css/index.js结构及关键代码 1. index.html 2. index.css (1)横竖屏的判断方法: (2)深色模式适配 3. i ...

  10. 玩游戏计算机缺失msvcp140,Win10系统玩吃鸡提示游戏缺少msvcp140.dll的解决方法

    最近有位win10系统用户反映,电脑运行吃鸡游戏的时候,系统弹出提示:"无法启动此程序,因为计算机中丢失msvcp140.dll,尝试重新安装该程序以解决此问题.",其实这是win ...

最新文章

  1. while保留五位小数c语言,C语言教程(共同学习)
  2. CSRF(Cross-site request forgery)跨站请求伪造
  3. 深刻理解:反向代理服务器
  4. Java事务处理全解析(二)——失败的案例
  5. 中判断字符串是否为空_leetcode1704_go_判断字符串的两半是否相似
  6. linux ppc64 是什么,docker - 在(模拟)PPC64 Linux上的backtrace()segfaults - 堆栈内存溢出...
  7. Linux平台上SQLite数据库教程(一)——终端使用篇
  8. php7 viewmodel,ViewModel浅析
  9. linux得到低权shell,oracle低权限下获取shell
  10. Poj 2001 Shortest Prefix(字典树模板)
  11. 【技术贴】解决开机本地连接出来慢,本地连接开机后出来时间慢
  12. SnowNLP自然语言处理模块具体用法
  13. 计算机声卡电路分析,几款经典简单的声卡话筒功放电路分析
  14. python拟合线性函数_Python线性拟合实现函数与用法示例
  15. Android基础整合项目之节日群发助手(一)
  16. tf.one_hot()的用法
  17. Linux虚拟机断电后开机出现:Entering emeryency mode. Exit the shell to continue.
  18. 零基础入门金融风控-贷款违约预测-机器学习-数据分析
  19. 用html做个猜字游戏,HTML5 Canvas API制作简单的猜字游戏
  20. 第四课 尚硅谷Scala语言学习-面向对象

热门文章

  1. 熟悉和理解linux编程环境,熟悉Linux环境和编程0.doc
  2. iphone桌面上的圆圈怎么设置_苹果手机桌面上找不到便签记事本怎么办?有办法添加吗...
  3. Linux云服务器安装Redis并设置远程连接设置开机自启
  4. 图方法:寻找无向图联通子集的JAVA版本
  5. Matlab atan2
  6. Boost多线程-替换MFC线程
  7. QT与openCV,与PCL结合!
  8. HDU 1455 Sticks
  9. python 中的input
  10. SQL Server查询死锁并KILL