前几天在w3ctech上看到有人用纯css写出了360卫士的logo,感觉蛮好玩的。

因为自己用css以来,还没有写过这种玩意,出于娱乐,我也来试着尝试一下。

开始也不知到怎么下手,最棘手的是那两个像太极的东东不好弄。不过,好在以前用过photoshop绘制过一些简单的icon。所以,经过我仔细

的分析。大概有了思路,这两个东东是可以利用box-shadow这个属性来实现。虽然跟photoshop绘制有点不同,但是大致还是差不多的。

效果图:

代码效果预览地址:http://code.w3ctech.com/detail/2501。

 <div class="container">
<div class="content top"></div>
<div class="content bottom"></div>
<div class="content center">
<div class="line x"></div>
<div class="line y"></div>
</div>
<div class="clip"></div>
<div class="circle circle-top"></div>
<div class="circle circle-bottom"></div>
<div class="react-top"></div>
<div class="react-bottom"></div>
</div>
 * {
padding:;
margin:;
} body {
background-color: #d5d3d4;
} .container {
width: 450px;
height: 450px;
position: relative;
top: 100px;
left: 50%;
transform: translateX(-50%);
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 5px #c2bfbf;
} .content {
width: 300px;
height: 300px;
border-radius: 50%;
position: absolute;
}
.top{
top: 55px;
left: 100px;
box-shadow:0 30px 0 #50dd45;
transform:rotate(50deg);
z-index:;
}
.center{
top: 75px;
left: 75px;
background-color: #e8fc38; }
.bottom{
top: 95px;
left: 50px;
box-shadow:0 -30px 0 #50dd45;
transform:rotate(50deg);
z-index:;
}
.clip{
width:1px;
height:1px;
border:150px solid transparent;
border-left-color:#e8fc38;
border-right-color:#e8fc38;
border-radius:50%;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
z-index:;
}
.line{
background-color:#50dd45;
border-radius:20px;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
z-index:;
}
.x{
width:180px;
height:45px;
}
.y{
width:45px;
height:180px;
}
.circle{
width: 30px;
height: 32px;
border-radius: 50%;
background-color: #50dd45;
z-index:;
}
.circle-bottom{
position: absolute;
top: 302px;
left: 114px;
}
.circle-top{
position:absolute;
top: 111px;
left: 300px;
}
.react-top{
width: 15px;
height: 8px;
background-color: #e8fc38;
transform: rotate(150deg);
position: absolute;
top: 115px;
left: 120px;
z-index:;
}
.react-bottom{
width: 15px;
height: 8px;
background-color: #e8fc38;
transform: rotate(150deg);
position: absolute;
top: 326px;
left: 317px;
z-index:;
}

由于自己比较喜欢用firefox的开发者工具,所以这个只在firefox上测试过。

对于刚在学习css的同学是个不错的小案例,分享给你们,有兴趣的可以试试。当然,如果有更好的思路的,可以在下面留言,相互探讨,一起进步。

纯css实现扁平化360卫士logo demo的更多相关文章

  1. 纯CSS实现扁平化风格开关按钮

    开关样式预览图 前言 最近在基于bootstrap框架开发一个网站,在填写表单一项需要用户填写是否选择某一选项,本来想引用bootstrap框架自带的一个按钮插件,结果在引用js的时候总是出错,就找了 ...

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

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

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

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

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

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

  5. css 纯css自适应页面 示例

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  6. Bootflat – 基于 Bootstrap CSS 框架的扁平化界面

    Bootflat 是一个开源的扁平化的 UI 工具包,基于 Bootstrap 3.1.0 CSS 框架.它为 Web 开发人员提供了一个创建优雅的 Web 应用程序的更快,更容易和更少的重复任务的途 ...

  7. 纯CSS实现一个微信logo,需要几个标签?

    博客已迁移至http://lwzhang.github.io. 纯CSS实现一个微信logo并不难,难的是怎样用最少的html标签实现.我一直在想怎样用一个标签就能实现,最后还是没想出来,就只好用两个 ...

  8. Long Shadows Generate是一款在线使用纯CSS3实现长阴影的效果,一款强大的扁平化长投影制造器。

    Long Shadows Generate是一款在线使用纯CSS3实现长阴影的效果,一款强大的扁平化长投影制造器. Long Shadows Generate 彩蛋爆料直击现场 Long Shadow ...

  9. 怎样做出优秀的扁平化设计风格 PPT 或 Keynote 幻灯片演示文稿?(装)

    不知道你有没有想过,为什么很人多的扁平化 PPT 是这个样子: 或者是这样: 然而,还有一小撮人的扁平化 PPT 却拥有那么高颜值: 为什么会产生这么大的差距呢?丑逼 PPT 应该如何逆袭成为帅逼呢? ...

随机推荐

  1. lintcode:Minimum Subarray 最小子数组

    题目: 最小子数组 给定一个整数数组,找到一个具有最小和的子数组.返回其最小和. 样例 给出数组[1, -1, -2, 1],返回 -3 注意 子数组最少包含一个数字 解题: 和最大子数组 ,差不多的 ...

  2. 【nginx运维基础(5)】Nginx的location攻略

    概述 location 有"定位"的意思, 根据Uri来进行不同的定位. 在虚拟主机的配置中,是必不可少的,location可以把网站的不同部分,定位到不同的处理方式上.伪静态,反 ...

  3. Socket称"套接字"

    Socket又称"套接字",应用程序通常通过"套接字"向网络发出请求或者应答网络请求. 二.利用Socket建立网络连接的步骤 建立Socket连接至少需要一对 ...

  4. 多线程+委托的安全访问(invoke)

    1.声明方法 2.声明委托类型 3.创建委托对象 4.启动线程 5.在线程调用的方法里通过Control的Invoke方法执行委托 public Form1() { InitializeCompone ...

  5. ArcEngine查询、添加、删除要数的方法

    原文地址:http://www.cnblogs.com/caodajieup/archive/2011/11/02/2232658.html 1.查找数据 1).利用FeaturCursor进行空间查 ...

  6. iOS LLDB调试器

    随着Xcode 5的发布,LLDB调试器已经取代了GDB,成为了Xcode工程中默认的调试器.它与LLVM编译器一起,带给我们更丰富的流程控制和数据检测的调试功能.LLDB为Xcode提供了底层调试环 ...

  7. class卸载、热替换和Tomcat的热部署的分析

    一 class的热替换 ClassLoader中重要的方法 loadClassClassLoader.loadClass(...) 是ClassLoader的入口点.当一个类没有指明用什么加载器加载的 ...

  8. android logcat里面AndroidRuntime FATAL EXCEPTION: main这个是什么问题啊。

    android logcat里面AndroidRuntime FATAL EXCEPTION: main这个是什么问题啊. http://zhidao.baidu.com/link?url=mUI11 ...

  9. Classpath entry org.eclipse.m2e.MAVEN2_CLASSPATH_CONTAINER will not be exported

    打开navigator,修改下面的classpath文件: 将<classpathentry kind="con" path="org.maven.ide.ecli ...

  10. apk反编译(8)如何完全防止反编译?

    在android 的应用很难做到完全防止反编译,即使用ProGuard混淆的后,也能得到smali代码,这个语法也很简单,很容易理解. 只能通过增加破解难度和成本,使破解者失去耐心. 其中一个常见解决 ...