安科网

CSS制作图形

切慕溪水

切慕溪水

2019-06-30

关注 关注

气泡三角形

CSS制作图形

<section id="bubbly" class="code-wrap cf">
      <div class="css-live-wrap">
        
        <summary>利用 border 的 transparent 特性实现</summary>
        <hgroup class="bubbly">
          <h1>.bubbly</h1>
        </hgroup>
      </div>
      <style>
        .bubbly {
          position: absolute;
          top:50%;
          left: 50%;
          transform:translate(-50%,-50%);
          background: #00aabb;
          border-radius: .4em;
          width: 260px;
          padding: 60px 20px;
          text-align: center;
          color: white;
          font-size: 200%;
        }
        .bubbly:after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 50%;
          border: 34px solid transparent;
          border-top-color: #00aabb;
          border-bottom: 0;
          border-left: 0;
          margin: 0 0 -34px -17px;
        }
      </style>
    </section>

梯形

CSS制作图形

<section id="trapezoid" class="code-wrap cf">
      <h2>梯形</h2>
      <div class="css-live-wrap">
        
        <summary>利用伪类加旋转透视实现</summary>
        <hgroup class="trapezoid">
          <h1>.trapezoid</h1>
        </hgroup>
      </div>
      <style>
        .trapezoid{
          position: absolute;
          top:50%;
          left: 50%;
          transform:translate(-50%,-50%);
          width: 160px;
          padding: 60px;
          text-align: center;
          color: white;
          font-size: 200%;
        }
        .trapezoid:before{
          content:"";
          position: absolute;
          top: 0; right: 0; bottom: 0; left: 0;
          transform:perspective(40px) scaleY(1.3) rotateX(5deg);
          transform-origin: bottom;
          background:deeppink;
          z-index:-1;
        }
      </style>
    </section>

爱心

CSS制作图形

<div id="heart"></div>
<pre class="brush:css">
#heart {
    position: relative;
    width: 100px;
    height: 90px;
}
#heart:before,
#heart:after {
    position: absolute;
    content: "";
    left: 50px;
    top: 0;
    width: 50px;
    height: 80px;
    background: red;
    -moz-border-radius: 50px 50px 0 0;
    border-radius: 50px 50px 0 0;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
       -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
         -o-transform-origin: 0 100%;
            transform-origin: 0 100%;
}
#heart:after {
    left: 0;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
       -moz-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
         -o-transform-origin: 100% 100%;
            transform-origin :100% 100%;
}

太极图

CSS制作图形

<div id="yin-yang"></div>
<pre class="brush:css">
#yin-yang {
    width: 96px;
    height: 48px;
    background: #eee;
    border-color: red;
    border-style: solid;
    border-width: 2px 2px 50px 2px;
    border-radius: 100%;
    position: relative;
}

#yin-yang:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    background: #eee;
    border: 18px solid red;
    border-radius: 100%;
    width: 12px;
    height: 12px;
}

#yin-yang:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: red;
    border: 18px solid #eee;
    border-radius:100%;
    width: 12px;
    height: 12px;
}

折角

CSS制作图形

<div class="css-live-wrap">
        <div class="star" title="致敬《CSS SECRET》作者，此实例是书中例子"></div>
        
        <summary>利用切角、伪类、渐变、旋转实现</summary>
        <hgroup class="corner">
          <h1>.corner</h1>
        </hgroup>
      </div>
      <style>
        .corner{
          position: absolute;
          top:50%;left: 50%;
          transform:translate(-50%,-50%);
          width: 120px;line-height:120px;
          padding:40px;
          text-align: center;
          color: white;
          font-size: 200%;
          background:linear-gradient(-150deg,transparent 1.5em, yellowgreen  0);
          border-radius:.5em;
        }
        .corner:before{
          content: '';
          position: absolute;
          top: 0; right: 0;
          background:
          linear-gradient(to left bottom,transparent 50%, rgba(0,0,0,.2) 0, rgba(0,0,0,.4)) 100% 0 no-repeat;
          width: 1.73em; height: 3em;
          transform: translateY(-1.3em) rotate(-30deg);
          transform-origin: bottom right;
          border-bottom-left-radius: inherit;
          box-shadow: -.2em .2em .3em -.1em rgba(0,0,0,.15);
        }

      </style>

混合模式背景图

CSS制作图形

