怎么用css3画椭圆(用CSS3画一个爱心)
类别:Web前端 浏览量:1148
时间:2021-11-03 15:09:01 怎么用css3画椭圆
用CSS3画一个爱心实现效果 需求/功能:怎么用CSS+HTMl绘画出一个爱心.
分析:爱心可以通过一个正方形+两个圆形组合成.
先画一个正方形+圆形, 摆放位置如下:
再添加上一个圆形.
最后再将整个图形顺时针旋转45度即可.
初步实现:先画一个正方形:
<body> <li id="heart"></li> </body>
#heart{ height: 300px; width: 300px; border: 2px solid black; }
给这个正方形的左边加行一个圆形.这里使用伪类:before来实现
#heart{ height: 200px; width: 200px; border: 2px solid black; position: relative; } #heart:before{ content: ''; width: 200px; height: 200px; border: 2px solid black; border-radius: 50%; // 正方形加圆角变成圆 position: absolute; left: -100px; // 向左位移正方形一半的长度 }
此时图形长这样:
再添加一个圆形, 这里使用after伪类来实现.
#heart{ height: 200px; width: 200px; border: 2px solid black; position: relative; } // 这里偷个懒.直接写一块了 #heart:before,#heart:after{ content: ''; width: 200px; height: 200px; border: 2px solid black; border-radius: 50%; position: absolute; left: -100px; } // 第二个圆, 只需要向上位移正方形一半的高度 #heart:after{ left: 0; top: -100px; }
最后一步, 旋转一下, 然后上个颜色.去掉之前为了看清楚加的边框.
/*给heart进行旋转并加上颜色*/ transform: rotate(45deg); background-color: red;
完整代码:
<style> body,html{ display: flex; align-items: center; justify-content: center; height: 100vh; } #heart{ height: 200px; width: 200px; /*border: 2px solid black;*/ position: relative; transform: rotate(45deg); background-color: red; } #heart:before,#heart:after{ content: ''; width: 200px; height: 200px; /*border: 2px solid black;*/ border-radius: 50%; position: absolute; left: -100px; background-color: red; } #heart:after{ left: 0; top: -100px; } </style> </head> <body> <li id="heart"></li> </body>
爱心可以由一个正方形和两个圆形组成, 这里使用before和after伪类, 然后, 分别对两个伪类进行位移. 最后挤上颜色, 就可以实现一个爱心❤️.
以上就是用CSS3画一个爱心的详细内容,更多关于CSS3画一个爱心的资料请关注开心学习网其它相关文章!
热门推荐
- nginx报错处理(Nginx报504 gateway timeout错误的解决方法)
- Ext.form.FieldSet的用法
- php数组实例说明(PHP检测一个数组有没有定义的方法步骤)
- dedecms增加导航内容(Dedecms搜索时 当然关键词和栏目名相同时 搜索结果为空的问题的解决方法)
- C#中is 运算符与as运算符的区别和作用
- python读写文件实验心得(Python文件读写常见用法总结)
- sql死锁进程保护(SqlServer查询和Kill进程死锁的语句)
- js浮点数运算精度问题(JS超出精度数字问题的解决方法)
- laravel自定义命令(laravel中数据显示方法默认值和下拉option默认选中)
- docker 清除none镜像(删除docker images中为none的镜像操作)