本文主要是介绍css 自定义属性和雪花飘落效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
原文链接: css 自定义属性和雪花飘落效果
上一篇: css resize属性将div变成可以拖动修改大小配合object-fit实现图片大小适应的效果
下一篇: css 伪类 transform transition实现一个比较好看的下划线过渡效果
最近看到一个雪花的效果, 里面用到了自定义属性, 学习了
https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties
自定义变量可以在父节点定义在子节点使用, 所以一般在根节点定义, 然后在所有节点都能使用了
优先级也遵循最近原则, 下面是用js修改css变量, 一开始是蓝色, 后面会变成绿色
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>:root {--main-bg-color: deepskyblue;}.box {width: 100px;height: 100px;background: var(--main-bg-color);}</style></head><body><div class="box" id="box"></div></body><script>setTimeout(() => {const box = document.getElementById("box")console.log(box.style.getPropertyValue("--main-bg-color"))box.style.setProperty("--main-bg-color", "green")}, 1000)</script>
</html>
主要思想是准备三张图片, 分别作为前景和后景这样就有了六个div, 每两个前景和背景的div合成一组, 每次下落一个div的高度后重置, 这样就有了无限循环的效果
每个div都有自己的动画执行时间和延时, 混合在一起就造成了下雪的错觉 ~
前景的学下的快, 延时小, 后景的下的慢, 延时大
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>@keyframes falling {0% {transform: translate3D(-7.5%, -100%, 0);}to {transform: translate3D(7.5%, 100%, 0);}}body {background: deepskyblue;}.app__snow {overflow: hidden;position: absolute;top: 0;right: 0;bottom: 0;left: 0;pointer-events: none;z-index: 5000;}.snow__level {position: absolute;top: 0;right: 0;bottom: 0;left: 0;animation: falling linear infinite both;transform: translate3D(0, -100%, 0);}.snow__level--near {animation-duration: var(--s-near);background-image: url(./near.png);background-size: contain;}.snow__level--near + .snow__level--alt {animation-delay: calc(var(--s-near) / 2);}.snow__level--mid {animation-duration: var(--s-mid);background-image: url(./mid.png);background-size: contain;}.snow__level--mid + .snow__level--alt {animation-delay: calc(var(--s-mid) / 2);}:root {--s-near: 10s;--s-mid: calc(var(--s-near) * 2);--s-far: calc(var(--s-near) * 3);--ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);}.snow__level--far {animation-duration: var(--s-far);background-image: url(./far.png);background-size: contain;}.snow__level--far + .snow__level--alt {animation-delay: calc(var(--s-far) / 2);}</style></head><body><div class="app__snow snow"><div class="snow__level snow__level--near"></div><div class="snow__level snow__level--near snow__level--alt"></div><div class="snow__level snow__level--mid"></div><div class="snow__level snow__level--mid snow__level--alt"></div><div class="snow__level snow__level--far"></div><div class="snow__level snow__level--far snow__level--alt"></div></div></body>
</html>
这篇关于css 自定义属性和雪花飘落效果的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
