用css画一辆小汽车
跟着网上的demo敲出了一辆小汽车。
html代码:
<div class="zxx_main_con"><div class="zxx_car_box"><i class="t1"></i><i class="t2"></i><i class="t3"></i><i class="t4"></i><i class="t5"></i><i class="t6"></i><i class="t7"></i><i class="t8"></i><i class="t9"></i><i class="t10"></i><i class="t11"></i><i class="t12"></i><i class="t13"></i><i class="t14"></i><i class="t15"></i><i class="t16"></i><i class="t17"></i><i class="t18"><i class="t19"><i class="t20"><i class="t21"></i><i class="t22"><i class="t23"></i></i></i></i><i class="t24"></i><i class="t25"></i><i class="t26"></i><i class="t27"></i><i class="t28"></i></div></div>
这是由一个一个的i标签组成的,我们给所有的i标签设置相同的css属性:
display: block;font-size: 0;line-height: 0;border-style: solid;border-color: #000000;
然后根据不同的i标签的位置不同,做出不一样的效果,难点在车的两个灯,是在i标签里面嵌套了i标签,最里面的i标签设置为白色的样式:
车灯:width: 5px;height: 3px;left: -1px;top: 1px;background: #ffffff;border: 0;position: absolute;
车窗部分是用padding撑开:
车窗width: 31px;height: 1px;margin: 0 5px;border-width: 0 2px 0 3px;
这个demo其实没有难的技术可言,比较有创新、新意,所以拿来试着敲敲。
用css画一辆小汽车相关推荐
- 如何用 css 画一个心形
如何用 css 画一个心形 (How to draw hearts using CSS) 用两个长方形切圆角倾斜位移并合并为一个心形 第一步 画一个长方形 (Draw a rectangle) 这个长 ...
- html用css画多边形,Sass绘制多边形_Preprocessor, Sass, SCSS, clip-path, CSS处理器, 会员专栏 教程_W3cplus...
CSS画图形在Web运用中时常看到,比如三角形.五角星,心形,Ribbon等.不过以前使用CSS绘制图形一般都是借助于border来绘制,但这样的方式受到一定的限制,而且实用价值也有所限制.这篇文章将 ...
- [css] 用css画一个太阳
[css] 用css画一个太阳 // css.sun {margin: 200px;width: 200px;height: 200px;border-radius: 50%;background: ...
- [css] 用CSS画出一个任意角度的扇形,可以写多种实现的方法
[css] 用CSS画出一个任意角度的扇形,可以写多种实现的方法 先画一个圆,外加两个绝对定位的半圆 扇形可以通过两个半圆作为遮罩旋转来露出相应的角度实现 这只能切出180°以内的扇形 超过180°的 ...
- [css] 请使用css画一个圆,方法可以多种
[css] 请使用css画一个圆,方法可以多种 <div class="circle"></div>1.border-radius.cirlce{width ...
- [css] 使用css画出一个五角星
[css] 使用css画出一个五角星 #star-five {margin: 50px 0;position: absolute;display: block;color: red;width: 0; ...
- [css] 请使用CSS画一个带锯齿形边框圆圈
[css] 请使用CSS画一个带锯齿形边框圆圈 @import 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题
- [css] 用css画一个五边形和一个六边形
[css] 用css画一个五边形和一个六边形 五边形:clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); 六边形:cli ...
- [css] 用css画出一个圆圈,里面有个对号
[css] 用css画出一个圆圈,里面有个对号 #right {width: 150px;height: 150px;margin: 100px auto;border-radius: 50%;bor ...
最新文章
- C++托管代码生成DLL
- LaTex 并集交集等
- Linux C :线程操作和线程同步的多线程并发编程
- web前端知识点太多_web前端入门必学的16个知识点,都来看一下吧
- linux python syslog,Centos下python 对syslog重写进行日志记录
- python源码笔记_python源码学习笔记(一)
- oracle数据库关不掉,oracle进程关不掉的问题??新手问题
- Atitit.vod 视频播放系统 影吧系统的架构图 架构体系 解决方案
- WOW!今年iPhone XR将新增两种颜色:绿色和薰衣草色
- 中国摊铺设备市场趋势报告、技术动态创新及市场预测
- opencv2.4.9中HoughlinesP源码中的疑问解析!
- Nvidia控制面板选择默认独显后黑屏的解决方法
- 根据传入当前页码及每页数量进行查询
- 页面打印不全怎么办html css,win7打印网页显示不全怎么办|win7设置网页打印页面的方法...
- Unhandled promise rejection
- 从童年回忆到“人人喊打“,好丽友做错了什么?
- 解决多线程安全问题的几种方式?
- 清默网络——CCIE考试经验与心得(1)
- Cisco NAC介绍
- 视频怎么用伪原创手机 抖音短视频如何去水印
热门文章
- 【JAVA】Win10实现Java文件的开机自启动(附详细步骤)
- python课程与c+课程有什么不同-Scratch、Python、C+学习的不同之处
- MySQL读写分离,写完读不到问题如何解决
- Github 初学够用指南(B站笔记)
- MessageBox.Show 用法介绍
- 连江哪里可以学计算机基础,奔走相告!连江人在连江可以考驾照啦~
- python:ffn 方差分析
- [ 支付宝支付笔记]
- win10wifi开关自动弹回_win10热点自动关闭怎么办 win10自带的移动热点经常自动关闭的解决方法...
- 谷粒商城个人笔记记录