css - 清理可重复的 CSS 代码
问题描述
我从这里的另一个线程得到了这段代码。但是,我觉得好像我没有有效地重用 CSS。如何进一步削减/减少 CSS 代码?
感觉就像我重复关键帧的方式太多了。另外,我不确定为什么要使用循环,但是当我删除它时它不能正常工作。
PS:在演示中,你只能看到十、三十和九十。我将在实际的生产代码中添加二十、四十、五十等。
演示:https ://jsfiddle.net/dg0L9cw7/1/
#speedometer {
display: inline-block;
position: relative;
}
#speedometer .barometer {
background-image: url("https://svgshare.com/i/GAZ.svg");
background-repeat: no-repeat;
width: 200px;
height: 110px;
display: inline-block;
}
#speedometer .needle {
background-image: url("https://svgshare.com/i/GBP.svg");
background-repeat: no-repeat;
z-index: 999999;
width: 200px;
height: 110px;
display: inline-block;
left: 0px;
position: absolute;
bottom: 5px;
transform-origin: 50% calc(100% - 8px);
}
#speedometer .needle.ten {
animation: changeTen 3s linear, loopTen 1s linear 3s infinite alternate;
}
@keyframes changeTen {
0% {
transform: rotate(-90deg);
}
100% {
transform: rotate(-60deg);
}
}
@keyframes loopTen {
0% {
transform: rotate(-60deg);
}
100% {
transform: rotate(-60deg);
}
}
#speedometer .needle.thirty {
animation: changeThirty 3s linear, loopThirty 1s linear 3s infinite alternate;
}
@keyframes changeThirty {
0% {
transform: rotate(-90deg);
}
100% {
transform: rotate(-30deg);
}
}
@keyframes loopThirty {
0% {
transform: rotate(-30deg);
}
100% {
transform: rotate(-30deg);
}
}
#speedometer .needle.ninety {
animation: changeNinety 3s linear, loopNinety 1s linear 3s infinite alternate;
}
@keyframes changeNinety {
0% {
transform: rotate(-90deg);
}
100% {
transform: rotate(80deg);
}
}
@keyframes loopNinety {
0% {
transform: rotate(80deg);
}
100% {
transform: rotate(80deg);
}
}
<div id="speedometer">
<span class="barometer"></span>
<span class="needle ten"></span>
</div>
<div id="speedometer">
<span class="barometer"></span>
<span class="needle thirty"></span>
</div>
<div id="speedometer">
<span class="barometer"></span>
<span class="needle ninety"></span>
</div>
解决方案
使用 CSS 变量。您还可以将标记减少到仅一个元素:
.speedometer {
display: inline-block;
background-image: url("https://svgshare.com/i/GAZ.svg");
width: 200px;
overflow:hidden;
}
.speedometer:before {
content:"";
background-image: url("https://svgshare.com/i/GBP.svg");
height: 110px;
display: block;
margin-bottom: 5px;
transform-origin:50% calc(100% - 8px) ;
animation: change 3s linear forwards;
backface-visibility: hidden;
}
@keyframes change {
0% { transform:rotate(-90deg); }
100% { transform:rotate(var(--r,90deg)); }
}
<div class="speedometer" style="--r:-60deg;">
</div>
<div class="speedometer" style="--r:-30deg;">
</div>
<div class="speedometer" style="--r:80deg;">
</div>
您还可以使用一些计算使变量更友好。在下面我正在考虑 percetange 所以范围内的值[0 100]
.speedometer {
display: inline-block;
background-image: url("https://svgshare.com/i/GAZ.svg");
width: 200px;
overflow:hidden;
}
.speedometer:before {
content:"";
background-image: url("https://svgshare.com/i/GBP.svg");
height: 110px;
display: block;
margin-bottom: 5px;
transform-origin:50% calc(100% - 8px) ;
animation: change 3s linear forwards;
backface-visibility: hidden;
}
@keyframes change {
0% { transform:rotate(-90deg); }
100% { transform:rotate(calc(1.8deg*var(--p) - 90deg)); }
}
<div class="speedometer" style="--p:40;">
</div>
<div class="speedometer" style="--p:20;">
</div>
<div class="speedometer" style="--p:80;">
</div>
推荐阅读
- ios - 将键与 iOS swift 4 中的字典数组进行比较
- javafx - 浮动表格列
- javascript - SoapUI/Groovy - 如何在同一个 dom 中复制具有新名称的节点?
- jquery - SlickGrid 通过 HTML 元素使用 jQuery 获取网格实例
- java - 使用动态参数通过反射调用方法
- tfs - 在发布 TFS 中发布文件
- json - 如何从servlet中的json获取数据
- regex - pylint 错误地将常量名称识别为 C0103 不符合 const-rgx 表达式
- bash - 将替代字符从小写更改为大写,从大写更改为低 - Unix shell 脚本
- c - 格式化字符串漏洞,覆盖变量