我有一个元素,当它的内容发生变化时,它的宽度我想要动画.它有宽度:自动,这永远不会改变.我见过
this trick,但这是为了在两个值之间转换而设置一个.我根本没有操纵值,只是内容,我希望我的元素大小随着动画而改变.这在CSS中完全可能吗?
这是我的代码的简化版本:
.myspan { background-color: #ddd; } .myspan:hover::after { content: "\00a0\f12a"; font-family: Ionicons; font-size: 80%; }
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/> <html> <body> <span class="myspan">Hello!</span> </body> </html>
当用户将鼠标悬停在元素上时,我希望将大小更改为动画.
解决方法
正如我评论的那样,使用“max-width”/“max-height”技巧.
给它一个足够大的值来容纳最宽的.
.myspan { display: inline-block; font-size: 30px; background-color: #ddd; vertical-align: bottom; } .myspan::after { content: " \00a0\f12a "; font-family: ionicons; font-size: 80%; display: inline-block; max-width: 0; transition: all 1s; vertical-align: bottom; overflow: hidden; } .myspan:hover::after { max-width: 80px; transition: all 1s; }
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" /> <span class="myspan">Hello!</span>
原文地址:https://www.jb51.cc/css/215243.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。