html表白特效源代码_程序员如何在七夕节表白

今天就是七夕节了，多少小情侣在这一天表白了。那么，我们程序员如何对她表白呢。

我们使用HTML和CSS来绘制一个会跳动的爱心。我们开发工具就使用HBuilderX吧，国产前端开发利器。我们打开HBuilderX，在任意盘符下建立一个工程目录，在这个目录下建立一个HTML文件就可以进行编写代码了。

源代码直接就分享给大家了。它的HTML结构很简单就只有三个盒模型(div)，是通过CSS样式来调整圆角来使其直角变成弧度。CSS样式从上往下就是:先清空浏览器原有的div样式。先定义一个id选择器，它是把三个主div框起来，给它们一个width和height属性都设置为350px，定义一个相对位置，是相对于浏览器的位置。最大的盒模型的CSS样式里设置animation属性，就是动画属性，这是CSS3的新特性。@keyframes属性是设置动画的过渡属性，我们这里过渡为4次，scale属性是CSS的缩放大小，由小过度到大再过度到小。再在这个大盒模型下做子类选择器的操作。把width和height属性都设置为200px，background设置为red颜色，当然也可以设置为deeppink就是骚粉啦。transform就是旋转角度设置为45deg。#box>div:nth-of-type(1)这里的top属性是100px实际是相对于浏览器而言是向下的。#box>div:nth-of-type(2)和#box>div:nth-of-type(3)的top属性是相对于浏览器向上的。border-radius属性是盒模型的圆角，50%是将直角变成弧角。positon都设置为absolute,绝对定位。除了动画相对复杂些，其他的都是CSS基本的属性相对不难。

好了，源代码就这些，大家感兴趣的可以试试；秀给你的她看看吧。哦，对了千万别用IE浏览器，否则这些属性和动画会失效，推荐使用FireFox或者Google浏览器。