首页 / CSS / CSS如何实现画爱心的示例代码分享
CSS如何实现画爱心的示例代码分享
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了CSS如何实现画爱心的示例代码分享,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2009字,纯文字阅读大概需要3分钟。
内容图文
![CSS如何实现画爱心的示例代码分享](/upload/InfoBanner/zyjiaocheng/414/ad3a839db6924a75a091b8a10e8d5fb4.jpg)
今天小颖给大家分享一个用CSS画的爱心,底下有代码和制作过程,希望对大家有所帮助。
第一步:
先画一个正方形。如图:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css画桃心</title> <style media="screen"> .heart-body { width: 500px; margin: 100px auto; position: relative; } .heart-shape { position: relative; width: 100px; height: 100px; background-color: #f70e0e; } </style> </head> <body> <p class="heart-body"> <p class="heart-shape"></p> </p> </body> </html>
第二步:
将利用伪元素before和 :after,在正方形的左边和上边各画一个正方形,然后再利用border-radius: 50%;属性,修饰下这两个正方形,然后就得到了两个圆,如图所示:
.heart-shape:before, .heart-shape:after { position: absolute; content: ''; width: 100px; height: 100px; background-color: #ffc0cb; } .heart-shape:before { left: -45px; } .heart-shape:after { top: -45px; }
利用border-radius: 50%; 属性:
.heart-shape:before, .heart-shape:after { position: absolute; content: ''; width: 100px; height: 100px; -webkit-border-radius: 50%; /**兼容苹果;谷歌,等一些浏览器认*/ -moz-border-radius: 50%; /**兼容火狐浏览器*/ -o-border-radius: 50%; /**兼容opera浏览器*/ border-radius: 50%; background-color: #ffc0cb; }
第三步:
类名为:heart-shape的p 利用transform: rotate(45deg); 属性将他们旋转45度,如图所示:
.heart-shape { position: relative; width: 100px; height: 100px; background-color: #f70e0e; -webkit-transform: rotate(45deg); /* Safari 和 Chrome */ -moz-transform: rotate(45deg); /* Firefox */ -ms-transform: rotate(45deg); /* IE 9 */ -o-transform: rotate(45deg); /* Opera */ transform: rotate(45deg); }
小颖把圆的背景色和正方形的背景色没给统一的颜色,是为了大家更好的看到明显的效果图,接下来小颖将其背景色设置成统一的,最终的爱心就出来了,如图所示:
.heart-shape:before, .heart-shape:after { position: absolute; content: ''; width: 100px; height: 100px; -webkit-border-radius: 50%; /**兼容苹果;谷歌,等一些浏览器认*/ -moz-border-radius: 50%; /**兼容火狐浏览器*/ -o-border-radius: 50%; /**兼容opera浏览器*/ border-radius: 50%; background-color: #f70e0e; }
以上就是CSS如何实现画爱心的示例代码分享的详细内容,更多请关注Gxl网其它相关文章!
内容总结
以上是互联网集市为您收集整理的CSS如何实现画爱心的示例代码分享全部内容,希望文章能够帮你解决CSS如何实现画爱心的示例代码分享所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。