过渡缓和，从右到左，如何

缓和通常从左到右移动，现在我想将其更改为从右到左如何在我的 CSS 中设置它？

例：

transition:         background-position 150ms ease-out;
-moz-transition:    background-position 150ms ease-out;
-webkit-transition: background-position 150ms ease-out;
-o-transition:      background-position 150ms ease-out;

转换属性没有默认方向。ease-out只是一个过渡时序函数：

从规范：

transition-timing-function属性描述了如何将计算过渡期间使用的中间值。它允许过渡在其持续时间内改变速度。这些效果通常称为缓动函数。无论哪种情况，a 使用提供平滑曲线的数学函数。

background-position转换的方向取决于第一个和最后一个值。

例如：

.box {
    /* other styles here... */
    background-image: url(http://lorempixel.com/500/300);
    transition: background-position 150ms ease-out;
}
/* Move the background image from right to left */
.box.rtl { background-position: 0 center; }
.box.rtl:hover { background-position: 100% center; }
/* Move the background image from left to right */
.box.ltr { background-position: 100% center; }
.box.ltr:hover { background-position: 0 center; }

工作演示。

也许你可以尝试这样的事情：

<html>
<head>
<style> 
div {
    float: right;
    width: 100px;
    height: 100px;
    background: red;
    transition: width 2s;
    transition-timing-function: linear;
    text-align: center;
}
div:hover {
    width: 300px;
}
body {
    width: 500px;
    border: solid black 1px;
}
</style>
</head>
<body>
<div>sample</div>
</body>
</html>

通过将div 浮动到右侧

，您将从右侧开始您的div。当它扩展时，它将向左扩展。

这是使用过渡的简单左右滑动 CSS。

<!DOCTYPE html>
        <html>
        <head>
        <title>Page Title</title>
    
        <style>
        .parent{
        display:flex;
        overflow:hidden;
        }
        .red,.blue,.green,.orange{
        min-width:300px;
        height:300px;
        margin:10px;
        position:relative;
        left:0;
        }
        .d-none{
         display:none;
        }
        .red{
         background-color:red;
        }
    
        .blue{
    
        background-color:blue;
        }
    
        .green{
        background-color:green;
        }
    
        .orange{
        background-color:orange;
        }
        </style>
        </head>
        <body>
    
        
        <div id="parent"class="parent">
        <div class="red"></div>
        <div class="blue"></div>
        <div class="green"></div>
        <div class="orange"></div>
        <div class="red"></div>
        <div class="blue"></div>
        <div class="green"></div>
        <div class="orange"></div>
        <div class="red"></div>
        <div class="blue"></div>
        <div class="green"></div>
        <div class="orange"></div>
        </div>
        <button onclick="next()">next</button>
        <button onclick="prev()">prev</button>
        <script>
         let left="0";
         let parent = document.getElementById("parent")
         let children = Array.from(parent.children)
         
         function next(){
           left = left - 320
           children.forEach(child=>{
           child.style.left = left+"px"
           child.style.transition = "all 500ms ease-in-out"
           })
         }
         
          function prev(){
          left = left + 320
         children.forEach(child=>{
           child.style.left = left+"px"
           child.style.transition = "all 500ms ease-in-out"
    
           })
              
         }
         
        </script>
        </body>
        </html>

这

很简单，就像你从左到右的过渡一样，
如果你想从右到左过渡，只需在你设置Div（ect）样式时使用float:right;。

相关内容

最新更新

热门标签：