angular实现算术运算答题倒计时小游戏代码-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：angular实现算术运算答题倒计时小游戏代码，可以自定义难度，在规定的时间内完成即可查看答题结果。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <style>
        @import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,700);
        @import url(https://fonts.googleapis.com/css?family=Advent+Pro:400,600,500,700);
        
        [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
            display: none !important;
        }
        
        *, *:after, *:before {
            box-sizing: content-box;
            outline: none;
        }
        
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            overflow: hidden;
        }
        
        body {
            background: linear-gradient(to bottom right, #673AB7, #3F51B5, #489FB6);
        }
        
        body, button {
            font-family: 'Roboto', sans-serif;
        }
        
        .centralize {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }
        
        .btn {
            border-radius: 25px;
            width: 200px;
            height: 40px;
            padding: 0;
            border: none;
            color: #fff;
            text-transform: uppercase;
            transition: all .2s cubic-bezier(0.46, 0.03, 0.22, 0.96);
            cursor: pointer;
            font-size: 18px;
            font-weight: 100;
        }
        
        .btn.bg1 {
            background: linear-gradient(45deg, #5644B6 50%, #4739A9 50%);
        }
        
        .btn:hover {
            transform: scale(1.1);
        }
        
        .bg-1, .bg-2 {
            position: absolute;
            left: 0;
            width: 366px;
            margin: auto;
            right: 0;
            height: 50%;
        }
        
        .bg-1 .list, .bg-2 .list {
            width: 60px;
            height: 100%;
            background: red;
            display: inline-block;
            margin: 0 5px;
        }
        
        .bg-1, .bg-2 {
            perspective: 200px;
        }
        
        .bg-1 {
            top: 0;
        }
        
        .bg-2 {
            bottom: 0;
        }
        
        .bg-1 .list {
            // transform: rotateX(-30deg);
            transform-origin: bottom center;
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 35%, rgba(255, 255, 255, .1), rgba(0, 0, 0, 0));
            animation: animation-bg-a 10s ease-in-out infinite; 
        }
        
        .bg-2 .list {
            transform: rotateX(30deg);
            transform-origin: top center;
            background: linear-gradient(to top, rgba(0, 0, 0, 0) 35%, rgba(255, 255, 255, .1), rgba(0, 0, 0, 0));
            animation: animation-bg-b 10s ease-in-out infinite; 
        }
        
        
        #container {
            width: 500px;
            height: 500px;
            background-color: rgba(255, 255, 255, .08);
            border-radius: 4px;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, .1), 0 0 0 1px rgba(255, 255, 255, .05) inset;
            overflow: hidden;
            background: linear-gradient(to bottom right, rgba(85,74,183,0.9), rgba(67,98,182,0.9), rgba(71,120,183,0.9));
        }
        
        .title {
            font-family: 'Advent Pro', sans-serif;
            text-transform: uppercase;
            font-weight: 100;
            font-size: 50px;
            text-align: center;
            color: #fff;
            margin-top: 50px;
            text-shadow: 1px 1px rgba(0, 0, 0, .1), 0 0 15px #fff;
        }
        
        .level {
            width: 230px;
            height: 153px;
            top: 80px;
        }
        
        .level h5 {
            text-align: center;
            font-weight: 100;
            color: rgba(255, 255, 255, .8);
            margin: 0 0px 10px 0;
        }
        
        .level input[type=radio] {
            opacity: 0;
            width: 0;
            margin: 0;
        }
        
        .level label, .alternative, .btn-help {
            width: 200px;
            display: block;
            padding: 10px;
            margin: 5px;
            border-radius: 50px;
            background: linear-gradient(45deg, rgba(0, 0, 0, 0.15) 50%, rgba(0, 0, 0, 0.25) 50%);
            color: #fff;
            cursor: pointer;
            font-weight: 100;
            text-transform: uppercase;
            transition: all .2s cubic-bezier(0.46, 0.03, 0.22, 0.96);
            text-align: center;
        }
        
        .level label.active, .alternative.current, .btn-help {
            background: linear-gradient(45deg, #FFDF07 50%, #FFC107 50%);
            color: #000000;
        }
        
        .level label:hover, .alternative:hover, .btn-help:hover {
            transform: scale(1.1);
        }
        
        .btn-play {
            top: 320px;
            width: 220px;
        }
        
        .current {
            background: blue;
        }
        
        /* infos */
        
        #info, .info {
            text-align: center;
            background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .2), rgba(255, 255, 255, 0));
            margin: -15px 30px;
            padding: 10px;
            color: #fff;
            font-size: 14px;
            font-weight: 100;
        }
        
        .info {
            margin: 0;
            padding: 20px 0;
            position: absolute;
            width: calc(100% - 40px);
            bottom: 20px;
            margin: 0 20px;
        }
        
        #info > div, .info > div {
            display: inline-block;
            padding: 0 10px;
        }
        
        #info > div span, .info > div span {
            border-radius: 50%;
            color: #FFF;
            box-shadow: 0 0 0 5px rgba(255, 255, 255, .1);
            margin-right: 8px;
            width: 25px;
            display: inline-block;
            text-align: center;
            padding: 3px 0px;
        }
        
        .info > div span {
            margin: -7px 15px -7px 0;
            font-size: 23px;
            float: left;
            width: 35px;
        }
        
        #info > div:nth-child(1) span, .info > div:nth-child(1) span {
            background-color: #226725;
        }
       .........完整代码请登录后点击上方下载按钮下载查看