纯CSS代码绘制小米LOGO

小米LOGO，用CSS绘制。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>小米LOGO</title><style>.icon-mi {display: flex;align-items: center;justify-content: center;width: 55px;height: 55px;background: rgb(255,103,0);}.mi{position: relative;width: 13px;height: 16px;transform: translateX(-0.3em);border: 5px solid #FFF;border-bottom: none;border-radius: 0 7px 0 0;}.mi::after{position: absolute;content: "";width: 5px;height: 21px;right: -13px;top:-5px;background-color: #FFF;}.mi::before{position: absolute;content: "";width: 5px;height: 12px;left: 4px;bottom:0;background-color: #FFF;}</style></head><body><a href="https://www.mi.com/" class="icon-mi"> <div class="mi"></div> </a></body>
</html>

纯CSS代码绘制小米LOGO相关推荐

html做微信logo,纯CSS实现一个微信logo，需要几个标签？_html/css_WEB-ITnose
博客已迁移至http://lwzhang.github.io. 纯CSS实现一个微信logo并不难,难的是怎样用最少的 html 标签实现.我一直在想怎样用一个标签就能实现,最后还是没想出来,就只好用 ...
三角形css_纯 CSS 实现绘制各种三角形（各种角度）
转载至:纯 CSS 实现绘制各种三角形(各种角度) 一.前言三角形实现原理:宽度width为0:height为0:(1)有一条横竖边(上下左右)的设置为border-方向:长度 solid red, ...
[css] 使用纯CSS代码实现动画的暂停与播放
[css] 使用纯CSS代码实现动画的暂停与播放一个属性:animation-play-state 取值:paused(暂停)|running(播放) hover取代点击 .stop:hover~. ...
纯HTML代码绘制表格--初入HTML1
纯HTML代码绘制表格--初入HTML1 预计效果图代码关键代码解释结果展示预计效果图代码话不多说,先上代码 <!DOCTYPE html> <html lang=&qu ...
酷炫纯CSS代码实现时空穿梭动效
效果展示: 使用场景,可以用于大数据大屏背景,或者是穿越动画的过渡,下载地址在文章末尾项目目录结构: html部分: <!doctype html> <html> & ...
纯 CSS 实现绘制各种三角形（各种角度）
纯 CSS 实现绘制各种三角形(各种角度) 一.前言三角形实现原理:宽度width为0:height为0:(1)有一条横竖边(上下左右)的设置为border-方向:长度 solid red,这个画的 ...
纯css代码画的铅笔
下载地址纯css代码画的铅笔,在网页上画一个铅笔图画. dd:
小米官网首屏纯css代码
小米官网首屏代码(纯CSS编写) ** 1.html部分: ** 小米商城  <div class="top-bar w"> ...
css做html5logo,用纯css实现的html5 logo标志
一个用css实现的html5 Logo,主要用html和css技术实现,例子如下: css部分代码如下: html, body, div, span, applet, object, iframe, ...
用纯css实现的html5 logo标志
一个用css实现的html5 Logo,主要用html和css技术实现,例子如下: 源代码下载地址: css部分代码如下: <style type="text/css"&g ...

纯CSS代码绘制小米LOGO

小米LOGO，用CSS绘制。

纯CSS代码绘制小米LOGO相关推荐

最新文章

热门文章