[ 妙用css ]：用css变量解决开发实际问题

各位看官，如何实现以上这种方块的移动，相信对于大家来说并不陌生，无非是几个步骤

1.设置动画
2.进行移动
3.动画循环

<div class="f-box"><div class="box"></div>
</div>
<style> .f-box{border: 1px solid gray;width: 300px;height: 100px;
}
.box{width: 100px;height:100px;background-color: aqua;animation: move 3s infinite;
}
@keyframes move {50%{transform: translateX(calc(300px - 100%)); }
} </style> 

一个简单的移动模块就实现了，但是我们设置的transform: translateX(calc(300px - 100%)); ,这里的300px如果是一个不固定的值，此处我想改为父元素的宽度，但如果不巧的是，父元素的宽度是不固定的会有什么问题。

遇到的问题

这里我对父元素的宽度设置为80% 那么我的move动画中就不知道应该设置多大的宽度了 大部分人到这个地方会考虑使用js代替css的方法来进行书写，但是我们可以通过js计算父元素宽度再放到css中的方式来修改，可能效率会更高一些。

.f-box{border: 1px solid gray;width: 80%;height: 100px;
}
.box{width: 100px;height:100px;background-color: aqua;animation: move 3s infinite;
}
@keyframes move {50%{`transform: translateX(calc(？？？ - 100%)); `}
} 

使用var函数

var()函数可以代替元素中任何属性中的值的任何部分

我们可以在:root上定义，然后再其他地方使用，其实也可以定义在任意的元素上

:root {--main-bg-color: pink;
}

body {background-color: var(--main-bg-color);
} 

所以我们需要做的有几个步骤

1.使用Js获取父元素宽度
2.将父元素宽度绑定到任意元素上
3.进行设置动画的时候通过var获取父元素宽度

<style> @keyframes move {50%{/* 希望这个地方能改成父元素的宽度 但父元素的宽度不是固定的 *//* transform: translateX(父元素宽度 - 100%);*/transform: translateX(calc(var(--w) - 100%)); }} </style>
<script > let f = document.querySelector('.f-box')console.log(f.clientWidth)f.style.setProperty('--w',`${f.clientWidth}px`) </script> 

如图我设置了一个--w的属性，包含了父元素的值，我们可以在控制台中查看效果

通过js+css的方式可以轻松的对父元素的值设置到动画中进去

最后效果

最后

为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。



有需要的小伙伴，可以点击下方卡片领取，无偿分享