昨儿逛空间看见别人主页飘着星星特效,手痒自己也折腾了个漂浮物效果。给大家念叨念叨怎么搞的,特简单,别被代码吓着!
第一步:偷师学艺
直接按F12打开人家空间扒代码,结果一堆乱码看得眼晕。干脆打开记事本新建个空白文件,后缀改成.html,这就搭好戏台子了。
第二步:搭架子
先敲个基础框框进去:
- 写上<body>
- 画个<div>盒子当舞台
- 塞一堆<img>标签当飘浮物素材
直接从相册拽了几张表情包当素材,省得现找。放素材的文件夹得记好位置,不然等下代码找不到图!
第三步:让图片飞起来
这儿最关键:在<style>里搞动画效果。瞎试半天定位参数,总算摸出门道:
- 给每个图片加position:absolute;让它们乱飘
- 用animation设置动画时长
- 随手调了个跳跳糖似的弹跳轨迹
改数值改得眼冒金星:调成2秒飘太快像抽风,10秒又慢得像乌龟爬,卡在5秒勉强能看。
第四步:魔改特效
见着代码起效就来劲儿了:
- 把图片换成荧光棒
- 给飘浮物加旋转效果
- 随手复制了十几层代码,让满屏幕飘素材
结果旋转速度没调动态壁纸配上转圈表情包,直接给我看吐了...老老实实改回匀速旋转。
最终效果
把代码整个复制到空间自定义样式栏,刷新那瞬间——好家伙!满屏表情包跟醉汉似的飘来飘去!虽然被朋友吐槽像垃圾场飘塑料袋...但咱要的不就是这DIY成就感嘛
现在点进我主页就能看见满屏飘的熊猫头,下次试试让文字也飘起来(要是搞不崩空间的话)!