怎么给html设置一个花落的背景效果

怎么给html设置一个花落的背景效果,第1张

为html标签设置背景图片,花落的那个你需要使用一个大的gif图片

html {

background: url(图片地址) 0 0 no-repeat

}

html爱心特效代码改花瓣颜色的方法如下:

1、获取花瓣,所有调色条,以及用来显示rgb值的div盒子。

2、给花瓣循环绑定点击事件,这里需要一个匿名的自调用函数来储存i的值,不然事件绑定不上,i值会变为最终长度值。

3、利用"排他思想"循环遍历将所有花瓣的selected类名去掉,然后给当前点击的花瓣添加被选中的类名"selected"将边框变为虚线,表示被选中。

4、下面一个for循环同样利用了匿名的自调用函数存储i值,然后给所有的调色条绑定input事件。

5、判断一下是否有被选中的元素,通过判断之后获取带有selected类名的花瓣,然后将其背景颜色改为三个input输入的value值,最后将三个rgb值渲染到显示rgb值的div盒子中,这样一个彩色花瓣的效果就完成了。

因为花括号并不代表任何的内容,浏览器只会解析HTML中的<>标签,只有Javascript、json等会被浏览器解析

如果是自己做的Javascript函数则需要自己检查错误的地方,方法:将解析函数复制到控制台运行测试


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6198450.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-17
下一篇 2023-03-17

发表评论

登录后才能评论

评论列表(0条)

保存