如何沿着其宽度移动块（仅限css）

问题描述：

你的问题是完全不清楚。请详细说明。 – Santi

您可能想要添加更多的代码并解释您正在尝试执行的操作。你有什么不足以帮助你解决特定的问题 – CodeLikeBeaker

什么阻止？设置一个快速jsfiddle，伙计。帮助我们帮助你。 –

答

简单的例子，纯CSS：

.mytext { 
 
    border: 8px black solid; 
 
    text-align: center; 
 
    font-size: 45px; 
 
    left: 300px; 
 
    width: inherit; 
 
    height: 60px; 
 
    transition: 2s; 
 
    -webkit-transition: 2s; 
 
    -moz-transition: 2s; 
 
    position: absolute; 
 
} 
 

 
.mytext:hover { 
 
    left: 0; 
 
} 
 

 

 
.mytext2 { 
 
\t margin-top: 100px; 
 
    border: 8px black solid; 
 
    text-align: center; 
 
    font-size: 45px; 
 
    width: 300px; 
 
    height: 60px; 
 
    transition: 2s; 
 
    -webkit-transition: 2s; 
 
    -moz-transition: 2s; 
 
    position: absolute; 
 
} 
 

 

 
@keyframes slideToLeft { 
 
    0% { 
 
    transform: translateX(100%); 
 
    } 
 
    100% { 
 
    transform: translateX(0); 
 
    } 
 
} 
 

 
.mytext2 { 
 
    /* This section calls the slideInFromLeft animation we defined above */ 
 
    animation: 2s ease-out 0s 1 slideToLeft; 
 
}

<div class="mytext">text</div> 
 
<div class="mytext2">text2</div>

你正确理解我想要什么，但是我不需要js – MaximPro

@MaximPro试试更新一个？ –

@MaximPro，如果任何答案可以帮助你[投它]（http://meta.stackexchange.com/questions/173399/how-to-upvote-on-stack-overflow），如果答案是你在找什么将其标记为 [Correct answe]（http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work）为未来的读者。谢谢！ –

如何沿着其宽度移动块（仅限css）

相关推荐