前端效果-css+javascript-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_46199553/article/details/128682149

这两段HTML和CSS代码展示了如何创建一个响应式的图片滑动效果。当鼠标悬停在包含两个半部分背景图片的容器上时，左侧图片向左滑出，右侧图片向右滑入，营造出平滑的过渡动画。

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

1.双开门

在这里插入图片描述
1.方法1

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box{
            width: 1366px;
            height: 600px;
            margin: 0 auto;
            background: url("./images/bg.jpg");
            overflow: hidden;
        }
        .left{
            float: left;
            width: 50%;
            height: 600px;
            background: url("./images/fm.jpg");
            transition: all .5s;
        }
        .right{
            float: left;
            width: 50%;
            height: 600px;
            background: url("./images/fm.jpg") right 0;
            transition: all .5s;
        }
        .box:hover .left{
            transform: translate(-100%);
        }
        .box:hover .right{
            transform: translate(100%);
        }

    </style>
</head>

<body>
<div class="box">
    <div class="left"></div>
    <div class="right"></div>
</div>
</body>

</html>

2.方法2

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 1366px;
            height: 600px;
            margin: 0 auto;
            background: url('./images/bg.jpg');
            overflow: hidden;
        }
        
        .box::before,
        .box::after {
            float: left;
            content: '';
            width: 50%;
            height: 600px;
            background-image: url(./images/fm.jpg);
            transition: all .5s;
        }

        .box::after {
            background-position: right 0;
        }

        /* 鼠标移入的时候的位置改变的效果 */
        .box:hover::before {
            transform: translate(-100%);
        }

        .box:hover::after {
            transform: translateX(100%);
        }
    </style>
</head>

<body>
    <div class="box">

    </div>
</body>

</html>

打字机效果

<template>
  <div class="pageContent flex jc-cl-center">
    <div class="typing">后台管理系统欢迎你</div>
  </div>
</template>

<script>
export default {
  name: "firstPage"
}
</script>

<style lang="less" scoped>
@keyframes typing {
  from { width: 0}
}
@keyframes blink-caret {
  50% { border-color: transparent; }
}
.typing {
  width: 400px;
  border-right: 1px solid black;
  white-space: nowrap;
  overflow: hidden;
  animation: typing 5s steps(28, end),
  blink-caret .5s step-end infinite alternate; //这里的alternate是为了让光标闪烁的正常一点
  font-size: 40px;
}
.pageContent{
   height: 100%;
}
</style>

在这里插入图片描述