html – 用css3创建一个标志

发布时间：2020-12-14 18:50:54 所属栏目：资源来源：网络整理

导读：我想用这样一个css创建一个Vodafone标志：我知道有些人可以用css画任何东西.我不知道如何使泪滴形状.这就是我现在所说的： http://jsfiddle.net/n3w7y/ 任何人都可以给我任何想法如何创造这种不寻常的形状？ #logoMain { width: 100px; height: 100px; back

我想用这样一个css创建一个Vodafone标志：

我知道有些人可以用css画任何东西.我不知道如何使泪滴形状.这就是我现在所说的：

http://jsfiddle.net/n3w7y/

任何人都可以给我任何想法如何创造这种不寻常的形状？

#logoMain {
    width: 100px;
    height: 100px;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 50%;
    box-shadow: 0px 0px 50px 0px #999 inset ;
    position: relative;
}

#logoMainafter {
  width: 100px;
  height: 100px;
  margin-top: -35px;
  margin-left: 55px;
  display: block;
  border-radius: 50%;
  background: -webkit-radial-gradient(50% 50%,circle cover,rgba(255,255,1),1) 12%,0) 24%);
  -webkit-transform: translateX(-80px) translateY(-90px) skewX(-20deg);
  -webkit-filter: blur(10px);
}

#logoInside {
    width: 50px;
    height: 50px;
    margin: 24px;
    background-color: #fe0000;
    border: 1px solid red;
    border-radius: 50%;
    box-shadow: 0px 0px 15px 3px #a80000 inset;
}

解决方法

那么,因为有人在回答,你有一个草案开始

CSS

#logoMain {
    width: 100px;
    height: 100px;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 50%;
    box-shadow: 0px 0px 50px 0px #999 inset ;
    position: relative;
}

#logoMainafter {
  width: 100px;
  height: 100px;
  margin-top: -35px;
  margin-left: 55px;
  display: block;
  border-radius: 50%;
  background: -webkit-radial-gradient(50% 50%,0) 24%);
  -webkit-transform: translateX(-80px) translateY(-90px) skewX(-20deg);
  -webkit-filter: blur(10px);
}

#logoInside {
    width: 50px;
    height: 50px;
    margin: 24px;
    background-color: #fe0000;
    border: 1px solid red;
    border-radius: 50%;
    box-shadow: 0px 0px 15px 3px #a80000 inset;
    z-index: 23;
    position: absolute;
}

#logoMain:after {
    content: "";
    width: 50px;
    height: 50px;
    position: absolute;
    top: 2px;
    left: 57px;
    /* background-color: green; */
    border-radius: 50%;
    box-shadow: -19px 17px 0px 14px #e80000;
    clip: rect(0px,12px,63px,-110px);
    z-index: 0;
}

fiddle

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!