• 设为首页
  • 加入收藏
  • 我要投稿
  • 联系站长
  • 网站模板技术交流
当前位置:模板网首页 > 建站教程 > Div+Css >  用css画一个QQ浏览器图正文

用css画一个QQ浏览器图标

作者:网页模板
类型:图文教程
点击次数:
发布时间:2019-06-11 14:31
分享到:
这次画的是QQ浏览器图标,比较复杂,各种高光渐变色内阴影等。其实,CSS画画就和用PS画画一样,从最底层,一层一层往上画,最后合成一张图:



1、让容器居中,同时将body背景变成灰色,可以看得更清楚:
html,body{
 height:100%;
}
body{
 display: flex;
 justify-content: center;
 align-items: center;
 background-color: #eee;
}
2、画一个蓝色渐变圆形,作为外边的蓝色环(现在还是圆,不是环),相对定位,这样里面的所有元素都可以以它为定位点了:
.logo{
 width: 300px;
 height:300px;
 background: linear-gradient(to right bottom,#66adff,#1a6adb);
 border-radius: 999px;
 position: relative;
}
<div class="logo"></div>
效果图:



3、给 logo 的 after 上个灰色,做出镂空效果:
.logo:after{
 position: absolute;
 width: 150px;
 height: 150px;
 content:'';
 background-color: #eee;
 border-radius: 999px;
 z-index: 15;
 left: 50%;
 top:50%;
 margin-left: -75px;
 margin-top:-75px;
}
效果图:



4、给 logo 的 before 加上渐变背景,渐变色和 logo 一样,只不过颜色反过来,这样有凹陷的感觉,同时将它治愈 after 的下面,比 after 稍微大点:
.logo:before{
 position: absolute;
 width: 166px;
 height: 166px;
 content:'';
 background: linear-gradient(to right bottom,#1a6adb,#66adff);
 border-radius: 999px;
 z-index: 9;
 left: 50%;
 top:50%;
 margin-left: -83px;
 margin-top:-83px;
}
效果图:



5、由于边框不支持渐变,我们只能接着加div,来画出刚才的 before 的高光:
.before-high-light{
 position: absolute;
 width: 168px;
 height: 168px;
 content:'';
 background: linear-gradient(to right bottom,#96d9ff,#5cafff,#96d9ff);
 border-radius: 999px;
 z-index: 8;
 left: 50%;
 top:50%;
 margin-left: -84px;
 margin-top:-84px;
}
<div class="logo">
 <div class="before-high-light"></div>
</div>
效果图:



6、画左上角的大片高光,它是被遮挡在中间圆的下面,所以,z-index要更低,同时它的颜色是从半透明的白色到无,大小要比 logo 小个一两像素:
.left-top-high-light{
 position: absolute;
 width: 298px;
 height: 298px;
 content:'';
 background: linear-gradient(to right bottom,rgba(255,255,255,.8),rgba(255,255,255,0) 50%);
 border-radius: 999px;
 z-index: 7;
 left: 50%;
 top:50%;
 margin-left: -149px;
 margin-top:-149px;
}
<div class="logo">
 <div class="before-high-light"></div>
 <div class="left-top-high-light"></div>
</div>
效果图:



7、画云,一共三朵,放在右下角,白色背景,利用内阴影,给云上色(放在chrome调整,这块比较麻烦,需要细细调),由于css容器样式的局限性,不能让云成为一个整体,建议这类可以考虑用svg或者canvas实现,我这里还是用div来实现:
.clouds{
 position: absolute;
 width: 90px;
 height: 90px;
 background-color: #fff;
 border-radius: 999px;
 z-index: 16;
 bottom: 20px;
 right:60px;
 box-shadow: -3px 15px 12px 0 rgba(42,127,236,.3) inset;
}
.clouds:before{
 content:'';
 position: absolute;
 width: 100px;
 height: 70px;
 background-color: #fff;
 border-radius: 999px;
 bottom: -20px;
 left:-30px;
 box-shadow: 5px -5px 8px 0 rgba(42,127,236,.3) inset;
}
.clouds:after{
 content:'';
 position: absolute;
 width: 123px;
 height: 60px;
 background-color: #fff;
 border-radius: 0 999px 999px 0;
 bottom: -20px;
 right:-30px;
 box-shadow: -16px -9px 11px 0 rgba(42,127,236,.3) inset;
}
<div class="logo">
 <div class="before-high-light"></div>
 <div class="left-top-high-light"></div>
 <div class="clouds"></div>
</div>
效果图:



8、左下角,云之下的高光,这个高光容器,宽高为 logo 的一半,左下角为全圆角,其他三个角可以不设置圆角,z-index 置于前面所有内容的下面,logo 的上面,背景为从左上到右下,从无到有的白色渐变,如果觉得太生硬,可以稍微给点羽化:
.left-bottom-high-light{
 position: absolute;
 width: 150px;
 height: 150px;
 content:'';
 background: linear-gradient(to right bottom,rgba(255,255,255,0) 50%,rgba(255,255,255,1) 70%);
 border-radius:0 0 0 999px;
 z-index: 14;
 left:0;
 bottom:0;
 filter: blur(1px);
}
<div class="logo">
 <div class="before-high-light"></div>
 <div class="left-top-high-light"></div>
 <div class="clouds"></div>
 <div class="left-bottom-high-light"></div>
</div>
效果图:



9、底部阴影 shadow,可以用背景色+羽化来实现,也可以用 box-shadow 来实现,这里我们用第一种方法:
.shadow{
 position: absolute;
 width:200px;
 height:10px;
 content:'';
 background:#666;
 border-radius:50%;
 z-index: 1;
 left: 50%;
 bottom:-3px;
 margin-left: -100px;
 filter: blur(4px);
}
<div class="logo">
 <div class="before-high-light"></div>
 <div class="left-top-high-light"></div>
 <div class="clouds"></div>
 <div class="left-bottom-high-light"></div>
 <div class="shadow"></div>
</div>
效果图:



10、顶部高光 high-light,实现方法和上面的阴影一样:
.high-light{
 position: absolute;
 width:100px;
 height:20px;
 content:'';
 background:rgba(255,255,255,.9);
 border-radius:50%;
 z-index: 15;
 left: -8px;
 top: 33px;
 filter: blur(4px);
 transform: rotate(-45deg);
}
<div class="logo">
 <div class="before-high-light"></div>
 <div class="left-top-high-light"></div>
 <div class="clouds"></div>
 <div class="left-bottom-high-light"></div>
 <div class="shadow"></div>
 <div class="high-light"></div>
</div>
最终效果图:



(责任编辑:网页模板)
  • 本文标签:
  • 用,css,画,一个,浏览器,图标,这次,画的,是,
CSS解决前端图片变形问题总结
CSS手机下0.5px实现