• 凉风有兴,秋月无边, 亏我思娇的情绪好比度日如年。
  • 虽然我不是玉树临风,潇洒倜傥, 可是我有我广阔的胸襟,加强健的臂腕!

——YC,你学到了吗?——学到了学到了

网站推广 villain 2个月前 (01-08) 63次浏览 未收录 0个评论

又是周末了,想着开始我的每周一切(每周做一次从切图到静态网页布局的练习)任务吧,无意间看了看别人的页面,发现——我去,这个动画挺有意思的啊,怎么实现的?然后翻代码+搜索,啊,原来是插件啊~给我的也用上!

animate.css,可实现多种动画功能!

使用方法见http://www.jq22.com/jquery-info819

然后我又发现,动画是实现了,可是一加载页面,从上到下动画一股脑全完事了,不对啊,别人是滚到到哪动画在哪开始,再找原因!这里有个wow.js是干嘛的?一查——

wow.js,依赖animate.css,可实现滚动动画!而且很轻量级!

使用方法见http://www.dowebok.com/131.html

看来是不能闭门造车啊,要学的东西还是很多的,而且上面这两个都是支持自己定制的。

后来又想,我这个人主页做的是不是有点简陋啊,不能因为喜欢紫色,就整个页面全是紫色啊,来个图片是不是好点?OK,加个图片!可是。。页面一缩小,图片不能覆盖整个浏览器窗口了,怎么办?这么简单的问题,肯定得找CSS啊,原来:

background-size: cover;把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。要的就是这个!

W3school要多看啊!

http://www.w3school.com.cn/cssref/pr_background-size.asp

后来给女朋友看了看,说你可不可以让这个背景图固定,不跟着滚动啊,我一想,这效果倒是经常见到,自己还没用过呢,查!

background-attachment: fixed;当页面的其余部分滚动时,背景图像不会移动。GET!

把这个和背景图放在body里,妥妥的的实现这个要求!

多学多看多想!前端还是挺有意思的!继续学习!

我的简陋主页:https://zhangcuizc.github.io/


Villain博客 , 版权所有丨如有问题请联系客服QQ:1004619丨
转载请注明——YC,你学到了吗?——学到了学到了
喜欢 (0)
[gqakcom@126.com]
分享 (0)

您必须 登录 才能发表评论!