前端程序员用css动画给女朋友一个惊喜

成品

具体步骤

1：在百度上随便找一张喜欢的图片，最好是爱心树的样子。
2：利用ps软件，抠图扣出其中的一片叶子

3：然后写代码，将爱心树设置为页面背景

*{margin: 0;padding: 0;
}div
{width: 100%;height: 1000px;background-image:url(img/tree.jpg);background-repeat: no-repeat;background-size: cover;/* position:relative; */}

3：画五片叶子，设置叶子的position位置属性以便进行图片定位及接下来的变换

<div><img src="img/leaf.png" alt="leaf" class="img1" /><img src="img/leaf.png" alt="leaf" class="img2" /><img src="img/leaf.png" alt="leaf" class="img3" /><img src="img/leaf.png" alt="leaf" class="img4" /><img src="img/leaf.png" alt="leaf" class="img5" /></div>

.img1{position:relative;
}
.img2{position:relative;
}
.img3{position:relative;
}
.img4{position:relative;
}
.img5{position:relative;
}

4：给叶子图片设置animation属性，以便进行树叶变换，设置属性值，产生延迟，防止出现同时飘落的现象。

.img1{position:relative;-webkit-animation: myfirst 3s linear 0s infinite none;/*alternate*/
}
.img2{position:relative;-webkit-animation: myfirst1 5s linear 0s infinite none;
}
.img3{position:relative;-webkit-animation: myfirst2 4s linear 0s infinite none;
}
.img4{position:relative;-webkit-animation: myfirst3 6s linear 0s infinite none;
}
.img5{position:relative;-webkit-animation: myfirst4 5s linear 0s infinite none;
}

5： animation的动画设置，让每一片叶子飘的方向，速度不同。

@-webkit-keyframes myfirst /* Safari 与 Chrome */
{0% {left: 1000px;top: 500px;}100% {left: 400px;top: 900px;}
}@-webkit-keyframes myfirst1 /* Safari 与 Chrome */
{0% {left: 1000px;top: 500px;}50%{left: 1400px;top: 700px;-webkit-transform: rotate(180deg);}100% {left: 1200px;top: 900px;}
}@-webkit-keyframes myfirst2 /* Safari 与 Chrome */
{0% {left: 1300px;top: 600px;}50%{left: 900px;top: 800px;-webkit-transform: rotate(90deg);}100% {left: 1200px;top: 900px;}
}@-webkit-keyframes myfirst3 /* Safari 与 Chrome */
{0% {left: 1100px;top: 200px;}25%{left: 1200px;top: 300px;-webkit-transform: rotate(280deg);}100% {left: 200px;top: 400px;}
}
@-webkit-keyframes myfirst4 /* Safari 与 Chrome */
{0% {left: 1000px;top: 500px;}35% {left: 600px;top: 400px;-webkit-transform: rotate(80deg);}75% {left: 800px;top: 700px;-webkit-transform: rotate(80deg);}100% {left: 400px;top: 900px;}
}

6： audio设置背景音乐，这会在页面上显示默认的音乐播放器，需要你点击手动播放。如果你隐藏audio组件，它也不会自动播放。

 <audio controls="controls" autoplay="autoplay" loop="-1" style="float: left;"><source src="music/loveperhapsbad.mp3" type="audio/mp3"/></audio>

完成

说实话，我感觉叶子飘落的速度不大对头，牛顿的棺材板可能压不住了）_（

前端程序员用css动画给女朋友一个惊喜相关推荐

Java程序员情人节_盘点程序员情人节的表白，前端程序员最浪漫，后端不服来战...
今天是 2 月 14 日情人节,我看公众号后台有好多人在回复关键字:情人节表白代码.我想,我作为大家的校长,必须给大家送一波福利代码啊!我是真没想到,竟然很多程序员都想用代码表白,还整的挺浪漫的,看来 ...
前端程序员书桌上不可缺少的CSS书籍
作为前端,CSS不仅要会,而且要精通,随着各种浏览器规范参差不齐和网页交互多元化的趋势越来越复杂,前端程序员必须要将CSS基础知识打牢.由于现在的框架越来越多,导致很大一部分程序员的工作只是拿着现成的 ...
七夕节，程序员们都怎么哄女朋友开心？
大家好,马上就七夕节了,七夕节是牛郎织女鹊桥相会的相会的日子. 这篇文章的前提是,你得有个女朋友,没有就先收藏着吧! 一.七夕节的由来七夕节的来源是梁山伯与祝英台的美丽传说,化成了一对蝴蝶~ 美丽的 ...
前端程序员有前途吗？
先来看看各大招聘网站的统计,Web前端开发人员的的需求数量在不断的增加,尤其是随着谷歌.YouTube.Twitch等大型企业纷纷将视线转投向HTML5,更加确认了HTML5在互联网时代的发展远景.随 ...
前端程序员发展必备工具
前言:整理了关于前端程序员所需要的资源,一起奋斗努力前端开发主要包括三大方面: 页面布局实现:基本的布局和美化(html,css) 数据逻辑操作渲染:js和前端框架组件或者模块化相连:moudle ...
【前端程序员的中秋节】中秋节，送你千盏孔明灯，万家灯火故事长
马上,中秋又要来了,如果按照往年的节奏,这会前端程序员或许正在赶着制作中秋主题的页面. 今天,借此机会,和大家分享一个使用纯 HTML + CSS + Javascript 制作中秋主题网页的代码.它 ...
初中级前端程序员面试中小型公司会问哪些问题?
初中级前端程序员面试中小型公司会问哪些问题?不同的公司面试内容也不尽相同,有的面试过程很轻松,有的面试官是个架构师level 挺高不会问八股文,给出了几个现实中的场景,然后转换成代码的逻辑去让实现. ...
前端程序员辞掉朝九晚五工作成为独立开发者一年开发出6款软件的故事
一个前端程序员的梦想作为一个程序员,陈明福的梦想是: 自主自由的工作内容和方式. 在全球范围内发展个人品牌和影响力. 学习技术和经验,成为 SaaS 软件方面的专家. 对世界产生积极影响. 财务自由 ...
前端程序员的职业发展规划与路线——ChatGPT的回答
文章目录一.前端程序员的职业规划是? 回答1: 作为一个前端开发程序员,您的职业发展路线可能如下: 回答2:作为前端开发程序员,您的职业发展路线可能如下: 回答3: 你的职业发展路线可能是这样的: ...

前端程序员用css动画给女朋友一个惊喜

成品

具体步骤

前端程序员用css动画给女朋友一个惊喜相关推荐

最新文章

热门文章