小编Yan*_*era的帖子

我只是在使用css进行一些加载,我希望它们有一个真实的行为,我正在尝试animation-timing-function: cubic-bezier(1, 0, 1, 1),看起来很好但不像我想的那样真实,起初因为我不知道cubic-bezier参数如何真正起作用,我找到了这个网站,只是和他们一起玩,直到我得到了一些不错的东西.

总结一下,如何在动画中添加真实的物理行为？

请仅使用CSS,如果不可能,欢迎使用JS解决方案.

这里有一个FIDDLE示例.

只是一个指导的建议

像定义的常量物理变量更少或者SCSS,或者你可以添加到函数中的值和物理行为的总和甚至可能已经模拟某些行为的mixins,我不知道简单而且只有CSS.

Thx提前

可以任何浏览器开发人员,或任何知道为什么如此难以(如果不是不可能)设置a的下拉列表样式的人<select>,可以使用任何"真正的解释"来阻止浏览器<select> <option>以更方便的方式处理它.

每次我看到如何修改下拉菜单的CSS等问题？在收到答案的不同网站中

"不可能设置html选择的下拉列表的样式.但是你可以构建自己的下拉列表或使用像bootstrap这样的框架."

要么

"如果您认为定制下拉列表绝对是一个好主意,那么您应该使用JavaScript".

我真的不知道为什么,我现在知道了<select>,我的意思是容器盒,可以使用更多样式

select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
}

然后给出我们的风格,这并不像所有人说的那么简单,因为我们必须做一些技巧才能做到正确,尤其是着名的垃圾箭头.

随着时间的推移,我们忽略了这样一个简单而舒适的<select>元素,几乎所有的开发人员都选择使用上面的一些答案,至少我仍然不知道为什么.

所以至少如果有人能帮助我,我将不胜感激.

全球问题：

我想根据父级的高度设置元素的宽度，我知道您可以padding-top根据父级的宽度设置高度，也许有人知道我的情况的技巧。

全局问题的一个可能的解决方案（技巧）是设置height: 100%元素，然后rotate(90deg)模拟它的宽度等于父级的高度，但这不适合我的情况。

具体问题（也许可以做一些解决方法）：

简化问题：

我想要一个具有宽度和高度 = x 的动态方形元素，其中 x = 父级的高度。

完整问题：

我想要这样的东西

其中 x = d / sqrt(2)（勾股定理）

所以你可以看到“d”是父母的身高，我试着用

.blue{
    background: #1AA9C8;
    width: 200px;
    height: 100px;
    position: relative;
    margin: 25px auto;
}

.blue:before{
    content: '';
    position: absolute;
    right: calc(100% - 36px);
    top: 15px;
    background: firebrick;    
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    height: calc(100% / 1.41);/*this worked because height depends on the parent's height (div.blue)*/
    width: 70.9px; /* calc(100% / 1.41) here …

element1 {
    height: calc(100% - 50px);
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -ms-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
}

element1:hover {
    height: calc(100% - 200px);
}

当我在高度属性中用px或替换calc时%,过渡工作正常,但是calc,只有从一个高度到另一个高度没有过渡.

在其他浏览器中它工作正常,问题只在IE中

添加代码和JSFiddle示例类似于我的实际情况.

div{
    position: fixed;
    right: 0;
    width: 250px;
    height: calc(100% - 200px);
    background: #1c8080;
    top: 158px;
    color: #fff;
    text-align: center;
    padding-top: 40px;
    font-size: 18px;
    border: 1px solid #000;
    
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;
}

div:hover{
    height: calc(100% - 100px);
    top: 58px;
} …

我试图将一个fixed元素放在另一个fixed元素中

<div class="wrapper-fixed">
    <div class="content">
        <div class="element-fixed">
            <p>I'm fixed in Chrome, FF</p>
            <p>Why not in IE ?</p>
        </div>
    </div>
</div>

当我滚动页面在Chrome和FF element-fixed的逗留fixed,但在IE它滚动太,我想这不应该发生,因为一个fixed元素是文档流之外.

我尝试将它拉出来content但没有工作,把它拉出来wrapper-fixed但是在我的情况下我做不到.

这里有一个类似于我的真实情况的JSFIDDLE

那么为什么会发生这种情况以及如何解决它而不将其拉出来 wrapper-fixed

添加图像来说明问题:

如何使堆叠顺序底部的堆叠上下文中包含的元素出现在堆叠顺序较高的不同堆叠上下文中的另一个元素的前面？

例如：

HTML：

<div class="Parent-1"></div>

<div class="Parent-2">

    <div class="pepe"></div>
    <div class="pepin"></div>

</div>

CSS：

.Parent-1{
    position: absolute;
    z-index: 10;
    background-color: green;
}

.Parent-2 {
    position: absolute;
    z-index: 5;
    background-color: red;
}

.pepe, .pepin{        
    background-color: blue;
}

.pepin{
    position: fixed;
    z-index: 100;
}

这就是我所拥有的（这就是应该发生的事情）：

这就是我要的：

请记住，我无法更改 HTML 中的元素顺序，也无法删除 Parent 元素中的 z-index

我是jsfiddle的新手,我尝试使用LESS,但我没有在语言选项中看到它,我怎样才能使它与LESS一起使用.

我尝试在外部资源中链接less.min.js,但都没有工作

请帮我.

EDIT1:

我正在证明一些较少的功能,我想要的是在jsfiddle上编译我的LESS,看看结果就在那里

我正在为我的网站制作页脚，我正在使用 flexbox 进行布局。这是我页脚的 CSS：

.footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 5vh;
  background-color: transparent;
  color: white;
  text-align: center;
}

它看起来像这样：

他们之间有很大的空间。我如何减少那个空间？

如果您需要更多信息，请发表评论。

谢谢！