最简单的图形用户代码_简单几句代码,画出精美的图形,快跟着学起来~
去年暑假实习了四个月的前端,接触了很多前端相关的东西,觉得前端真的比后端有趣多了啊,又好玩又有趣,相比后端千篇一律的代码,前端的千变万化一瞬间俘获了我的心~~~~~
下面列举一些基础的前端图形制作代码,希望对大家有用哟。
为了让大家能轻松愉快地跟着我的代码动手测试,更为了让一点计算机基础都没有的小伙伴也能跟着我下面的代码来自己动手玩耍,我先简单给出一个基础的HTML,大家可以像我这样新建一个HTML文件,然后复制下面的代码到文件中:(不知道怎么用记事本建html的小伙伴可以去看我的另外一篇文章:使用 Notepad 或 TextEdit 来编写 HTML。)
一,正方形
有趣的前端图形
好了,现在点击使用浏览器打开上面的文件,是不是看到了下面的图像呢:
如果你已经看到了上面的图像,那么恭喜你,你可以继续往下看下去了,下面有更多有趣的图形等着你哦。
二、圆形
将下面的代码放到中,并把
#circle { width: 100px; height: 100px; background: red; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px;}
你就得到了一个可爱的圆:
当然颜色啥的,可以随便改啊~
三、椭圆
#oval { width: 200px; height: 100px; background: red; -moz-border-radius: 100px / 50px; -webkit-border-radius: 100px / 50px; border-radius: 100px / 50px;}
结果如下:
四、三角形
正三角:
#triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red;}
倒三角:
#triangle-down { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid red;}
五、五角星
#star-five { margin: 50px 0; position: relative; display: block; color: red; width: 0px; height: 0px; border-right: 100px solid transparent; border-bottom: 70px solid red; border-left: 100px solid transparent; -moz-transform: rotate(35deg); -webkit-transform: rotate(35deg); -ms-transform: rotate(35deg); -o-transform: rotate(35deg);}#star-five:before { border-bottom: 80px solid red; border-left: 30px solid transparent; border-right: 30px solid transparent; position: absolute; height: 0; width: 0; top: -45px; left: -65px; display: block; content: ''; -webkit-transform: rotate(-35deg); -moz-transform: rotate(-35deg); -ms-transform: rotate(-35deg); -o-transform: rotate(-35deg); }#star-five:after { position: absolute; display: block; color: red; top: 3px; left: -105px; width: 0px; height: 0px; border-right: 100px solid transparent; border-bottom: 70px solid red; border-left: 100px solid transparent; -webkit-transform: rotate(-70deg); -moz-transform: rotate(-70deg); -ms-transform: rotate(-70deg); -o-transform: rotate(-70deg); content: '';}
结果:
六、六角星
#star-six { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; position: relative;}#star-six:after { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid red; position: absolute; content: ""; top: 30px; left: -50px;}
七、无穷符号
长这样:
#infinity { position: relative; width: 212px; height: 100px;} #infinity:before,#infinity:after { content: ""; position: absolute; top: 0; left: 0; width: 60px; height: 60px; border: 20px solid red; -moz-border-radius: 50px 50px 0 50px; border-radius: 50px 50px 0 50px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);} #infinity:after { left: auto; right: 0; -moz-border-radius: 50px 50px 50px 0; border-radius: 50px 50px 50px 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);}
八、心形~~
最后来一个爱你的形状吧~~~~
心形~~~
先放最终结果:
代码:
#heart { position: relative; width: 100px; height: 90px;}#heart:before,#heart:after { position: absolute; content: ""; left: 50px; top: 0; width: 50px; height: 80px; background: red; -moz-border-radius: 50px 50px 0 0; border-radius: 50px 50px 0 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%;}#heart:after { left: 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin :100% 100%;}
更多好玩的图形,尽在hello程序媛哦~~
当然,上面的代码我也已经整理好啦,需要的童鞋可以私信我领取代码呀。
另外,不懂如何使用电脑自带的记事本编辑html的小伙伴,也可以私信问我哦,我一定知无不答答无不尽~~
最简单的图形用户代码_简单几句代码,画出精美的图形,快跟着学起来~相关推荐
- python turtle画有趣的图形_使用python Turtle库画出“精美碎花小清新风格树”
Turtle库手册可以查询查询 使用Turtle画树,看了一下网上的代码,基本上核心的方法是使用递归:其次通过递归传参更笔的粗细从而改变绘制时的线段,更改树的躯干大小,在遍历到最后一个节点时,更改笔的 ...
- python绘制繁花曲线代码_做个绘图仪,画出美丽的繁花曲线 | 上周实验回顾
原标题:做个绘图仪,画出美丽的繁花曲线 | 上周实验回顾 在刚刚过去的周末,北京.上海.广州.深圳.杭州.南京的孩子们又在科学队长实验室玩嗨啦!一起来回顾一下吧~ 开眼时间 认识繁花曲线 纸币上的背景 ...
- python画圆弧组成的花瓣代码_Python编程的Turtle 库画出“精美碎花小清新风格树”,速取代码!...
作者 | 1_bit 责编 | 王晓曼 出品 | CSDN博客 开始 使用Turtle画树,看了一下网上的代码,基本上核心的方法是使用递归:其次通过递归传参更笔的粗细从而改变绘制时的线段,更改树的躯干 ...
- win2d 画出好看的图形
本文告诉大家,win2d 不需要从零开始做,以前做出来的很多库其实只需要做很小修改就可以做出好看的效果,而且用在 UWP 上.本文修改原先 大神写的 GDI 图形到 win2d 上,而且可以运行起来 ...
- 简单编程代码_好了好了,不闲扯了,我们开始学编程了
一.如何选择一门编程语言 说到编程,很多人都想着多么厉害,多么大神. 但是其实编程不过就是码代码,就像砌砖一样,设计好图纸,然后按部就班的码上去就好了. 但是砌砖也是个技术活,你要去学习怎么用工具,怎 ...
- python有趣的简单代码_简单几步,100行代码用Python画一个蝙蝠侠的logo
转自:菜鸟学Python 蝙蝠侠作为DC漫画的核心人物之一,一直都受到广大粉丝的喜爱,而笔者作为DC的铁杆粉丝,自然也是老爷(粉丝对蝙蝠侠的昵称)的支持者.今天,笔者就用Python来画一个蝙蝠侠的l ...
- java幻灯片播放代码_简单常用的幻灯片播放实现代码
幻灯片自动播放图片是当前网站比较流行的一个展示方式.在网上我们能找到各种特效丰富的幻灯片插件和代码.这里项目需要,我自己做了一个简单的,就不详细讲解了,代码很简单.直接看效果图和代码吧. 所有代码 p ...
- python画画100行代码_简单几步,100行代码用Python画一个蝙蝠侠的logo
原标题:简单几步,100行代码用Python画一个蝙蝠侠的logo 转自:菜鸟学Python 蝙蝠侠作为DC漫画的核心人物之一,一直都受到广大粉丝的喜爱,而笔者作为DC的铁杆粉丝,自然也是老爷(粉丝对 ...
- 用python画简单雪花剪纸步骤图解_简单雪花剪纸步骤图解
简单雪花剪纸步骤图解 民间剪纸的表现语言不是简单的平铺直叙,而是托物寄语,借用那些约定成俗的观念化形象,来寄托人们对美好生活的向往,对吉祥幸福的期盼.下面是小编为大家整理的.简单雪花剪纸步骤图案,希望 ...
最新文章
- SQL DEVELOPER 打不开了
- JavaScript中的load事件的作用_史上最全的web前端面试题汇总及答案JavaScript之二(二)...
- 风格迁移应用_[风格迁移][超分][ECCV2016]Perceptual Losses for Real...
- stl min函数_std :: min()函数以及C ++ STL中的示例
- linux 智联 网卡设置,Linux初学者DNS配置指南(四)配置Bind常见问题
- 代码重用_WebAssembly的速度和代码重用
- Golang 在十二赞的深度应用
- 一起学《Troubleshooting Oracle Performance》吧
- CISA要求联邦机构修复被震网病毒攻击利用的漏洞
- Linux-you need at least 8.6GB disk space to install Ubuntu,this computer has only 8GB
- CentOS 7.6安装Mysql5.7
- 四色定理已利用计算机证明,四色定理的一证明过程
- 嵌入式系统基础——Unbuntu的初步使用
- Mac_IOS_报:The Xcode build system has crashed. Please close and reopen your workspace.
- 甜心奶酪用英文怎么说_您组织中没有人会碰到什么奶酪,更不用说动弹了?
- Ultra Light Support
- flutter学习笔记--传递信息
- Qt常见make编译错误:/usr/bin/ld:cannot find -lxxx
- 当今的BIOS(UEFI)
- 《易经》与计算机科学技术的关系
热门文章
- 深度学习“三巨头”、图灵奖得主 Yann LeCun:我没有天赋,所以才追随聪明人...
- 8.3 折特惠票仅剩 5 天!「2019 嵌入式智能国际大会」全日程大公开!
- Flutter 内幕:Flutter 在内部是如何工作的?
- 玩嗨的 2 亿快手“老铁”和幕后的极致视觉算法
- 拿来就能用!如何用 AI 算法提高安全运维效率? | 技术头条
- 如何正确 Get 分库分表?
- 对程序员来说,创业公司和大公司应该怎么抉择?
- 程序员正在抛弃 Facebook
- 微软智能云三驾马车 Azure、Office 365、Dynamics 365 齐聚中国
- 用超 7500 万的 GitHub 代码仓库实力解读:哪门编程语言热度最高?