一、爱心示例：

二、开始写代码：

/*
* Hi。宝贝！
* 这么久了。还没和宝贝说过我的工作呢！
* 我是个前端工程师。俗称程序员。网页相关。
* 如这个页面。就是个什么也没有的网页。
* 我的工作就是给这种空白的页面加点儿东西。
* 嗯。说起来手机和电脑还得区分一下。
* 你现在用的是。。。电脑
*//* 首先给所有元素加上过渡效果 */
* {-webkit-transition: all .5s;transition: all .5s;
}
/* 白色背景太单调了。来点背景 */
body, html {color: #fff;background-color: darkslategray;
}/* 文字太近了 */
.styleEditor {overflow: auto;width: 48vw;height: 96vh;border: 1px solid;font-size: 14px;line-height: 1.5;padding: 10px;
}/* 这些代码颜色都一样。加点儿高亮区别来 */
.token.selector{ color: rgb(133,153,0) }
.token.property{ color: rgb(187,137,0) }
.token.punctuation{ color: yellow }
.token.function{ color: rgb(42,161,152) }
.token.comment{ color: rgb(177,177,177) }/* 加个 3D 效果 */
html{perspective: 1000px;-webkit-perspective: 1000px;
}.styleEditor {transform: rotateY(10deg) translateZ(-100px) ;-webkit-transform: rotateY(10deg) translateZ(-100px);
}/*
* 宝贝，今天教你写代码。
* 用代码画一个爱心。
*//* 首先，来一个画板 */
.heartWrapper {width: 48vw;height: 96vh;position: relative;border: 1px solid;background-color: white;transform: rotateY(-10deg) translateZ(-100px);-webkit-transform: rotateY(-10deg) translateZ(-100px);
}/* 画一个方块，当左心室和右心室 */
.heart {width: 100px;height: 100px;position: absolute;top: 50%;left: 50%;margin: -50px 0 0 -50px;border-radius: 20px;background: #E88D8D;transform: rotate(45deg);
}/* 画上左心房 */
.heart::before {content: '';background: #E88D8D;border-radius: 50%;width: 100px;height: 100px;position: absolute;left: -38px;top: 1px;
}/* 再画上右心房 */
.heart::after {content: '';background: #E88D8D;border-radius: 50%;width: 100px;height: 100px;position: absolute;right: -1px;top: -38px;
}/* 太单调了，让心跳动起来 */
@keyframes throb {0% {transform: scale(1) rotate(45deg);opacity: 1;}100% {transform: scale(1.65) rotate(45deg);opacity: 0}
}.bounce {opacity: 0.2;animation: throb 1s infinite linear;
}
/*
* Ok，完成！
* 宝贝，七夕快乐！
*/

三、效果示例如下：

四、手机扫描查看真实效果：

七夕小案例：用代码给心爱的她画一个爱心相关推荐

[七夕节]——一款基于canvas绘制五颜六色线条合成一个爱心发光动画特效
Canvas基本介绍 Canvas介绍 1.canvas是html5的一个新标签,属于h5的新特性 2.canvas标签是一个图形的容器,简单点说就是一块画布,你可以在上画矩形,圆形,三角形,折线等等 ...
美国总统奥巴马不仅呼吁所有人都学习编程，甚至以身作则编写代码，成为美国历史上首位编写计算机代码的总统。2014年底，为庆祝“计算机科学教育周”正式启动，奥巴马编写了很简单的计算机代码：在屏幕上画一个正
美国总统奥巴马不仅呼吁所有人都学习编程,甚至以身作则编写代码,成为美国历史上首位编写计算机代码的总统.2014年底,为庆祝"计算机科学教育周"正式启动,奥巴马编写了很简单的计算机代 ...
给好朋友用代码画一个爱心吧
目录效果图 html爱心 python爱心编辑代码 html python 浅浅分析一下<燃烧我,照亮你>剧中的爱心代码光棍节要到了,不给心意的人写个爱心代码? 话不多说,上才艺 ...
java多线程实现卖火车票小案例同步代码块优先级守护线程
/*** * * @author 时光机jay * @version 1.8 * @since 2020/9/28 * * */ public class Test33 { s ...
vbs画动态爱心代码_用vb算法画出爱心
展开全部方法一:简62616964757a686964616fe58685e5aeb931333332643930单的画法. Private Sub Command1_Click() ForeCol ...
golang gin框架gorilla的websocket小案例
golang gin框架中gorilla的websocket案例在gin框架下导入包 "github.com/gorilla/websocket" r.GET("/t ...
前端CSS3实现3D相册小案例
前端CSS3实现3D相册小案例 HTML代码部分: <!DOCTYPE html> <html lang="en"> <head> <me ...
爬虫的一个小案例:python实现英汉互译
什么是网络爬虫? 网络爬虫又称网络蜘蛛,是指按照某种规则在网络上爬取所需内容的脚本程序.众所周知,每个网页通常包含其他网页的入口,网络爬虫则通过一个网址依次进入其他网址获取所需内容. 一个小案例:py ...
python简单代码演示效果-用python画爱心及代码演示
程序员在爱情方式上表达上展现的多种多样,其中现在大火的用编程去编写个表白内容,最受欢迎了,今天小编也尝试了下,一起来看看吧~ 准备工具:python3 画爱心实施步骤: 打开编译器,写上code,代码 ...

七夕小案例：用代码给心爱的她画一个爱心

一、爱心示例：

二、开始写代码：

三、效果示例如下：

四、手机扫描查看真实效果：

七夕小案例：用代码给心爱的她画一个爱心相关推荐

最新文章

热门文章