我正在尝试使用velocity和calc()函数为元素的宽度设置动画.
$("#menuContainer").velocity({width: "calc(100% + -260px)"}, 500);
这会将元素的宽度设置为0.
有没有办法在@supports(propertyName,value)中使用calc函数？我的意思是只在calc函数的位置.<supports_condition>
@supports ( <supports_condition> ) {
.col-3 {
width: calc(25% - 20px/4)
}
.col-4 {
width: calc(33.3333333% - 20px/3)
}
.col-6 {
width: calc(50% - 20px/2)
}
}
有人可以用Calc()css 描述使用吗？什么是~标志意义Calc()？
以下代码如何计算？
calc(~'(100% - 4 * 23.233%) / 3')
I know you can write a power function in Sass with a loop. Is there one specifially in CSS? Or a way to write one?
我一直在使用calc()CSS属性,我有一个疑问:
.main {
display: block;
margin-left: 4rem;
width: (100% - nav);
background: red;
}
nav {
position: fixed;
top: 0;
left: 0;
width: 4rem;
height: 100vh;
background: #292929;
border-right: 1px solid rgba(255, 255, 255, 0.1);
}
就像你在代码中看到的那样我试图减去100%- WIDTH它是rem响应模式的导航,但显然它不起作用,有什么方法可以做到这一点？
我正在尝试制作一个小动画，但我无法使其响应，因为“calc()”似乎不适用于 .animate。这里有其他解决方案吗？
if (time == 1) {
$("#message").animate({ marginTop: "calc(-15px + .8vw)" });
} else {
$("#message").animate({ marginTop: "calc(0px + .8vw)" });
}
谨此致以最诚挚的问候，伯纳多
编辑：我正在尝试为出现在我的网站 onchange() 下拉菜单上的消息制作动画。它应该是响应式的，这就是我使用 calc() 的原因。
<a>Time: </a><select id="time" onchange="setTime()" name="time" required>
<option value="1" selected>-</option>
<option value="3">-</option>
</select></br>
那么，是否有一种替代方法可以使其在没有 calc() 的情况下以另一种方式响应？
请帮我找出为什么 CSS 变量中的算术运算会破坏代码。
我从一个带有一个规则的简单 CSS 文件开始：
html {
font: 16px/32px Arial;
}
在浏览器中，它是这样写的：字体大小为 16px，行高为 32px，字体本身为 Arial。
然后我添加了变量：
html {
--default-font-size: 16px;
--default-line-height: var(--default-font-size);
font: var(--default-font-size)/var(--default-line-height) Arial;
}
它也有效；认为行高是 16px，因为我让它等于字体大小。
但是当我乘以第二个值时，字体声明停止工作：
html {
--default-font-size: 16px;
--default-line-height: var(--default-font-size) * 2;
font: var(--default-font-size)/var(--default-line-height) Arial; /* not working! */
}
所有属性font-size、line-height和font-family都设置为浏览器默认值。
如果我将font速记属性拆分为三个不同的速记属性，则代码再次正常工作：
html {
--default-font-size: 16px;
--default-line-height: var(--default-font-size) * 2;
font-size: var(--default-font-size);
line-height: var(--default-line-height);
font-family: Arial;
}
前面的代码示例有什么问题，有没有办法让它在不拆分成普通属性的情况下工作？
我正在尝试calc()在使用CSS Grid时使用某些宽度.所以我正在尝试的一件事是:
grid-template-columns: calc(1fr - 50px) calc(1fr - 50px);
因为我希望它是两个分数,但删除50px,因为它用于填充等.但是,在执行此操作时,Chrome会说:"无效的属性值".
不能calc()用于分数,或者我在这里做错了什么？
我有如下的 CSS 函数：
width: min(calc(100vw - 51rem), calc(100vh - 2rem));
它在使用 CSS 文件时工作正常，但在 SASS 中使用时则不然。如何为 SASS 重写此函数？
我想要实现的是，通过将颜色值与子索引相乘，每个子项的颜色都与前一个项不同（结果将类似于渐变）。
伪代码：
.parent > div:nth-child() {
background-color: rgb(index * 10, 255, 255);
}