html语言怎么打出红色心形,使用HTML-CSS画爱心的过程详解
如何使用HTML-CSS来画出一个爱心呢,下面我就教大家使用HTML-CSS画爱心的方法。
第一步:
先画一个正方形。如图:
css画桃心
.heart-body {
width: 500px;
margin: 100px auto;
position: relative;
}
.heart-shape {
position: relative;
width: 100px;
height: 100px;
background-color: #f70e0e;
}
第二步:
将利用伪元素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的div 利用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画爱心的过程详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,我会及时回复大家的。在此也非常感谢大家对莫愁个人博客的支持!
html语言怎么打出红色心形,使用HTML-CSS画爱心的过程详解相关推荐
- css画心形原理,科技常识:使用CSS画爱心的过程详解
今天小编跟大家讲解下有关使用CSS画爱心的过程详解 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关使用CSS画爱心的过程详解 的相关资料,希望小伙伴们看了有所帮助. 今天小颖给大家分享一个 ...
- R语言生存分析(survival analysis)与生存资料有关的概念详解
R语言生存分析(survival analysis)与生存资料有关的概念详解 目录 R语言生存分析(survival analysis)与生存资料有关的概念详解 #生存分析
- #转载:杨辉三角形实现过程详解-c语言基础
杨辉三角形实现过程详解-C语言基础 十一一个人 2018-12-26 06:45:45 6465 收藏 28 最后发布:2018-12-26 06:45:45首发:2018-12-26 06:45:4 ...
- python脚本语言采用声音作为手段_python 利用pyttsx3文字转语音过程详解
这篇文章主要介绍了python 利用pyttsx3文字转语音过程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下# -*- coding: utf ...
- python发音语言-python 利用pyttsx3文字转语音过程详解
这篇文章主要介绍了python 利用pyttsx3文字转语音过程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下# -*- coding: utf ...
- c语言的编译过程详解
c语言的编译过程详解 IDE的使用让很多和我一样的人对C/C++可执行程序的底层生成一知半解,不利于我们深入理解原理.在这里小结一下,望路过的大神指正~ 前言:从一个源文件(.c文件)到可执行程序到底 ...
- 全网最全的Windows下Anaconda2 / Anaconda3里Python语言实现定时发送微信消息给好友或群里(图文详解)...
不多说,直接上干货! 缘由: (1)最近看到情侣零点送祝福,感觉还是很浪漫的事情,相信有很多人熬夜为了给爱的人送上零点祝福,但是有时等着等着就睡着了或者时间并不是卡的那么准就有点强迫症了,这是也许程序 ...
- python怎么画心形图案_python怎么画爱心
Python可以使用turtle库来画爱心. Turtle库是Python语言中一个很流行的绘制图像的函数库,想象一个小乌龟,在一个横轴为x.纵轴为y的坐标系原点,(0,0)位置开始,它根据一组函数指 ...
- C语言字符串库函数strlen、strcpy、strcat、strcmp、strstr使用详解及其实现
写在前面:现在在刷简单题的时候,老是遇到字符串操作的题,用c语言自己实现很麻烦,其实c语言也有很多对字符串操作很方便的库函数.这个博客写来一是为了巩固自己一下自己学的知识,二也可以方便大家查询. 一. ...
最新文章
- vue脚手架解决跨域问题-------配置反向代理
- 洛谷 P2746 [USACO5.3]校园网Network of Schools
- JavaScript的预编译及执行顺序
- VTK:几何对象之CylinderExample
- cookie读取中文时乱码
- Gym102832K. Ragdoll(CCPC长春)
- 数禾云上数据湖最佳实践
- C++设计模式-状态模式
- bzoj 3036: 绿豆蛙的归宿(Dp)
- html语言 图片大小,html如何设置图片大小
- 信息系统项目管理师 - 必考记忆口诀
- python基于scrapy框架爬取当当图书信息
- 哪种硬盘坏道检测工具最好,有硬盘坏道怎么修复
- python 微信群发_用python写一个微信群发工具(基于itchat库)
- linux命令的 格式化硬盘,教你玩转Linux—磁盘格式化
- Swift 设置UISearchBar圆角以及背景颜色
- 比较精确的计算农历节气的java源码
- java 1029: 三角形判定
- 利用开源软件30分钟搭建自己的voip网络电话系统V1.1
- HDU6124 Euler theorem