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浏览器。

250f3e2931e4da40cec2ea569fa75b8c.png
相关资源:html表白源码
表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页