CSS从右向左过渡

waxmsbnn 于 2022-12-27 发布在其他

关注(0)|答案(1)|浏览(134)

a { color: #000; text-decoration: none; }
a.button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;

    overflow: hidden;

    padding: 8px;

    border: 1px solid #ccc;
    border-radius: 8px;

    background: #eee;

    transition: .2s;

    .material-icons {
        font-size: 24px;

        transition: .2s;
    }

    .label-hidden {
        max-width: 0;
        opacity: 0;

        max-height: 1em;
        white-space: nowrap;

        transition: .2s;
    }

    &:hover {
        .label-hidden {
            max-width: 200px;

            margin-left: 8px;
            opacity: 1;
        }
    }
}

<a class="button button-small"
   target="_blank" rel="noopener noreferrer"
   href={ "https://www.google.com/maps/search/" + it["Station Name"] }>
  <i class="material-icons">map</i>
  <span class="label-hidden">Show location</span>
</a>

我想应用CSS到我的项目，并使用下面的链接动画过渡。example在这过渡从左向右移动，但我想从右向左过渡。
任何解决方案都将有所帮助
先谢了。

css

来源：https://stackoverflow.com/questions/74918913/css-transition-from-right-to-left

1条答案

按热度按时间

u3r8eeie1#

你是说像这样？？

.wrapper {
    text-align: center;
    }
    
a { 
   color: #000; 
   text-decoration: none; 
   }
   
a.button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background: #eee;
    transition: .2s;
}

.material-icons {
    font-size: 24px;
    transition: .2s;
}

.label-hidden {
    max-width: 0;
    opacity: 0;
    max-height: 1em;
    white-space: nowrap;
    transition: .2s;
    
}

a.button:hover .label-hidden {
     max-width: 300px;
     margin-left: 8px;
     opacity: 1;
}

a.button:hover {max-width: 200px;}

/* SAMPLE 2 CSS */

.wrapper2 {
    text-align: center;
    }
    
a { color: #000; 
    text-decoration: none; 
    }
    
a.button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background: #eee;
    transition: .2s;
    max-width: 50px;
}

.material-icons {
    font-size: 24px;
    transition: .2s;
}

.label-hidden2 {
    max-width: 0;
    opacity: 0;
    max-height: 1em;
    white-space: nowrap;
    transition: .2s;
    display: none;
}

a.button1:hover .label-hidden2 {
     position: fixed;
     opacity: 1;
     left: 25%;
     display: inline;
}

a.button1:hover { 
    padding-left:135px;
    margin-right:130px;
    }

<!-- SAMPLE 1  -->
<div class="wrapper">
<a class="button button-small"
   target="_blank" rel="noopener noreferrer"
   href={ "https://www.google.com/maps/search/" + it["Station Name"] }>
  <span class="label-hidden">Show location</span>
  <i class="material-icons">map1</i>
  
</a>
</div>
<br />
<!-- SAMPLE 2  -->

<div class="wrapper2">
<a class="button button-small button1"
   target="_blank" rel="noopener noreferrer"
   href={ "https://www.google.com/maps/search/" + it["Station Name"] }>
     
  <i class="material-icons"><span class="label-hidden2">Show location</span>map2</i>
  
  
</a>
</div>

赞(0）回复(0）举报 2022-12-27

我来回答

CSS从右向左过渡

1条答案

相关问题

热门标签

最新问答