css 鼠标经过图片缓慢切换图片、鼠标离开缓慢还原

weixin_30764771

于 2019-07-20 12:14:00 发布

阅读量845

点赞数 1

CC 4.0 BY-SA版权

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/jiangfeilong/p/11217299.html

本文介绍了如何使用CSS实现两种过渡效果：一是使背景图片在圆形div内进行切换；二是控制内部div元素实现上下移动的视觉效果。通过:hover伪类触发状态改变，并结合transition属性平滑过渡。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

https://blog.youkuaiyun.com/qq_26780317/article/details/80486766

一.控制背景图片在一个圆形div内切换

.header .logo {
    width: 54px;
    height: 54px;
    margin:23px 0;
    text-align: center;
    border-radius: 54px;
    background: url("/static/images/icon/logo.png");
    border: #e38d13 solid;

    transition: all 0.6s;

}

    /* logo 水平反转 */
.header .logo:hover {
    background-position: -54px 0;

}

二.控制div中的div上下切换

#user-operate .btn{
    margin-top: 0px;
    margin-left: -5px;
    transition: all 0.6s;
}

#user-operate .btn:hover {
  margin-top: -25px;
}

转载于:https://www.cnblogs.com/jiangfeilong/p/11217299.html