简单形状设计

最新推荐文章于 2024-09-13 23:28:46 发布

m0_53617569

最新推荐文章于 2024-09-13 23:28:46 发布

阅读量75

点赞数 1

文章标签： css elementui html

本文链接：https://blog.csdn.net/m0_53617569/article/details/121688126

版权

html：

<html>
  <head>
    <title>摆弄形状</title>
    <!-- 我们应该在此<head>标记中链接什么文件? -->
     <link rel="stylesheet" href="./css/style.css">
  </head>
  <body>
    <div id="container">
      <div id="first-row" class="row">
        <div class="square"></div>
        <div class="circle green"></div>
        <div class="square"></div>
        <div class="circle fancy"></div>
        <div class="circle"></div>
      </div>

      <div id="second-row" class="row">
        <div class="circle"></div>
        <div class="square fancy"></div>
        <div class="circle fancy"></div>
        <div class="circle"></div>
        <div class="circle fancy green"></div>
      </div>

      <div id="third-row" class="row">
        <div class="circle"></div>
        <div class="circle green"></div>
        <div class="circle"></div>
        <div class="square fancy"></div>
        <div class="square"></div>
      </div>

      <div id="fourth-row" class="row">
        <div class="square"></div>
        <div class="circle"></div>
        <div class="circle fancy"></div>
        <div class="circle"></div>
        <div class="circle"></div>
      </div>

      <div id="fifth-row" class="row">
        <div class="circle"></div>
        <div class="circle fancy"></div>
        <div class="circle"></div>
        <div class="square"></div>
        <div class="circle green"></div>
      </div>
    </div>
  </body>
</html>

css：

body {
    font-family: "Karla";
    background: #edeae5;
    width: 100%;
    height: 100%;
    position: relative;
    margin: 0px;
    text-align: center;
}

a {
    text-decoration: none;
    color: rgba(0, 0, 0, 0.5);
    font-style: italic;
    transition: 0.4s;
}

a:hover {
    color: rgba(0, 0, 0, 0.7);
}

div {
    transition: linear 0.2s;
}

#container {
    width: 480px;
    height: 480px;
    position: absolute;
    top: calc(50% - 240px);
    left: calc(50% - 240px);
}

.circle {
    width: 60px;
    height: 60px;
    background: white;
    display: inline-block;
    margin-right: 30px;
    border-radius: 50%;
}

.square {
    width: 60px;
    height: 60px;
    background: #e67e22;
    display: inline-block;
    margin-right: 30px;
}

.row {
    margin-bottom: 30px;
}

.green {
    background: #78c272;
}

.fancy {
    border: 3px inset rgba(74, 74, 74, 0.25);
    width: 54px;
    height: 54px;
}

#third-row .circle {
    background: #de6868;
}

.row .circle.fancy {
    border-style: dotte;
}

.row:first-child .circle {
    opacity: 0;
}

.row .green {
    background: #6392c0;
}

.row .fancy {
    background: #6392c0;
}

.row .circle {
    opacity: 0.5;
}

#second-row .circle {
    transform: scale(1.25);
}