用css3写遨游的logo

实现方法：

先画一个外框 width: 240px; height: 240px;border-radius: 120px;
填充背景色background:#b1e4ff;
描边border:2px solid #789cb6;
加阴影box-shadow: 5px 5px 7px #999;
给该死的firefox3私有属性-moz-border-radius: 120px;
再画一个小圈，width: 230px; height: 230px;border-radius: 115px;
定位，position: relative;top:5px;left:5px;
填充背景色background:#3b99e3;
给该死的firefox3私有属性-moz-border-radius: 115px;
扔一个大白方块进去width: 150px; height: 100px;background:#ffffff;
定位position: relative;top:70px;left:42px;
右上大圆角20像素，其他小圆角border-radius: 3px 20px 3px 3px;
给该死的firefox3私有属性-moz-border-radius: 3px 20px 3px 3px;
再扔一个白方块进去width: 35px; height: 45px;background:#ffffff;
定位position: relative;top:30px;left:33px;
粗一点的蓝色描边border:25px solid #3b99e3;

最终效果图如下：

转载于:https://www.cnblogs.com/jcomet/archive/2012/02/22/2363909.html

用css3写遨游的logo相关推荐

20个纯css3写的logo
2019独角兽企业重金招聘Python工程师标准>>> 随着对css3了解得越深入,越来越发现了css3的强大.css3不但能完成一些基本的特效如圆角阴影等,还能借助动画技术实现一些 ...
【附全部代码+图片】使用HTML5+CSS3绘制HTML5的logo——Web前端系列学习笔记
文章目录页面展示技术要点代码实现 html代码 CSS代码用到的图片页面展示本项目将使用HTML5+CSS3绘制出HTML5的logo,页面效果如下所示. 技术要点 HTML5新特性 HT ...
纯CSS3写的10个不同的酷炫图片遮罩层效果
这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下在线预览下载地址实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...
纯CSS3写的10个不同的酷炫图片遮罩层效果【转】
这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下在线预览下载地址实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...
用html+css3写一个小丸子的头像
启发是看到一篇博客用css3写的一个叮当猫http://www.cnblogs.com/jr1993/p/4448025.html,于是自己就想写个小丸子了. <!DOCTYPE html> ...
用Html标签和CSS3写的一个手机
手机外形上来说就是长方形,然后加上圆角边框,如果是简单的平面图形,几分钟就可以用html标签和css写一个手机模型.但如果有高光,菱角等让手机展示的更逼真,可以用到css背景渐变属性. 预览页面:CS ...
1.animation 判断动画结束，结束后执行另一事件；2.用css3写竖条纹背景
1.用css3的animation完成一个动画,并监听动画结束后才执行另一个事的实现方法: 动画结束时有一个webkitAnimationEnd事件,只要监听这个事件就可以 2.用css3写带透明色的 ...
用CSS3写一个旋转轮播图
用CSS3写一个旋转轮播图今天用css3写一个不一样的轮播图3D效果. 先看下最后效果吧 1.旋转轮播图结构制作 // html <body><section><div ...
用css3实现的Android Logo
用纯css3无js实现的Android Logo,带有简单的动画,主要运用css3的transform,transition 源代码下载地址:http://download.csdn.net/my ...

用css3写遨游的logo

用css3写遨游的logo相关推荐

最新文章

热门文章