×

2018世界杯,用HTML5+CSS3来画个足球场

作者:天空2018.06.28来源:Web前端之家浏览:2165评论:0
关键词:世界杯足球
微信公众号

微信公众号

2018世界杯,用HTML5+CSS3来画个足球场。

<!DOCTYPE html>
<html>
<head>
    <style>
    body, html {
      position: relative;
      margin: 0;
      padding: 0;
      background: -webkit-gradient(radial, 50%, 0, 50%, 100, color-stop(0%, #c26649), color-stop(100%, #6b220b));
      background: -webkit-radial-gradient(center, ellipse cover, #c26649 0%, #6b220b 100%);
      background: -moz-radial-gradient(center, ellipse cover, #c26649 0%, #6b220b 100%);
      background: radial-gradient(center, ellipse cover, #c26649 0%, #6b220b 100%);
      text-align: center;
      vertical-align: middle;
      height: 100%;
    }
    .centrar {
      margin: 0;
      padding: 0;
      display: inline-block;
      height: 100%;
      width: 0;
      margin: 0;
      padding: 0;
      vertical-align: middle;
    }
    .campo {
      position: relative;
      display: inline-block;
      vertical-align: middle;
      width: 90%;
      height: 0;
      margin: 10px auto;
      padding: 0 0 60% 0;
      background: green;
    }
    .interior, .divisoria,
    .semi1, .semi2,
    .corner {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      width: 94%;
      height: 90%;
      margin: auto;
      border: 2px solid #eee;
    }
    .divisoria:after, .divisoria:before {
      content: "";
      position: absolute;
      left: 50%;
      display: block;
      width: 0;
      height: 100%;
      margin-left: .5px;
      border: 1px solid #eee;
    }
    .divisoria:before {
      top: 50%;
      width: 16%;
      height: 0;
      margin: -8% 0 0 -8%;
      margin-top: calc(-8% - 4px);
      margin-left: calc(-8% - .5px);
      padding-bottom: 16%;
      border-radius: 50%;
      border: 2px solid #eee;
    }
    .campo:before, .campo:after {
      content: "";
      position: absolute;
      top: 50%;
      left: 3%;
      margin: -8% 0 0 -2px;
      display: block;
      width: 6%;
      height: 24%;
      border: 2px solid #eee;
      z-index: 2;
    }
    .campo:after {
      left: auto;
      right: 3%;
      margin-right: -2px;
    }
    .interior:before, .interior:after {
      content: "";
      position: absolute;
      top: 50%;
      left: 0;
      margin: -16% 0 0 -2px;
      display: block;
      width: 16%;
      height: 50%;
      background: green;
      border: 2px solid #eee;
    }
    .interior:after {
      left: auto;
      right: 0;
      margin: -16% -2px 0 0;
    }
    .semi1:before, .semi2:before {
      content: "";
      position: absolute;
      top: 50%;
      left: 12%;
      display: block;
      width: 1%;
      height: 1.5%;
      margin: -.75% 0 0 0;
      background: #eee;
      border-radius: 50%;
      z-index: 2;
    }

    .semi2:before {
      left: auto;
      right: 12%;
    }
    .semi1:after, .semi2:after {
      content: "";
      position: absolute;
      top: 50%;
      left: 5%;
      width: 16%;
      height: 0;
      margin: -8% 0 0 0;
      padding-bottom: 16%;
      border: 2px solid #eee;
      border-radius: 50%;
    }

    .semi2:after {
      left: auto;
      right: 5%;
    }

    .corner {
      overflow: hidden;
    }

    .corner1:before, .corner2:before,
    .corner1:after, .corner2:after {
      content: "";
      position: absolute;
      top: -6%;
      left: -4%;
      width: 6%;
      height: 0;
      margin: 0 0 0 0;
      padding-bottom: 6%;
      border: 2px solid #eee;
      border-radius: 50%;
    }

    .corner1:after {
      left: auto;
      right: -4%;
    }

    .corner2:before {
      top: auto;
      bottom: -6%;
    }

    .corner2:after {
      top: auto;
      bottom: -6%;
      left: auto;
      right: -4%;
    }</style>
    </head>
    <body>
    <div class="centrar"></div>
        <div class="campo">
        <div class="corner">
            <div class="corner1"></div>
            <div class="corner2"></div>
        </div>
        <div class="semi1"></div>
        <div class="semi2"></div>
        <div class="divisoria"></div>
        <div class="interior"></div>
        <div class="penalty"></div>
    </div>
    </body>
</html>
温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
http://jiangweishan.com/article/html243sdfsdf.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • 访客

    alert('哈哈')...

  • admin

    可以的...

  • 前端面试题

    你好,可以换一下链接吗?...

  • admin

    关于微信小程序,后面会出一些文章的,请关注网站更新。。。...

  • webred

    博主可以分享点小程序的文章......

  • 访客

    可以用。...

  • admin

    可以的,可以联系下QQ,或者加群。...

  • admin

    可以的,可以联系下QQ,或者加群。...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2013-2018 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.5.2 Zero