html做微信logo,纯CSS实现一个微信logo,需要几个标签?_html/css_WEB-ITnose
博客已迁移至http://lwzhang.github.io。
纯CSS实现一个微信logo并不难,难的是怎样用最少的 html 标签实现。我一直在想怎样用一个标签就能实现,最后还是没想出来,就只好用两个标签了。
首先需要两个标签元素:
先画个背景: .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吗?有没有一个标签就能实现的?欢迎留下你的实现方式。
声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
html做微信logo,纯CSS实现一个微信logo,需要几个标签?_html/css_WEB-ITnose相关推荐
- css做html5logo,用纯css实现的html5 logo标志
一个用css实现的html5 Logo,主要用html和css技术实现,例子如下: css部分代码如下: html, body, div, span, applet, object, iframe, ...
- html怎么让方块自动旋转,如何使用纯CSS实现一个圆环旋转错觉的动画效果(附源码)...
本篇文章给大家带来的内容是关于如何使用纯CSS实现一个圆环旋转错觉的动画效果,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览 源代码下载 https://github.com ...
- 纯css实现一个族谱树
在做前端的时候,发现用到很多树的组件,但大多数的前端框架,都是左右树,并不是上下树,也就是族谱树. 那今天就给大家纯CSS实现一个族谱树. 先看看效果图: 参考代码: <!-- We will ...
- android三角形切图软件,还在为小三角形切图?使用纯CSS写一个简单的三角形
同学们,当美工给的设计图是这样: 或者这样: 我的内心其实是拒绝的-_-:但工作还得干,大部分同学会写 .icon{width:20px;height:20px;display:block;margi ...
- 如何用纯 CSS 创作一个小球上台阶的动画
如何用纯 CSS 创作一个小球上台阶的动画 效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/come ...
- html按钮按下效果_【CSS小分享】纯CSS实现一个水波纹效果按钮
前言 如果大家有用过Material Design风格的UI库,那么一定对水波纹按钮很熟悉,我们这次就是使用纯CSS实现一个最简单的水波纹效果按钮,先上成品: 原理 在按钮中放置一个默认隐藏径向渐变的 ...
- html怎么实现聊天界面设计,纯css制作仿微信聊天页面
纯css制作仿微信聊天页面 *{ margin: 0; padding: 0; } body{ font-size: 14px; } .triangle{ margin: 100px auto ; w ...
- 39.纯 CSS 创作一个表达怀念童年心情的条纹彩虹心特效
39.纯 CSS 创作一个表达怀念童年心情的条纹彩虹心特效 原文地址:https://segmentfault.com/a/1190000015126240 HTML code: <div cl ...
- 28.纯 CSS 绘制一个世界上不存在的彭罗斯三角形
28.纯 CSS 绘制一个世界上不存在的彭罗斯三角形 原文地址:https://segmentfault.com/a/1190000014946883 感想:三个平面图形旋转 HTML代码: < ...
最新文章
- iOS UITextField输入框随键盘弹出界面上移
- 佳铁怎样传输程序_佳铁传输4.0工具下载|佳铁传输4.0软件 4.0 官方最新版
- Twitter是如何做到每秒处理3000张图片的?
- 根据表中的时间戳字段统计每天数据的数量
- C语言指针作为函数返回值
- K8S_Google工作笔记0011---通过二进制方式_部署etcd集群
- k8s 您的连接不是私密连接_直插式声测管是不是承插式?如何连接?
- 详解2进制,10进制,16进制,8进制,36进制
- java如何保证redis设置过期时间的原子性_【07期】Redis中是如何实现分布式锁的?...
- RHEL6.5 部署DNS服务器
- 恩智浦智能车四轮组-- 1.电磁检测方案、运放选型
- visio画任意形状图形
- 软路由:AdGuardHome + OpenWRT 让你家的网络无广告无跟踪
- 2022开放原子全球开源峰会OpenAnolis分论坛圆满落幕
- 说给自己听 -- 三毛
- 从高中缀学到身价过亿,这个80后值得喝彩!
- cdh5.9运行mapreduce uber任务报java.lang.RuntimeException: native snappy library not available错误
- R和Rstudio 下载安装
- C++OpenCV实现抠除(也可用于更换)证件照背景
- 德国研究生分数计算机,申请德国研究生看什么成绩
热门文章
- 网站一键登录推荐哪个平台接口?
- php网站留言,php实现网站留言板功能,php实现留言板_PHP教程
- Centos 7: No Wi-Fi Adapter found(Make sure you have a Wi-Fi adaptter plugged and turned on)
- 上网简笔画图片带颜色,网络怎么画简笔画图片
- Android 集成 Flutter 及通信交互详解
- mysql海豚工具不提示,Navicat使用常见的两个问题及解决方法,提高开发效率
- 简单的音频能量和rmse计算方法
- html照片怎么用作背景音乐,怎么把图片做成视频加字幕加音频 怎么把图片做成视频有背景音乐和文字说明...
- 电脑同时安装了WPS和Office,怎么设置文件的默认打开方式?
- php $db-%3egetall(_PHP PEAR::DB操作, $res-fetchRow(); getone getrow