用纯CSS画一颗爱心,这波操作可还行?
来源 | https://www.cnblogs.com/liu-en-ci/p/6721963.html
CSS是一个需要深度挖掘的东西,里面有很多样式属性,掌握几个常用的便可以实现很好看的效果,例如用CSS画爱心。
前期预备知识:
明白正方形的画法。
明白圆形的画法。
明白什么是定位。
明白怎么旋转。
话不多说,先教大家怎么用css画一个圆形。
.disc1{ width: 100px; height: 100px; border:1px solid red; background-color: red; margin:300px 0px 0px 300px; border-radius:100%; float:left;}
由于我们的爱心是由两个圆和一个正方形组成的,所以我们还需要再来一个圆形。
.disc2{ width: 100px; height: 100px; border:1px solid red; background-color: red; margin:250px 0px 0px 0px; border-radius:100%; float:left; position: relative; right: 50px;}
第三步我们就需要做一个正方形了。
.square{ width: 100px; height: 100px; border:1px solid red; background-color: red; margin: 300px 0px 0px 0px; float: left; position: relative; right: 152px;}
做完这些的效果已经基本上出来了,但是我们还需要调整一下爱心的角度,这时就需要用到我们css样式中的transform中的rotate属性了。
我们由于需要把三个p都旋转角度,所以我们把这三个p放在一个p里面。具体代码如下:
.main{ transform: rotate(45deg); margin: 300px;}
做到现在,我们的爱心就已经做出来咯。效果图如下:
全部代码如下(包含HTML代码和CSS代码)
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <link href="css/square.css" rel="stylesheet" type="text/css"> <title></title> </head> <body> <div class="main"> <div class="disc1"></div> <div class="disc2"></div> <div class="square"></div> </div> </body></html>
*{ margin: 0px; padding: 0px;}.main{ transform: rotate(45deg); margin: 300px;}.disc1{ width: 100px; height: 100px; border:1px solid red; background-color: red; margin:300px 0px 0px 300px; border-radius:100%; float:left;}.disc2{ width: 100px; height: 100px; border:1px solid red; background-color: red; margin:250px 0px 0px 0px; border-radius:100%; float:left; position: relative; right: 50px;}.square{ width: 100px; height: 100px; border:1px solid red; background-color: red; margin: 300px 0px 0px 0px; float: left; position: relative; right: 152px;}
用纯CSS画一颗爱心,这波操作可还行?相关推荐
- 用纯CSS画一颗爱心
来源 | https://www.cnblogs.com/liu-en-ci/p/6721963.html CSS是一个需要深度挖掘的东西,里面有很多样式属性,掌握几个常用的便可以实现很好看的效果,例 ...
- html怎么画3角型当背景,纯CSS画三角原理解析
纯CSS画三角原理解析 因为之前做一个页面出现了很多三角,开始直接用图片感觉并不是很好用,看着总是怪怪的颜色还很难调整的跟背景一样,就搜了一波代码直接用上了,事后想了一下感觉不知道具体原理是什么,很奇 ...
- Python学习练习:画一颗爱心
以下是用Python和Turtle模块画一个爱心的代码: import turtle # 创建画布和画笔 canvas = turtle.Screen() pen = turtle.Turtle() ...
- 纯CSS画的基本图形(矩形、圆形、三角形、多边形、爱心、八卦等),里面很多涉及到CSS3的一些属性。
今天在css-tricks上看到一篇文章,那篇文章让我不禁心头一震,强大的CSS啊,居然能画出这么多基本的图形.图形包括基本的矩形.圆形. 椭圆.三角形.多边形,也包括稍微复杂一点的爱心.钻石.阴阳八 ...
- java写三角形圆矩形_纯CSS画的基本图形(矩形、圆形、三角形、多边形、爱心、八卦等)...
图形包括基本的矩形.圆形.椭圆.三角形.多边形,也包括稍微复杂一点的爱心.钻石.阴阳八卦等.当然有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,我希望你用的是firefox或者chrome, ...
- 纯CSS画的基本图形(矩形、圆形、三角形、多边形、爱心、八卦等)20种类型
今天在css-tricks上看到一篇文章,那篇文章让我不禁心头一震,强大的CSS啊,居然能画出这么多基本的图形.图形包括基本的矩形.圆形.椭圆.三角形.多边形,也包括稍微复杂一点的爱心.钻石.阴阳八卦 ...
- 纯CSS画的基本图形
今天在css-tricks上看到一篇文章,那篇文章让我不禁心头一震,强大的CSS啊,居然能画出这么多基本的图形.图形包括基本的矩形.圆形. 椭圆.三角形.多边形,也包括稍微复杂一点的爱心.钻石.阴阳八 ...
- 纯css画一个樱桃小丸子
纯css3画一个樱桃小小丸子,嘻嘻,废话不多少直接上代码吧! <div class="main"><div class="head">& ...
- 用css画三角形、爱心、钻石
如何用css画出来爱心.钻石.多边形 首先得了解下盒子模型 content:内容. padding:内边距. border:边框. margin:外边距. 利用boder的特点,可以给boder添加颜 ...
最新文章
- python学习之列表
- 达人篇:2.1)零缺陷管理法;
- 调取方法_转需!不去阿里巴巴调取支付宝交易证据方法
- vue防重复点击(指令实现)
- asp.net core 系列之webapi集成EFCore的简单操作教程
- android摄像头矩形框提取_视频图像摄像头跟踪的上位机系统设计
- Python教程_1_引言
- python实现银行ATM系统
- 4、wpf 打包为exe或者msi的安装程序
- 机器学习/深度学习常用数据集归纳(附百度网盘链接)
- jQuery boxy弹出层对话框插件中文演示及讲解
- str在c语言什么意思,C语言(str)是什么意思
- 无人机航测技术的优势有哪些?
- 什么?古代也有程序员?
- CSS3 animation动画,风车旋转、loading、人物走路动画案例
- sql盲注二分法注入脚本
- 利用百度(或者360搜索等)的快照解决公司网络限制
- linux下cp -b,Linux下cp的命令解释
- Hive正则表达式regexp_replace,截取后提取_汉字_字母_数字
- 微信小程-截取小数点的位数