发帖
扫码访问
 注册
 登录
首页 ›资讯› 生活 › 查看内容

神级程序员用40行代码向女友求婚成功，网友：求源码

2017-6-21 00:59 |来自: 互联网 3436 3

摘要: 今天刚来上班逛下论坛，看到了一位浪漫程序员用代码向女朋友求婚，小编我也运行了下他分享的代码，挺有意思的今天就分享给大伙了，源码文末有领取地址。谁说程序员只是个敲代码的，浪漫起来分分钟让女朋友欲罢不能。 ...

今天刚来上班逛下论坛，看到了一位浪漫程序员用代码向女朋友求婚，小编我也运行了下他分享的代码，挺有意思的今天就分享给大伙了，源码文末有领取地址。谁说程序员只是个敲代码的，浪漫起来分分钟让女朋友欲罢不能。

这里推荐下我自己建的前端群：593757064，不管你是小白还是大牛，小编我都挺欢迎，不定期分享干货，包括2017最新的前端企业案例学习资料和零基础入门教程，欢迎初学和进阶中的小伙伴。

首先放张效果图

然后一步步分析一下

首先是刚出现的新郎的动画

里面用到的知识点：

  • animation：是一个简写属性，用于设置六个动画属性

  • animation-name 规定需要绑定到选择器的 keyframe 名称

  • animation-duration 规定完成动画所花费的时间，以秒或毫秒计

  • animation-timing-function 规定动画的速度曲线

  • animation-delay 规定在动画开始之前的延迟

  • animation-iteration-count 规定动画应该播放的次数

  • animation-direction 规定是否应该轮流反向播放动画

  • keyframes：让开发者通过指定动画中特定时间点必须展现的关键帧样式（或者说停留点）来控制CSS动画的中间环节。这让开发者能够控制动画中的更多细节而不是全部让浏览器自动处理

  • transform 向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜

然后是那朵花的css

文字部分的css

文字边烟花的效果

最后几束花的效果

源码领取地址：

  1. 这个浪漫求婚案例到这里就做结束了，想要完整代码自己学习练手的小伙伴进我的群自助领取，已经上传到群文件里了：593757064，欢迎初学和进阶中的小伙伴。

如果想看到更加系统的文章和学习方法经验可以关注我的微信公众号：‘web前端课程’关注后回复‘给我资料’可以领取一套完整的学习视频

本文出处： http://www.toutiao.com/a6432130314760618242/
声明：文章版权归原作者所有 部分文章转自互联网 如有侵权请联系 [邮箱地址] 删除

路过
雷人
握手
鲜花
鸡蛋
收藏 分享 邀请
上一篇：美女4小时挖300斤生蚝 川式爆炒征服丹麦朋友下一篇：《大黄蜂》8月开拍 《变形金刚6》确定2019年暑假上映
发表评论

最新评论 查看全部评论(3)

相关分类

返回顶部