html+css双开门特效

阿湘zs

于 2024-02-21 09:08:51 发布

阅读量426

点赞数 8

分类专栏： css 文章标签： html css 前端

本文链接：https://blog.csdn.net/qq_55491577/article/details/136202855

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

效果图：

看代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: '微软雅黑';
      font-size: 25px;
      font-weight: 600;
    }
    .container {
      width: 500px;
      height: 350px;
      background-color: #fff;
      display: flex;
      overflow: hidden;
      position: relative;
      margin: 20px auto;
      transition: 1s;
    }
    .title {
      width: 100%;
      height: 45px;
      position: absolute;
      transform: translateY(-100%);
      background-color: transparent;
      text-align: center;
      line-height: 45px;
      padding: 0 15px;
      transition: 0.8s;
      text-overflow: ellipsis;
      overflow: hidden;
      word-break: break-all;
      white-space: nowrap;
    }
    .left {
      width: calc(500px / 2);
      height: 100%;
      background-color: hotpink;
      color: #6bcbf1;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: 0.5s;
      z-index: 1;
    }
    .right {
      width: calc(500px / 2);
      height: 100%;
      background-color: #6bcbf1;
      color: hotpink;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: 0.5s;
      z-index: 1;
    }
    .container:hover {
      background-color: skyblue;
    }
    .container:hover .title {
      transform: translateY(calc(350px / 2 - 45px / 2));
    }
    .container:hover .left {
      transform: translateX(-100%);
    }
    .container:hover .right {
      transform: translateX(100%);
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="title">新年快乐</div>
    <div class="left">恭喜</div>
    <div class="right">发财</div>
  </div>
</body>
</html>