最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
问答文章1 问答文章501 问答文章1001 问答文章1501 问答文章2001 问答文章2501 问答文章3001 问答文章3501 问答文章4001 问答文章4501 问答文章5001 问答文章5501 问答文章6001 问答文章6501 问答文章7001 问答文章7501 问答文章8001 问答文章8501 问答文章9001 问答文章9501
当前位置: 首页 - 科技 - 知识百科 - 正文

纯css实现扁平化360卫士logodemo_html/css

来源:懂视网 责编:小采 时间:2020-11-27 16:19:19
文档

纯css实现扁平化360卫士logodemo_html/css

纯css实现扁平化360卫士logodemo_html/css_WEB-ITnose:前几天在w3ctech上看到有人用纯css写出了360卫士的logo,感觉蛮好玩的。 因为自己用css以来,还没有写过这种玩意,出于娱乐,我也来试着尝试一下。 开始也不知到怎么下手,最棘手的是那两个像太极的东东不好弄。不过,好在以前用过photoshop绘制
推荐度:
导读纯css实现扁平化360卫士logodemo_html/css_WEB-ITnose:前几天在w3ctech上看到有人用纯css写出了360卫士的logo,感觉蛮好玩的。 因为自己用css以来,还没有写过这种玩意,出于娱乐,我也来试着尝试一下。 开始也不知到怎么下手,最棘手的是那两个像太极的东东不好弄。不过,好在以前用过photoshop绘制

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

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

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

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

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

 1 2 3 4 5 6 7 8 9 10 11 12 13 

在html代码部分,其实是有赘余的。像react-top 和 react-bottom这两个部分是可以不用的。由于自己没有通过比例计算。所以,

只好用这两个东东打补丁了。

 1 * { 2 padding: 0; 3 margin: 0; 4 } 5 6 body { 7 background-color: #d5d3d4; 8 } 9 10 .container { 11 width: 450px; 12 height: 450px; 13 position: relative; 14 top: 100px; 15 left: 50%; 16 transform: translateX(-50%); 17 background-color: #fff; 18 border-radius: 10px; 19 box-shadow: 0 0 5px #c2bfbf; 20 } 21 22 .content { 23 width: 300px; 24 height: 300px; 25 border-radius: 50%; 26 position: absolute; 27 } 28 .top{ 29 top: 55px; 30 left: 100px; 31 box-shadow:0 30px 0 #50dd45; 32 transform:rotate(50deg); 33 z-index:1000; 34 } 35 .center{ 36 top: 75px; 37 left: 75px; 38 background-color: #e8fc38; 39 40 } 41 .bottom{ 42 top: 95px; 43 left: 50px; 44 box-shadow:0 -30px 0 #50dd45; 45 transform:rotate(50deg); 46 z-index:1000; 47 } 48 .clip{ 49 width:1px; 50 height:1px; 51 border:150px solid transparent; 52 border-left-color:#e8fc38; 53 border-right-color:#e8fc38; 54 border-radius:50%; 55 position:absolute; 56 top:50%; 57 left:50%; 58 transform:translate(-50%,-50%); 59 z-index:1001; 60 } 61 .line{ 62 background-color:#50dd45; 63 border-radius:20px; 64 position:absolute; 65 top:50%; 66 left:50%; 67 transform:translate(-50%,-50%); 68 z-index:1010; 69 } 70 .x{ 71 width:180px; 72 height:45px; 73 } 74 .y{ 75 width:45px; 76 height:180px; 77 } 78 .circle{ 79 width: 30px; 80 height: 32px; 81 border-radius: 50%; 82 background-color: #50dd45; 83 z-index: 1012; 84 } 85 .circle-bottom{ 86 position: absolute; 87 top: 302px; 88 left: 114px; 89 } 90 .circle-top{ 91 position:absolute; 92 top: 111px; 93 left: 300px; 94 } 95 .react-top{ 96 width: 15px; 97 height: 8px; 98 background-color: #e8fc38; 99 transform: rotate(150deg);100 position: absolute;101 top: 115px;102 left: 120px;103 z-index: 1100;104 }105 .react-bottom{106 width: 15px;107 height: 8px;108 background-color: #e8fc38;109 transform: rotate(150deg);110 position: absolute;111 top: 326px;112 left: 317px;113 z-index: 1100;114 }

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

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

声明:本网页内容旨在传播知识,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

文档

纯css实现扁平化360卫士logodemo_html/css

纯css实现扁平化360卫士logodemo_html/css_WEB-ITnose:前几天在w3ctech上看到有人用纯css写出了360卫士的logo,感觉蛮好玩的。 因为自己用css以来,还没有写过这种玩意,出于娱乐,我也来试着尝试一下。 开始也不知到怎么下手,最棘手的是那两个像太极的东东不好弄。不过,好在以前用过photoshop绘制
推荐度:
标签: logo html css
  • 热门焦点
专题
Top

抖音扫码关注

手机端二维码

每天分享百科知识!