CSS3悬停不透明度缓入缓出效果？
CSS3悬停不透明度缓入缓出效果？
提问于 2016-12-11 08:18:38
有没有更好更简单的方法来写下面的不透明缓入淡出效果？
CSS：
.button-hover {
font-family: arial black;
font-size: 100px;
color: #000;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
opacity: 1;
}
.button-hover:hover {
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
opacity: 0.5;
}正如您所看到的，我重复了这两行代码，这看起来并不理想：
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;HTML：
<div class="container">
<a href="#" class="button-hover">HOVER ME</a>
</div>回答 3
Stack Overflow用户
回答已采纳
发布于 2016-12-11 08:41:26
不要重复转换规则。 CSS pre-processors可以帮助添加供应商前缀，但您真的不需要(也不应该)在:hover中重复转换声明。只需在元素的默认状态中设置一次，如下所示：
.button-hover {
font-family: arial black;
font-size: 100px;
color: #000;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
opacity: 1;
}
.button-hover:hover {
opacity: 0.5;
}<div class="container">
<a href="#" class="button-hover">HOVER ME</a>
</div>
Stack Overflow用户
发布于 2016-12-11 08:30:59
& 可以让这一切变得简单。你可以使用SASS & LESS Mixins来实现这一点。
示例(SASS):
/* Create a Mixin (SASS) */
@mixin transition($property, $time, $method) {
-webkit-transition: $property $time $method;
-moz-transition: $property $time $method;
-ms-transition: $property $time $method;
-o-transition: $property $time $method;
transition: $property $time $method;
}
/* Include this Mixin (SASS) */
.button-hover:hover {
@include transition(opacity, 1s, ease-in-out);
}示例(更少)：
/* Create a Mixin (LESS) */
.transition(@property, @time, @method) {
-webkit-transition: @arguments;
-moz-transition: @arguments;
-ms-transition: @arguments;
-o-transition: @arguments;
transition: @arguments;
}
/* Include this Mixin (LESS) */
.button-hover:hover {
.transition(opacity, 1s, ease-in-out);
}这将转换为CSS
.button-hover:hover {
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}更多关于、的信息
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41084228
复制相关文章
相似问题
腾讯云开发者
