zoukankan      html  css  js  c++  java
  • CSS属性绘制图形(一)

    div部分:

    <div class="react-logo">
     <div class="reactive"></div>
    </div>

    CSS代码:

    html, body{
        width: 100%;
        height: 100%;
        min-height: 100%;
        font-family: 'Gloria Hallelujah', cursive;
        font-size: 100%;
        background-color: #222;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .react-logo{
      width: 500px;
      height: 160px;
      position: relative;
      border: 15px solid #fff;
      border-radius: 50%;
        box-shadow: #00d8ff 0px 0px 44px 0px;
    }
    .react-logo:before{
      content: "";
      width: 500px;
      height: 160px;
      position: absolute;
      border: 15px solid #aaa;
      border-radius: 50%;
      transform: rotate(125deg);
      top: -25px;
      left: -18px;
        box-shadow: #00d8ff 0px 0px 44px 0px;
    }
    .react-logo:after{
      content: "";
      width: 500px;
      height: 160px;
      position: absolute;
      border: 15px solid #00d8ff;
      border-radius: 50%;
      transform: rotate(-125deg);
      top: -25px;
      left: -18px;
        box-shadow: #00d8ff 0px 0px 44px 0px;
    }
    .reactive{
      width: 100px;
      height: 100px;
      float: left;
      background-color: #aaf;
      border-radius: 50%;
      margin-left: calc(50% - 50px);
      margin-top: 30px;
        box-shadow: #00d8ff 0px 0px 44px 0px;
    }

     最终效果:

  • 相关阅读:
    robots协议
    Java Script学习 4(转)
    Java Script学习 3(转)
    HTML 8 总结(转)
    HTML 7 (转)
    HTML 6 (转)
    HTML 5 (转)
    python类方法/实例方法/静态方法
    chromedriver下载地址
    字符编码表
  • 原文地址:https://www.cnblogs.com/AndroidJotting/p/6479314.html
Copyright © 2011-2022 走看看