<div class="css-live-wrap">
        
        <summary>利用渐变实现</summary>
        <hgroup class="colorful-stripe">
          <h1>.colorful-stripe</h1>
        </hgroup>
      </div>
      <style>
        .colorful-stripe {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 300px;
          line-height: 200px;
          text-align: center;
          color: #fff;
          font-size: 200%;
          border-radius: .5em;
          background:
          linear-gradient(limegreen, transparent), linear-gradient(90deg, skyblue, transparent), linear-gradient(-90deg, coral, transparent);
          background-blend-mode: screen;
        }
      </style>

多云

CSS制作图形

<div class="css-live-wrap">
        
        <summary>利用线性渐变、阴影、缩放实现</summary>
        <hgroup class="cloudy">
          <h1>.cloudy</h1>
        </hgroup>
      </div>
      <style>
        .cloudy{
          position: absolute;
          top: 50%;left: 50%;
          width:200px;height:260px;
          transform: translate(-50%, -50%);
          text-align:center;
          font-size:200%;
          color:#fff;
          background:#2EB5E5;
          border-radius:5px;
        }
        .cloudy:before {
          content: "";
          text-indent:23px;
          font-size:22px;
          line-height:40px;
          color:#333;
          position: absolute;
          height: 50px;width: 50px;
          background: #FFFFFF;
          left:30%;
          top:45%;
          transform: translate(-50%, -50%);
          border-radius: 50%;
          box-shadow:
            #FFFFFF 65px -15px 0 -5px,
            #FFFFFF 25px -25px,
            #FFFFFF 30px 10px,
            #FFFFFF 60px 15px 0 -10px,
            #FFFFFF 85px 5px 0 -5px,
            #C8C8C8 35px -35px,
            #C8C8C8 66px -27px 0 -5px,
            #C8C8C8 91px -10px 0 -8px;
          animation: cloudy 5s ease-in-out infinite;
        }
        .cloudy:after{
          content:"";
          position: absolute;
          top: 80%;left: 50%;
          height: 15px;
          width: 120px;
          background:rgba(0,0,0,.5);
          border-radius: 50%;
          transform: translate(-50%, -50%);
          animation: cloudy_shadow 5s ease-in-out infinite;
        }
      @keyframes cloudy {
        50%{
          transform: translate(-50%, -70%);
        }
        100%{
          transform: translate(-50%, -50%);
        }
      }
      @keyframes cloudy_shadow {
        50%{
          transform: translate(-50%, -50%) scale(0.8);
          background:rgba(0,0,0,.2);
        }
        100%{
          transform: translate(-50%, -50%) scale(1);
            background:rgba(0,0,0,.5);
        }
      }
      </style>

阴影实现多云天气图案

CSS制作图形

