CSS绘画图形

最新推荐文章于 2022-05-25 19:07:11 发布

东方雨林_Lin

最新推荐文章于 2022-05-25 19:07:11 发布

阅读量1.2k

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qq_24811915/article/details/81075081

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本案例使用CSS绘画了一个放大镜的图案。

预览演示地址：https://tympanus.net/codrops-playground/SaraSoueidan/kFTn9yJk/editor
将下面的代码复制到演示地址对应位置即可查看效果。

<!-- HTML部分：-->
<div class="container">
  <div class="element"></div>
</div>

/* CSS部分： */
body {
  background-color: #F5F5F5;
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.container {
  margin: 40px auto;
  max-width: 700px;
}
.element {
  width:0;
  height:0;
  border:50px solid #009966;
  border-radius:50%;
 /* background-color: #009966;*/
  opacity: .8;
  position: relative;
  margin: 100px auto;
}

.element:after {
  position: absolute;
  content: "";
  display: block;
  height:50px;
    border:7px solid #009966;;
  border-radius:5px;;
  top:22px;
  left:42px;
 background-color: #009966;
  /* opacity: .8; */
 -webkit-transform: rotateZ(-45deg);
  transform:rotateZ(-45deg);
}
.element:before {
  position: absolute;
  content: "";
  display: block;
    border:40px solid rgba(255, 255, 255, 1);
  border-radius:50%;
  top:-40px;
  left:-40px;
 background-color: #009966;
  /* opacity: .8; */
 -webkit-transform: rotateZ(90deg);
  transform: rotateZ(90deg);
}