php爱心代码,使用CSS画爱心代码实例
今天小颖给大家分享一个用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的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画爱心的过程详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
php爱心代码,使用CSS画爱心代码实例相关推荐
- 一步一步教你用CSS画爱心
一步一步教你用CSS画爱心 CSS有很多小魔法,今天就介绍一种画爱心的方法(是纯CSS画的哦).网上有很多教程,但这个画法是本人原创哦~ -----------来自北极熊猫的分割线---------- ...
- html怎么让爱心闪动,css画爱心并实现“爱心跳动”
第一次写博客,来记录自己在前端上的成长,并且希望能够借鉴到其他大神的经验来提高自己的水平.这次打算用css来画一个爱心并实现"爱心跳动"的功能,下面如果有表述不正确的叙述,欢迎各位 ...
- css画心形原理,科技常识:使用CSS画爱心的过程详解
今天小编跟大家讲解下有关使用CSS画爱心的过程详解 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关使用CSS画爱心的过程详解 的相关资料,希望小伙伴们看了有所帮助. 今天小颖给大家分享一个 ...
- 太极图php代码,利用css画一个太极图(阴阳八卦)实例
这篇文章介绍利用css画一个太极图(阴阳八卦)实例 #yin-yang { width: 96px; height: 48px; background: #eee; border-color: red ...
- 如何用python画爱心型线_python怎么画爱心
Python可以使用turtle库来画爱心. Turtle库是Python语言中一个很流行的绘制图像的函数库,想象一个小乌龟,在一个横轴为x.纵轴为y的坐标系原点,(0,0)位置开始,它根据一组函数指 ...
- python编程爱心-如何用python画爱心
用python绘制爱心的基本步骤如下: 首先先下载安装好python程序. 在我们自己的电脑上找到python 的IDLE工具. 2.然后打开IDLE,新建一个文件,命名为test1.py. 3.接着 ...
- python画直方图代码-python plotly画柱状图代码实例
这篇文章主要介绍了python plotly画柱状图代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 代码 import pandas as ...
- python画柱状图代码-python plotly画柱状图代码实例
这篇文章主要介绍了python plotly画柱状图代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 代码 import pandas as ...
- 怎么用计算机画爱心,怎么用cad画爱心
很多人以为cad制图是个很枯燥的工作,其实并不是如此,cad也可以画出浪漫的图形.那么怎么实现用CAD画爱心呢?下面学习啦小编跟你们分享我的方法 用CAD画爱心的方法步骤: 一.简单的直线加圆画心形 ...
最新文章
- c#結合正則表達式驗證輸入的字符串
- BZOJ 2588: Spoj 10628. Count on a tree 树上跑主席树
- 三分钟教会你Java while循环中嵌套if
- bind函数polyfill源码解析
- Linux在线扫描热添加的SCSI/iSCSI设备
- 网友不同意 | 政协常委袁亚湘院士:不建议大部分孩子学奥数
- php.exe系统错误,PhpStorm中报 “Cannot run program git.exe, 系统找不到指定的文件” 错误的解决方法...
- 主窗口刷新,子窗口闪烁
- java添加日志打印出sql语句_实现Mybatis在控制台和日志文件中打印SQL语句
- MIPS中lw指令运行时间最长
- 【OGG】OGG故障错误处理总结
- Jzoj5460【NOIP2017提高A组冲刺11.7】士兵训练
- windbg 常用调试命令总结
- 本地调试获取微信code网页授权,免部署(前端+开发者工具)
- 三维几何学基础(向量、点乘、叉乘、反对称矩阵)
- Saiku3.1构建过程(暂时不包含Saiku-UI)
- 2种简易方法求100以内的素数(质数)
- 计算机图形和游戏技术专业,宾夕法尼亚大学计算机图形和游戏技术学理学硕士研究生申请要求及申请材料要求清单...
- Cache 设计原理(一)Cache 存在的意义
- 偏微分方程简明教程第六章部分答案
热门文章
- 0525-2020-LEETCODE-经典-复杂链表的复制(哈希表O(n)和原地修改O(1))
- 青春日志html,伤感青春日志语录
- 解决Android Studio出现File size exceeds configured limit的方法
- GNU / Linux Ubuntu 20.04 Realtek rtl8812au驱动程序安装指南
- 此外,希腊再度成为1月份的焦点
- 阿里云 oss c/s上传下载工具 (windows)
- 幻灯片1---图片切换---递归的使用
- Linux系统应用第三章Vim常见命令及快捷键
- VS安装及其注意事项
- SSIS Execute SQL Task 用法