python跳动的爱心_属于程序员的小浪漫,制作一颗跳动的爱心
小伙伴们
你们的爱心做出来了吗?
没做出来的也 没关系
咱们今天就来一起做一下
制作跳动的爱心
首先来分析一下绘制爱心的思路
先来创建 3 个正方形,让他们有一半是重叠的,然后给外面的两个矩形圆角的属性,就可以形成一个爱心的图形。如下图所示:
我们把这个图形旋转 45 度,就可以变成一个爱心的形状了,怎么样?你想到这一点了吗?现在我们用代码来实现一下~
先来制作三个矩形,中间添加上文字『 I LOVE YOU 』,爱心一般这是配这种文字的。
看一下效果:
现在修改图形的形状:
看我们的正方形就变成爱心了。
下面给爱心添加动画
白底看着不是那么美观哈~换个底色:
完整代码奉上:
Title
*{margin:0;padding:0;}
body,ul,li,ol,dl,dd,p,h1,h2,h3,h4,h5,h6{ margin:0;}
a{text-decoration:none;color: inherit;}
img{display: block;border:none;}
ol,ul{list-style:none;}
.clearfix:after {content: "";display: block;clear: both;}
.fl{ float: left;}
.fr{ float: right;}
html{
height: 100%;
background: -webkit-radial-gradient(center,#153170,#000);
}
.heart{ position: relative; width: 300px; height: 300px; margin: 200px auto;transform: rotate(45deg);
animation: move 2s infinite alternate ;}
.heart div{ position: absolute; width: 200px; height: 200px; background: red;}
.heart .middle{ right: 0; bottom: 0; width: 200px; height: 200px;}
.heart .left{ left: 0; bottom: 0; border-radius: 50%;}
.heart .right{ top: 0; right: 0;border-radius: 50%;}
.heart p{ width: 200px; height: 30px; font: bold 25px/30px "";text-align:center; color: #fff;}
.heart p{ position: absolute; right: 0; bottom: 85px; transform: rotate(-45deg);}
@-webkit-keyframes move{
10%{ transform: rotate(45deg) scale(1.1); text-shadow: 0 0 5px #fff; }
20%{ transform: rotate(45deg) scale(1.2); text-shadow: 0 0 5px #fff; }
30%{ transform: rotate(45deg) scale(1.3); text-shadow: 0 0 5px #fff; }
40%{ transform: rotate(45deg) scale(1.2); text-shadow: 0 0 5px #fff; }
50%{ transform: rotate(45deg) scale(1.3); text-shadow: 0 0 5px #fff; }
60%{ transform: rotate(45deg) scale(1.2); text-shadow: 0 0 5px #fff; }
70%{ transform: rotate(45deg) scale(1.3); text-shadow: 0 0 5px #fff; }
80%{ transform: rotate(45deg) scale(1.2); text-shadow: 0 0 10px #fff;}
90%{ transform: rotate(45deg) scale(1.1); text-shadow: 0 0 5px #fff; }
}
I Love You
解释性的东西比较少
干货都在代码里了
伙伴们要是有更好地想法
就来动手试一下吧!
python跳动的爱心_属于程序员的小浪漫,制作一颗跳动的爱心相关推荐
- c语言代码表白_用微信表情翻译表白,程序员的小浪漫,赶紧Get起来
"也许你不会发现,但我提及了,你肯定知道!" 微信作为一个社交的APP,被很多人使用,已经是人们离不开的软件. 它里面的很多功能在都在日常生活给了我们很多帮助,如手机话费支付,水电 ...
- 用微信表情翻译表白,程序员的小浪漫,赶紧Get起来!
"也许你不会发现,但我提及了,你肯定知道!" 微信作为一个社交的APP,被很多人使用,已经是人们离不开的软件. 它里面的很多功能在都在日常生活给了我们很多帮助,如手机话费支付,水电 ...
- python编码转换语句_好程序员Python教程之字符串编码知识小结
好程序员Python教程之字符串编码知识小结,提及Python字符串,你会想到什么?是ASCII,还是Unicode?他们之间是如何转换的?字符串编码和字符串有什么区别?接下来好程序员Python教程 ...
- python大型项目经验_经验丰富程序员才知道的8种高级Python技巧
全文共2330字,预计学习时长11分钟 图源:unsplash 本文将介绍8个简洁的Python技巧,若非经验十足的程序员,你肯定有些从未见过.向着更简洁更高效,出发吧! 1.通过多个键值将对象进行排 ...
- python怎么开发工具_为程序员和新手准备的8大Python开发工具
Python 是一种开源编程语言,用于 Web 编程.数据科学.人工智能和许多科学应用.学习 Python 使程序员能够专注于解决问题,而不是专注于语法,其丰富的库赋予它完成伟大任务所需的力量. 1) ...
- python ptz相机 角度_资深程序员来告诉你python为什么越来越火
"我是文科生,是不是没必要学计算机.学编程?"前两天,一位社会学专业大四学生,给我们留了言.然而,这是个典型的偏见.文科生不需要学编程的时代,早就过去了.我自己也在自学Python ...
- macbook写python代码够用么_为什么程序员独爱用Mac进行编程?为什么Mac适合编程?...
在如今Linux和windows发展势头迅猛的时代为什么还有很多程序员独爱用Mac进行编程?首先呢,纯从写代码的角度来说,mac并不比Linux或者windows更适合写代码.比如java程序员,ID ...
- python写小猪佩奇_这个程序员用 Python 20 秒画完小猪佩奇“社会人”!
点击上方"CSDN",选择"置顶公众号" 关键时刻,第一时间送达! 作者 | 丁彦军 责编 | 唐小引 每天写代码的程序员,你们知道今年社交平台上最火的带货女王 ...
- python画雪景_来自程序员的圣诞节浪漫-用Python画一棵带音乐的雪夜圣诞树
本文我们用 Python 来画一棵带音乐效果的雪夜圣诞树,基本思路如下: 用 Python 画一棵圣诞树作为背景图 在圣诞树背景图中添加雪落效果及音乐 下面来看一下具体实现. 首先,我们来画一棵圣诞树 ...
最新文章
- 谈谈Linux下的数据流重定向和管道命令
- 多态性与虚拟函数一个典型的例子第一步
- KMPEXKMP学习笔记
- 论文拒稿的评价可以有多狠?
- 【Maven】maven 插件 maven-surefire-plugin
- Anaconda安装后找不到conda.exe
- JAVA线程1 - 基本概念
- Linux断开进程的某个socket,Linux Socket:如何在客户端程序中检测断开的网络?
- 机器学习- 吴恩达Andrew Ng Week5 神经网络学习Neural Networks Learning知识总结
- TCP端口作用,漏洞,操作详析--杨义贤
- win10系统bug:开机自动打开空白word文档
- 微信小程序的基本操作
- Android Studio导入第三方sdk
- IO与文件读写---使用Apache commons io包提高读写效率
- 汉诺塔模拟器java
- Termux安装node
- 计算机机房ups电池常用配置表,机房UPS配置和解决方案
- 2019 快手校招编程题两道解答
- ppt提示内存或系统资源不足_装机吧小编详解系统资源不足怎么办?方法其实很简单...
- SPOJ GGS1 线段树
热门文章
- 如何保留5个有效数字输出c不4舍5入_SCI 论文投稿前必须检查的 16 个细节,内附8大SCI写作神器...
- js 逻辑空分配双问号语法 、双竖杠语法 与 可选链语法
- 我朋友搞得一本时尚摄影杂志,正!!
- 无线组网168元的4G路由器真实价值多少?蒲公英4G路由器X4C测评
- CAD绘图控件VectorDraw web library (javascript) v7.7010.1.0发布丨附下载
- 【C/S架构安全测试】客户端应用程序测试(测试项补充)
- linux重命名用户名_如何在Linux中更改或重命名用户名和用户ID?
- QT 16进制数转换成QString显示
- 在 Virtual Box 安装 Mac Os 并安装 Qt 开发应用
- 有没有软件测试二手iphone,小编教你如何检测二手iPhone手机,再也不用担心买到假货...