博客已迁移至http://lwzhang.github.io

纯CSS实现一个微信logo并不难,难的是怎样用最少的html标签实现。我一直在想怎样用一个标签就能实现,最后还是没想出来,就只好用两个标签了。

首先需要两个标签元素:

    <div class="bg">
<div class="inner"></div>
</div>

先画个背景:

    .bg {
width: 300px;
height: 300px;
background-color: #08c406;
border-radius: 10px;
position: relative;
}

再画个大的椭圆:

    .inner {
width: 180px;
height: 150px;
border-radius: 50%;
background-color: #fff;
position: absolute;
top: 60px;
left: 35px;
}

小的椭圆利用.inner::before伪元素实现:

    &::before {
content: "";
width: 140px;
height: 120px;
border-radius: 50%;
background-color: #fff;
position: absolute;
top: 60px;
left: 90px;
border: 2px solid #08c406;
}

下图时现在的结果:

里面的四个圆怎么画呢?可以利用CSS3的box-shadow属性实现,一般重复性的东西都会用这个属性,因为它可以制造出无数个一模一样的东西出来。

利用.bg::before伪元素实现这些圆:

    &::before {
content: "";
position: absolute;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #08c406;
top: 150px;
left: 155px;
z-index: 2;
box-shadow: 70px 0 #08c406, -70px -50px 0 2px #08c406, 0 -50px 0 2px #08c406;
}

::before本身会实现一个圆(一个小圆),然后利用box-shadow属性实现其它的三个圆。

来看看现在的效果:

现在就剩下两个角了,想想还有哪些东西没用上?还有两个伪元素,分别是.bg::after.inner::after,刚好可以实现两个角。

这两个角其实就是平常的小三角,然后再旋转个45度,CSS实现小三角太常见了:

    .bg::after {
content: "";
border-width: 30px 12px;
border-style: solid;
border-color: #fff transparent transparent transparent;
position: absolute;
top: 182px;
left: 50px;
transform: rotate(45deg);
} .inner::after {
content: "";
border-width: 30px 10px;
border-style: solid;
border-color: #fff transparent transparent transparent;
position: absolute;
top: 155px;
left: 200px;
transform: rotate(-45deg);
}

最终效果:

全部css代码:

    @mixin pos($left, $top) {
position: absolute;
left: $left;
top: $top;
} .bg {
width: 300px;
height: 300px;
background-color: #08c406;
border-radius: 10px;
position: relative; &::before {
@include pos(155px, 150px);
content: "";
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #08c406;
z-index: 2;
box-shadow: 70px 0 #08c406, -70px -50px 0 2px #08c406, 0 -50px 0 2px #08c406;
} &::after {
@include pos(50px, 182px);
content: "";
border-width: 30px 12px;
border-style: solid;
border-color: #fff transparent transparent transparent;
transform: rotate(45deg);
} .inner {
width: 180px;
height: 150px;
border-radius: 50%;
background-color: #fff;
@include pos(35px, 60px); &::before {
@include pos(90px, 60px);
content: "";
width: 140px;
height: 120px;
border-radius: 50%;
background-color: #fff;
border: 2px solid #08c406;
} &::after {
@include pos(200px, 155px);
content: "";
border-width: 30px 10px;
border-style: solid;
border-color: #fff transparent transparent transparent;
transform: rotate(-45deg);
}
}
}

画这个logo最难的地方应该就是实现四个小圆的时候,因为CSS3不太熟的人可能不会想到利用box-shadow去实现。

大家还有其它的方法实现微信logo吗?有没有一个标签就能实现的?欢迎留下你的实现方式。