<div class="css-live-wrap">
        <summary>多云（cloudy2）（单标签实现）</summary>
        <summary>利用线性渐变、阴影、缩放实现</summary>
        <hgroup class="cloudy2">
          <h1>.cloudy2</h1>
        </hgroup>
      </div>
      <style>
        .cloudy2{
          position: absolute;
          top: 50%;left: 50%;
          width:200px;height:260px;
          transform: translate(-50%, -50%);
          text-align:center;
          font-size:200%;
          color:#fff;
          background:#2EB5E5;
          border-radius:5px;
        }
        .cloudy2:before {
          content: "";
          text-indent:23px;
          font-size:22px;
          line-height:40px;
          color:#333;
          position: absolute;
          height: 50px;width: 50px;
          background: #FFFFFF;
          left:30%;
          top:55%;
          transform: translate(-50%, -50%);
          border-radius: 50%;
          z-index:100;
          box-shadow:
            #FFFFFF 65px -15px 0 -5px,
            #FFFFFF 25px -25px,
            #FFFFFF 30px 10px,
            #FFFFFF 60px 15px 0 -10px,
            #FFFFFF 85px 5px 0 -5px;
          animation: cloudy2 5s ease-in-out infinite;
        }
        .cloudy2:after{
          content:"";
          position: absolute;
          top: 45%;left: 63%;
          height: 60px;
          width: 60px;
          z-index:10;
          background:linear-gradient(180deg,#FE9F38 0%, #F46635 100%);
          border-radius: 50%;
          transform: translate(-50%, -50%);
          box-shadow: 0 0 10px 4px #FFA563;
          animation: cloudy2 10s ease-in-out infinite;
        }
      @keyframes cloudy2 {
        50%{
          transform: translate(-50%, -70%);
        }
        100%{
          transform: translate(-50%, -50%);
        }
      }
      </style>

阴影实现雨天天气图案

CSS制作图形

<div class="css-live-wrap">
        <summary>雨（rainy）</summary>
        <summary>利用线性渐变、阴影、缩放实现</summary>
        <hgroup class="rainy-container">
          <h1>.rainy</h1>
          <div class="rainy"></div>
        </hgroup>
      </div>
      <style>
        .rainy-container {
          position: absolute;
          top: 50%;
          left: 50%;
          width: 200px;
          height: 260px;
          transform: translate(-50%, -50%);
          text-align: center;
          font-size: 200%;
          color: #fff;
          background: #E6E6E6;
          border-radius: 5px;
        }
        .rainy {
          position: absolute;
          width: 3px;
          height: 6px;
          top: 30%;
          left: 50%;
          background: #CCCCCC;
          border-radius: 50%;
          animation: rainy_rain .7s infinite linear;
        }
        .rainy:before {
          content: "";
          color: #333;
          position: absolute;
          height: 50px;
          width: 50px;
          top: 30px;
          left: -40px;
          background: #CCC;
          transform: translate(-50%, -50%);
          border-radius: 50%;
          box-shadow: #CCC 65px -15px 0 -5px, #CCC 25px -25px, #CCC 30px 10px, #CCC 60px 15px 0 -10px, #CCC 85px 5px 0 -5px;
          animation: cloudy 5s ease-in-out infinite;
        }
        .rainy:after {
          content: "";
          position: absolute;
          top: 120px;
          left: 50%;
          height: 15px;
          width: 120px;
          background: rgba(0, 0, 0, .5);
          border-radius: 50%;
          transform: translate(-50%, -50%);
          animation: cloudy_shadow 5s ease-in-out infinite;
        }
        @keyframes cloudy {
          50% {
            transform: translate(-50%, -70%);
          }
          100% {
            transform: translate(-50%, -50%);
          }
        }
        @keyframes cloudy_shadow {
          50% {
            transform: translate(-50%, -50%) scale(0.8);
            background: rgba(0, 0, 0, .2);
          }
          100% {
            transform: translate(-50%, -50%) scale(1);
            background: rgba(0, 0, 0, .5);
          }
        }
        @keyframes rainy_rain {
          0% {
            box-shadow: rgba(0, 0, 0, 0) -10px 30px, rgba(0, 0, 0, 0) 40px 40px, rgba(0, 0, 0, .3) -50px 75px, rgba(0, 0, 0, .3) 55px 50px, rgba(0, 0, 0, .3) -18px 100px, rgba(0, 0, 0, .3) 12px 95px, rgba(0, 0, 0, .3) -31px 45px, rgba(0, 0, 0, .3) 30px 35px;
          }
          25% {
            box-shadow: rgba(0, 0, 0, .3) -10px 45px, rgba(0, 0, 0, .3) 40px 60px, rgba(0, 0, 0, .3) -50px 90px, rgba(0, 0, 0, .3) 55px 65px, rgba(0, 0, 0, 0) -18px 120px, rgba(0, 0, 0, 0) 12px 120px, rgba(0, 0, 0, .3) -31px 70px, rgba(0, 0, 0, .3) 30px 60px;
          }
          26% {
            box-shadow: rgba(0, 0, 0, .3) -10px 45px, rgba(0, 0, 0, .3) 40px 60px, rgba(0, 0, 0, .3) -50px 90px, rgba(0, 0, 0, .3) 55px 65px, rgba(0, 0, 0, 0) -18px 40px, rgba(0, 0, 0, 0) 12px 20px, rgba(0, 0, 0, .3) -31px 70px, rgba(0, 0, 0, .3) 30px 60px;
          }
          50% {
            box-shadow: rgba(0, 0, 0, .3) -10px 70px, rgba(0, 0, 0, .3) 40px 80px, rgba(0, 0, 0, 0) -50px 100px, rgba(0, 0, 0, .3) 55px 80px, rgba(0, 0, 0, .3) -18px 60px, rgba(0, 0, 0, .3) 12px 45px, rgba(0, 0, 0, .3) -31px 95px, rgba(0, 0, 0, .3) 30px 85px;
          }
          51% {
            box-shadow: rgba(0, 0, 0, .3) -10px 70px, rgba(0, 0, 0, .3) 40px 80px, rgba(0, 0, 0, 0) -50px 45px, rgba(0, 0, 0, .3) 55px 80px, rgba(0, 0, 0, .3) -18px 60px, rgba(0, 0, 0, .3) 12px 45px, rgba(0, 0, 0, .3) -31px 95px, rgba(0, 0, 0, .3) 30px 85px;
          }
          75% {
            box-shadow: rgba(0, 0, 0, .3) -10px 95px, rgba(0, 0, 0, .3) 40px 100px, rgba(0, 0, 0, .3) -50px 60px, rgba(0, 0, 0, 0) 55px 95px, rgba(0, 0, 0, .3) -18px 80px, rgba(0, 0, 0, .3) 12px 70px, rgba(0, 0, 0, 0) -31px 120px, rgba(0, 0, 0, 0) 30px 110px;
          }
          76% {
            box-shadow: rgba(0, 0, 0, .3) -10px 95px, rgba(0, 0, 0, .3) 40px 100px, rgba(0, 0, 0, .3) -50px 60px, rgba(0, 0, 0, 0) 55px 35px, rgba(0, 0, 0, .3) -18px 80px, rgba(0, 0, 0, .3) 12px 70px, rgba(0, 0, 0, 0) -31px 25px, rgba(0, 0, 0, 0) 30px 15px;
          }
          100% {
            box-shadow: rgba(0, 0, 0, 0) -10px 120px, rgba(0, 0, 0, 0) 40px 120px, rgba(0, 0, 0, .3) -50px 75px, rgba(0, 0, 0, .3) 55px 50px, rgba(0, 0, 0, .3) -18px 100px, rgba(0, 0, 0, .3) 12px 95px, rgba(0, 0, 0, .3) -31px 45px, rgba(0, 0, 0, .3) 30px 35px;
          }
        }
      </style>

彩虹天气图案

CSS制作图形

<div class="css-live-wrap">
        <summary>彩虹（rainbow）</summary>
        <summary>利用border、box-shadow 实现</summary>
        <hgroup class="rainbow-container">
          <h1>.rainbow</h1>
          <div class="rainbow"></div>
        </hgroup>
      </div>
      <style>
        .rainbow-container{
          position: absolute;
          top: 50%;left: 50%;
          width:200px;height:260px;
          transform: translate(-50%, -50%);
          text-align:center;
          font-size:200%;
          color:#fff;
          background:#F3D166;
          border-radius:5px;
        }
        .rainbow{
          position:absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          height: 1px;width: 1px;
        }
        .rainbow:before{
          content:"";
          position:absolute;
          top: 50%;left: 50%;
          transform: translate(-50%, -50%) rotate(45deg);
          height: 70px;width: 70px;
          border-radius: 100px 0 0 0;
          box-shadow:
            #F44336 -2px -2px 0 1px,
            #FF9800 -4px -4px 0 3px,
            #FFEB3B -6px -6px 0 5px,
            #8BC34A -8px -8px 0 7px,
            #00BCD4 -10px -10px 0 9px,
            #2196F3 -12px -12px 0 11px,
            #9C27B0 -14px -14px 0 13px;
          animation: rainbow 5s ease-in-out infinite;
        }
        .rainbow:after{
          content: "";
          position: absolute;
          top: 70px;
          left: 50%;
          height: 15px;
          width: 120px;
          background: rgba(0, 0, 0, .5);
          border-radius: 50%;
          transform: translate(-50%, -50%);
          animation: cloudy_shadow 5s ease-in-out infinite;
        }
        @keyframes rainbow {
          50% {
            transform: translate(-50%, -55%) rotate(30deg);
          }
          100% {
            transform: translate(-50%, -50%) rotate(45deg);
          }
        }
        @keyframes cloudy_shadow {
          50% {
            transform: translate(-50%, -50%) scale(0.8);
            background: rgba(0, 0, 0, .2);
          }
          100% {
            transform: translate(-50%, -50%) scale(1);
            background: rgba(0, 0, 0, .5);
          }
        }

雪天天气图案

CSS制作图形

<div class="css-live-wrap">
        <summary>雪（snowy）</summary>
        <summary>利用阴影实现</summary>
        <hgroup class="snowy-container">
          <h1>.snowy</h1>
          <div class="snowy"></div>
        </hgroup>
      </div>
      <style>
        .snowy-container {
          position: absolute;
          top: 50%;
          left: 50%;
          width: 200px;
          height: 260px;
          transform: translate(-50%, -50%);
          text-align: center;
          font-size: 200%;
          color: #fff;
          background: #607D8B;
          border-radius: 5px;
        }
        .snowy {
          position: absolute;
          width: 4px;
          height: 4px;
          border-radius:50%;
          top: 30%;
          left: 50%;
          background: #fff;
          border-radius: 50%;
          animation: snowy_rain 2s infinite linear;
        }
        .snowy:before {
          content: "";
          color: #333;
          position: absolute;
          height: 50px;
          width: 50px;
          top: 30px;
          left: -40px;
          background: #eee;
          transform: translate(-50%, -50%);
          border-radius: 50%;
          box-shadow:
            #eee 65px -15px 0 -5px,
            #eee 25px -25px,
            #eee 30px 10px,
            #eee 60px 15px 0 -10px,
            #eee 85px 5px 0 -5px;
          animation: cloudy 5s ease-in-out infinite;
        }
        .snowy:after {
          content: "";
          position: absolute;
          top: 120px;
          left: 50%;
          height: 15px;
          width: 120px;
          background: rgba(0, 0, 0, .5);
          border-radius: 50%;
          transform: translate(-50%, -50%);
          animation: cloudy_shadow 5s ease-in-out infinite;
        }
        @keyframes cloudy {
          50% {
            transform: translate(-50%, -70%);
          }
          100% {
            transform: translate(-50%, -50%);
          }
        }
        @keyframes cloudy_shadow {
          50% {
            transform: translate(-50%, -50%) scale(0.8);
            background: rgba(0, 0, 0, .2);
          }
          100% {
            transform: translate(-50%, -50%) scale(1);
            background: rgba(0, 0, 0, .5);
          }
        }
        @keyframes snowy_rain {
          0% {
            box-shadow:
              rgba(255, 255, 255, 0) -10px 30px,
              rgba(255, 255, 255, 0) 40px 40px,
              rgba(255, 255, 255, .6) -50px 75px,
              rgba(255, 255, 255, .6) 55px 50px,
              rgba(255, 255, 255, .6) -18px 100px,
              rgba(255, 255, 255, .6) 12px 95px,
              rgba(255, 255, 255, .6) -31px 45px,
              rgba(255, 255, 255, .6) 30px 35px;
          }
          25% {
            box-shadow:
              rgba(255, 255, 255, .6) -10px 45px,
              rgba(255, 255, 255, .6) 40px 60px,
              rgba(255, 255, 255, .6) -50px 90px,
              rgba(255, 255, 255, .6) 55px 65px,
              rgba(255, 255, 255, 0) -18px 120px,
              rgba(255, 255, 255, 0) 12px 120px,
              rgba(255, 255, 255, .6) -31px 70px,
              rgba(255, 255, 255, .6) 30px 60px;
          }
          26% {
            box-shadow:
              rgba(255, 255, 255, .6) -10px 45px,
              rgba(255, 255, 255, .6) 40px 60px,
              rgba(255, 255, 255, .6) -50px 90px,
              rgba(255, 255, 255, .6) 55px 65px,
              rgba(255, 255, 255, 0) -18px 40px,
              rgba(255, 255, 255, 0) 12px 20px,
              rgba(255, 255, 255, .6) -31px 70px,
              rgba(255, 255, 255, .6) 30px 60px;
          }
          50% {
            box-shadow:
              rgba(255, 255, 255, .6) -10px 70px,
              rgba(255, 255, 255, .6) 40px 80px,
              rgba(255, 255, 255, 0) -50px 100px,
              rgba(255, 255, 255, .6) 55px 80px,
              rgba(255, 255, 255, .6) -18px 60px,
              rgba(255, 255, 255, .6) 12px 45px,
              rgba(255, 255, 255, .6) -31px 95px,
              rgba(255, 255, 255, .6) 30px 85px;
          }
          51% {
            box-shadow:
              rgba(255, 255, 255, .6) -10px 70px,
              rgba(255, 255, 255, .6) 40px 80px,
              rgba(255, 255, 255, 0) -50px 45px,
              rgba(255, 255, 255, .6) 55px 80px,
              rgba(255, 255, 255, .6) -18px 60px,
              rgba(255, 255, 255, .6) 12px 45px,
              rgba(255, 255, 255, .6) -31px 95px,
              rgba(255, 255, 255, .6) 30px 85px;
          }
          75% {
            box-shadow:
              rgba(255, 255, 255, .6) -10px 95px,
              rgba(255, 255, 255, .6) 40px 100px,
              rgba(255, 255, 255, .6) -50px 60px,
              rgba(255, 255, 255, 0) 55px 95px,
              rgba(255, 255, 255, .6) -18px 80px,
              rgba(255, 255, 255, .6) 12px 70px,
              rgba(255, 255, 255, 0) -31px 120px,
              rgba(255, 255, 255, 0) 30px 110px;
          }
          76% {
            box-shadow:
              rgba(255, 255, 255, .6) -10px 95px,
              rgba(255, 255, 255, .6) 40px 100px,
              rgba(255, 255, 255, .6) -50px 60px,
              rgba(255, 255, 255, 0) 55px 35px,
              rgba(255, 255, 255, .6) -18px 80px,
              rgba(255, 255, 255, .6) 12px 70px,
              rgba(255, 255, 255, 0) -31px 25px,
              rgba(255, 255, 255, 0) 30px 15px;
          }
          100% {
            box-shadow:
              rgba(255, 255, 255, 0) -10px 120px,
              rgba(255, 255, 255, 0) 40px 120px,
              rgba(255, 255, 255, .6) -50px 75px,
              rgba(255, 255, 255, .6) 55px 50px,
              rgba(255, 255, 255, .6) -18px 100px,
              rgba(255, 255, 255, .6) 12px 95px,
              rgba(255, 255, 255, .6) -31px 45px,
              rgba(255, 255, 255, .6) 30px 35px;
          }
        }
      </style>

chrome 浏览器图标

CSS制作图形

<div class="css-live-wrap">
        <summary>Chrome（单标签实现）</summary>
        <summary>利用渐变实现</summary>
        <hgroup class="Chrome">
          <h1></h1>
        </hgroup>
      </div>
      <style>
        .Chrome{
          position: absolute;
          top: 50%;left: 50%;
          width: 180px;height: 180px;
          transform: translate(-50%, -50%);
          box-shadow:0 0px 4px #999,0 0 2px #ddd inset;
          border-radius:50%;
          background-image:
            radial-gradient(#4FACF5 0%,#2196F3 28%, transparent 28%),
            radial-gradient(#fff 33%, transparent 33%),
            linear-gradient(-50deg,#FFEB3B 34%, transparent 34%),
            linear-gradient(60deg,#4CAF50 33%, transparent 33%),
            linear-gradient(180deg,#FF756B 0%, #F44336 30%, transparent 30%),
            linear-gradient(-120deg,#FFEB3B 40%, transparent 40%),
            linear-gradient(-60deg,#FFEB3B 30%, transparent 30%),
            linear-gradient(0deg,#4CAF50 45%, transparent 45%),
            linear-gradient(60deg,#4CAF50 30%, transparent 30%),
            linear-gradient(120deg,#F44336 50%, transparent 50%),
            linear-gradient(180deg,#F44336 30%, transparent 30%);
          background-position:0 0;
        }
      </style>

IE 浏览器图标

CSS制作图形

<div class="css-live-wrap">
        <summary>IE（单标签实现）</summary>
        <summary>利用渐变、多重阴影实现</summary>
        <hgroup class="IE">
          <h1></h1>
        </hgroup>
      </div>
      <style>
        .IE{
          position: absolute;
          top: 50%;left: 50%;
          width:200px; height:200px;
          transform: translate(-50%, -50%);
          border-radius:50%;
          /* box-shadow:1px 2px 1px #ddd; */
          background-image:
             radial-gradient(#fff 38%, transparent 38%),
             radial-gradient(#09C 0%, #09C 100%);

        }
        .IE:before{
          content: "";
          width:285px;
          height:122px;
          background:none;
          border-radius:100%;
          position:absolute;
          top:33px;
          left:-45px;
          margin:auto;
          box-shadow:
            inset 0 12px 0 13px  #09c,
            -35px -8px 0 -5px #fff;
          transform: rotate(-35deg);
        }
        .IE:after {
          content: "";
          width: 120px;
          height: 25px;
          background: #09c;
          position: absolute;
          top: 80px;
          left: 0;
          right: 0;
          margin: auto;
          box-shadow: 50px 23px 0 -2px #fff
        }
      </style>

safari 浏览器图标

CSS制作图形

<div class="css-live-wrap">
        <summary>safari（单标签实现）</summary>
        <summary>利用渐变、border、旋转实现</summary>
        <hgroup class="safari">
          <h1></h1>
        </hgroup>
      </div>
      <style>
        .safari{
          position: absolute;
          top: 50%;left: 50%;
          width:200px; height:200px;
          transform: translate(-50%, -50%);
          border-radius:50%;
          border:5px solid #E8E8E8;
          box-shadow:
            -1px 3px 1px 2px #999,
            -1px 3px 1px 2px #999 inset;
          background-image:
            radial-gradient(transparent 30%,#fff 30%,#fff 34%, transparent 34%),
            linear-gradient(rgba(255,255,255,.8) 100%, transparent 100%),
            linear-gradient(rgba(255,255,255,.8) 100%, transparent 100%),
            linear-gradient(rgba(255,255,255,.8) 100%, transparent 100%),
            linear-gradient(rgba(255,255,255,.8) 100%, transparent 100%),
            linear-gradient(#1DE3FF 0%, #1F52EF 100%);
          background-size: 50% 50%,20px 2px,20px 2px,2px 20px,2px 20px,100%,100%;
          background-repeat:no-repeat;
          background-position:center center, 175px center,5px center,center 175px,center 5px,0 0;

        }
        .safari::before{
          content:"";
          position: absolute;
          top: 10px;left: 50%;
          border-radius:10px;
          /* width:20px; height:80px; */
          border-bottom:100px solid rgba(255,255,255,.9);
          border-left:10px solid transparent;
          border-right:10px solid transparent;
          transform-origin:center 90px;
          z-index:-1;
          transform:translate(-50%, 0%) rotate(40deg);
        }
        .safari::after{
          content:"";
          position: absolute;
          top: 10px;left: 50%;
          border-radius:10px;
          /* width:20px; height:80px; */
          border-bottom:100px solid rgba(255,0,0,.9);
          border-left:10px solid transparent;
          border-right:10px solid transparent;
          transform-origin:center 90px;
          transform:translate(-50%, 0%) rotate(220deg);
        }
        .safari:hover::before{
            transition:transform 1s;
            transform:translate(-50%, 0%) rotate(70deg);
        }
        .safari:hover::after{
            transition:transform 1s;
            transform:translate(-50%, 0%) rotate(250deg);
        }
      </style>

css absolute

切慕溪水

切慕溪水

0 关注 0 粉丝 0 动态

关注 关注

相关推荐

分享一个纯CSS写的钟表式计时器

width: 400px;height: 400px;border-radius: 50%;border: 3px solid black;margin: 200px auto;position: relative;width: 3px;height: 4

lanzhusiyu 2020-07-18

纯CSS实现密室逃脱游戏

“密室逃脱”这个词想必大家并不陌生，在以前的flash时代，这是一类很经典的益智游戏之一。玩家常常会被困在一间密室中，而过关的目的就是想法设法逃出这件密室。接下来，笔者要用纯CSS实现一款类似的密室逃脱类游戏。是的，你没听错，纯CSS，也就意味着完全没有J

qiupu 2020-11-04

一篇文章带你了解CSS对齐方式

将块元素水平居中对齐 , 使用 margin: auto;设置元素的宽度将阻止它伸展到容器的边缘。将元素内部的文本居中, 使用text-align: center;对齐元素的一种方法是使用 position: absolute;在我年轻而脆弱的岁月里，父亲

多读书读好书 2020-11-03

Node Sass 弃用，以 Dart Sass 代替

就在今天，Sass 官方团队正式宣布 Libsass 将弃用，以及基于它的 Node Sass 和 SassC，并且建议用户使用 Dart Sass。读完本文以下问题将会得到解答。那么为什么会有这次改动呢?之后 Node Sass 还维护吗?Dart S

RedCode 2020-10-28

CSS元素选择器是怎样运作的？

在前端工程师的日常工作中，使用 CSS 元素选择器是稀松平常的事；无论你是编写一般的 CSS 还是需要经过编译的 SASS，SCSS，LESS等，最终都被编译成一行一行的 CSS 样式属性，最终交给浏览器解析并套用。但是你想过没有这是如何实现的呢?CSS

jiedinghui 2020-10-25

CSS(Cascading Style Sheets)样式更改——过渡、动画

元素从一种样式逐渐改变为另一种的样式。cubic-bezier在cubic-bezie函数中定义自己的值，可能的值是0至1之间的数值

Ladyseven 2020-10-22

多个你不知道的 CSS 居中方案！

要使内联元素居中，使用 text-align: center 足够了。对于多个内联的项目，也可以正常工作。使用网格容器时，图中的盘子将根据其网格区域居中。请注意，除非将它们包裹在一个元素中，否则这将不适用于多个盘子。宽度和高度已知的块元素可以通过设置mar

hellowzm 2020-10-12

540 CSS3属性对层叠上下文的影响

-- 案例二分解:opacity -->

impress 2020-10-07

如何在Shadow DOM/Web组件中覆盖CSS

Web组件的主要目的之一是提供封装——能够隐藏HTML标记结构和CSS样式，并与页面上的其他代码分离，这样不同的部分就不会冲突，通过这种方式，这样代码就可以保持漂亮和干净。影子DOM为我们提供了范围限定的样式封装，并提供了一种让我们随意选择进入外界的方法。

zuncle 2020-09-28

超越媒体查询：使用更新的HTML和CSS功能进行响应式设计

在本文中，我们将探讨许多可用的工具，从响应图像到相对较新的CSS函数，无论我们是否使用媒体查询，它们都可以正常工作。事实上，媒体查询与这些功能一起使用时，更多的是成为一种补充，而不是完整的方法。让我们来看看是如何运作的。图像可能会变形到失去焦点的程度。较小

Ladyseven 2020-09-11

5个好用的 CSS 函数

CSS 包含了许多函数，而且它能够完成许多早期需要用 JavaScript才能完成的事情。每年都有新的特性被添加进来，这让我们的开发更加轻松，也减少了对JavaScript的依赖。CSS 函数是它所具有的最强大的特性之一，在本文中，我将介绍一些我认为有

jiedinghui 2020-09-07

使用这些不太常用的 CSS 属性，让我在前端布局效率上，又提高了一个层次！

有很多CSS属性，有些人不了解，或者他们了解它们，但是忘记在需要时使用它们。其实，有时候我们用 JavaScript 来实某些交互，CSS 一个属性就能搞定了，这可以大大节约我们编码的时间。作为前端开发人员，我们经常会遇到这样的事情。所以我问自己，为什么

xiaohuli 2020-09-02

16个非常有用的CSS伪选择器，你千万不要错过了！

熟悉所有的 CSS 是实现这个目标的一种方法 —— 另一种是实施最佳实践和尽可能的减少代码。这个伪元素选择器选择换行之前文本的首行。这个伪元素选择器应用于元素中文本的首字母。应用于任何被用户选中的高亮区域。在 HTML 中，为 HTML 元素。这个规则将应

葉無聞 2020-09-01

总结一些，我在书写 CSS 的时候，经常犯的错误！

当我们非常专注写代码时候，我们往往会无意识的写出一些无效CSS代码。我把这种称为 “潜意识错误”。不过，这些错误都比较好解决，不需要花很多时间，只要纠正一下就行了。跟着本文看看，我会经常写哪些有趣的 CSS 错误。/*现这一点并不容易，你们看出错误在哪里吗

impress 2020-08-26

一个思路，如何尝试创建自己的CSS框架？

在2019年，我创建了一个CSS框架并将其命名为Rotala.css[1]。经过一些重构和修改，我终于在2020年发布了“玩具”框架。但它仍在原型设计中，因为我认为我的解决方案还不优雅。我构建此框架的原因很简单：我自己想要一个CSS框架。最初，我开始使用

ThikHome 2020-08-24

前端开发CSS清除浮动的方法有哪些？

在前端开发过程中，非IE浏览器下，当容器的高度自动，并且容器内容中有浮动元素，此时如果容器的高度不能自适应内容的高度，从而使得内容溢出破坏整体布局，这种现象叫做浮动溢出，为了方式这个现象的发生，就需要对CSS样式进行处理，而这个过程就叫做CSS清除浮动。现

nicepainkiller 2020-08-20

多终端同步工具browsersync安装使用

2：进入项目目录 window可以进到目标目录，shift+右键，在此处打开命令窗口 也可以cmd里面切换进入

aSuncat 2020-08-19

CSS知识点（三）

text-align:center:内容水平居中，可以让行内元素和行内块元素水平居中，不可以让块状元素居中。则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者?,这种现象被称为相邻块元素垂直外边距的合并。确定页

hellowzm 2020-08-18

css浮动

2、为什么要清除浮动？

aSuncat 2020-08-18

HTML&amp;CSS 案例

案例 1：旅游网站首页。确定使用table来完成布局。如果某一行只有一个单元格，则使用<tr><td></td></tr>

zengni 2020-08-17
切慕溪水

切慕溪水

W3CSchool教程
HTML 教程
CSS 教程
Bootstrap 教程
Javascript 教程
jQuery 教程
后端教程
C 教程
Java 教程
PHP 教程
Python 教程
Go 教程
移动开发
Android 教程
Swift 教程
Kotlin 教程
jQuery Mobile 教程
ionic 教程
关于我们
新闻动态
联系方式
招聘英才
安科实验室
帮助与反馈

安科网(Ancii)，中国第一极客网

Copyright © 2013 - 2019 Ancii.com

京ICP备18063983号 京公网安备11010802014868号