问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

CSS样式，鼠标移入改变图片。

头像
yanxao
    791415

    鼠标移入图片换为第二张图片，第二张图片从下向上滑动。鼠标移出，第二张图片向下滑动露出第一张图片。图片描述

    csshtml5
    阅读 9.9k
    3 个回答
    得票最新
    头像
    xaobi
      89
      ✓ 已被采纳

      仅使用css实现背景图片切换并滑动

      逻辑：运用雪碧图把两张图片合并为一张图片，使用transition和background-position两个属性实现滑动切换.

      demo：http://runjs.cn/detail/btbjrwwr

      头像
      小深刻的秋鼠
        30114

        我随手写了一个，题主可以看看实现思路
        另外题主要学会用搜索引擎，这种搜索一大把

        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .cansee {
            width: 300px;
            height: 400px;
            margin: 0 auto;
            border: 1px solid #000;
            overflow: hidden;
        }
        #img1 {
            width: 300px;
            height: 400px;
            background-color: red;
        }
        #img2 {
            width: 300px;
            height: 400px;
            background-color: blue;
        }
        .box {
            transition: all 1s ease-in-out;
        }
        .box:hover{
            transform: translateY(-50%);
        }
    </style>
</head>
<body>
    <div class="cansee">
        <div class="box">
            <div id="img1"></div>
            <div id="img2"></div>
        </div>
    </div>
</body>
</html>
        头像
        棕旨
          565
          //html
<div class="box">
    <img class="img1"/>
    <img class="img2"/>
</div>
          //css
        .box{
            width: 300px;
            height: 800px;
        }
        .img1 {
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .img2 {
            width: 200px;
            height: 200px;
            background-color: blue;
            transition: all 1s ease-in-out;
        }
        .box:hover
            .img2{
            transform: translateY(-100%);
        }
          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题