纯CSS实现一个微信logo,需要几个标签?的更多相关文章

  1. 纯 CSS 创建一个三角形

    [要求]:用纯CSS创建一个三角形的原理是什么? ♪ 答: 把上.左.右三条边隐藏掉(颜色设为 transparent) [实现]: #demo { width: 0; height: 0; bord ...

  2. 3.纯 CSS 创作一个容器厚条纹边框特效

    原文地址:3.纯 CSS 创作一个容器厚条纹边框特效 没有啥好点子呀,不爽 HTML代码: <div class="box"> <div class=" ...

  3. 2.纯 CSS 创作一个矩形旋转 loader 特效

    原文地址:2.纯 CSS 创作一个矩形旋转 loader 特效 扩展后地址:https://scrimba.com/c/cNJVWUR  扩展地址:https://codepen.io/pen/ HT ...

  4. 1.纯 CSS 创作一个按钮文字滑动特效 + 弹幕(残缺)

    原文地址:1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效 扩展后地址:https://scrimba.com/c/cJkzMfd HTML代码: <html> <head& ...

  5. 43.纯 CSS 绘制一个充满动感的 Vue logo

    原文地址:https://segmentfault.com/a/1190000015177284 感想: 又有点回到boder的三角形 HTML code: <div class="v ...

  6. 如何用纯 CSS 绘制一个充满动感的 Vue logo

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/zaqKPx 可交互视频教 ...

  7. 前端每日实战:43# 视频演示如何用纯 CSS 绘制一个充满动感的 Vue logo

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/zaqKPx 可交互视频教程 此视频 ...

  8. 纯 css 打造一个小提示 tooltip

    最后编辑:2019/11/26 前 无意间在寻找资料时候,发现一个不错的小提示,查看源码竟然是纯手工 css 编写(文章底部参考链接). 效果 使用的特性 css2 中的 attr 函数,所以现在(2 ...

  9. 还在为小三角形切图?使用纯CSS写一个简单的三角形

    同学们,当美工给的设计图是这样: 或者这样: 我的内心其实是拒绝的-_-:但工作还得干,大部分同学会写 <style> .icon{width:20px;height:20px;displ ...

随机推荐

  1. POJ1860:Currency Exchange(BF)

    http://poj.org/problem?id=1860 Description Several currency exchange points are working in our city. ...

  2. LeetCode--53 最大连续子序列(总结)

    # 给定一个整数数组 nums ,找到一个具有最大和的连续子数组(子数组最少包含一个元素),返回其最大和. # 示例:# 输入: [-2,1,-3,4,-1,2,1,-5,4],# 输出: 6# 解释 ...

  3. LeetCode--44 通配符匹配

    题目就是说两个字符串,一个含有通配符,去匹配另一个字符串:输出两个字符串是否一致. 注意:’?’表示匹配任意一个字符,’*’表示匹配任意字符0或者多次 首先,我们想到暴力破解.如果从头到尾的破解,到第 ...

  4. list的*运算使用过程中遇到的问题

    目的: 想生成一个[[],[],[]] 这样的列表, 所以就 [[]]*3 这样做了,但是这样做会有问题,这样list中的三个list其实是同一个list. 例如:a=[[]]*3,然后a[0].ap ...

  5. itertools模块(收藏)

    Python的内建模块itertools提供了非常有用的用于操作迭代对象的函数. count().cycle().repeat() 首先,我们看看itertools提供的几个“无限”迭代器: > ...

  6. CSS中 Zoom属性

    CSS中 Zoom属性 其实Zoom属性是IE浏览器的专有属性,Firefox等浏览器不支撑.它可以设置或检索对象的缩放比例.除此之外,它还有其他一些小感化,比如触发ie的hasLayout属性,清除 ...

  7. tfs使用流程

    1.用邮箱注册个微软账号,如zhangsan@outlook.com等邮箱 2.管理员会添加此用户zhangsan@outlook.com 3.打开vs,team-tfs-connect to ser ...

  8. Impala和Hive的关系(详解)

    Impala和Hive的关系  Impala是基于Hive的大数据实时分析查询引擎,直接使用Hive的元数据库Metadata,意味着impala元数据都存储在Hive的metastore中.并且im ...

  9. Solr安装中文分词器IK

    安装环境 jdk1.7 solr-4.10.3.tgz KAnalyzer2012FF_u1.jar tomcat7 VM虚拟机redhat6.5-x64:192.168.1.201 Xshell4 ...

  10. SpringMVC中controller返回图片(转)

    本文转自:http://blog.csdn.net/u011637069/article/details/51112187 SpringMVC中controller通过返回ModelAndView然后 ...