首页 前端知识 【css】使用css实现提示框各种弹出效果。

【css】使用css实现提示框各种弹出效果。

2024-02-06 15:02:38 前端知识 前端哥 410 252 我要收藏

简言

最近工作编写页面时,需要有一个提示框从下到上弹出的效果。
冥想了一下,实现了出来。
记录下实现思路。

实现思路

实现步骤如下:

  1. 编写样式。
    首页要有承载内容的容器(box)。外层在套一个包装盒子(用来进行定位和样式定义)。
    在这里插入图片描述
  2. 触发弹出效果逻辑。
    我这里是鼠标移上去,显示内容,触发弹出效果。实际应用时可能是其他触发方式。
  3. 弹出效果的实现。
    利用css的transition和transform实现
  4. 封装成组件。
    可以把相关属性或关键操作提出来,封装成可配置的组件。

编写样式 和触发逻辑

<!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>
    .wrapper {
      position: relative;
      min-width: 10px;
      min-height: 10px;
      width: 400px;
      height: 200px;
      min-height: 10px;
      margin-left: calc(50% - 100px);
      margin-top: 100px;
      border-radius: 50px 20px 50px 20px;
      background-color: skyblue;
    }

    .box {
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: 100%;
      height: 100%;
      cursor: pointer;
      border-radius: inherit;
      background-color: #666;
    }

    .wrapper:hover .box {
      transform: translate(0, 0);
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <div class="box">文字显示区域巴拉巴拉。。。</div>
  </div>
</body>

</html>

鼠标移上去触发弹出效果。
在这里插入图片描述

设计弹出效果

弹出效果利用css的transition和transform实现。
transform对显示内容盒子(box)进行变换。
transition 让变换呈现动画效果。

例如:
先默认让box往下移高100%和往右移宽100%;
鼠标移入时,再回到原位置。

.box{
transform: translate(100%, 100%);
transition: 0.5s ease all;
}
.wrapper:hover .box {
      transform: translate(0, 0);
    }

效果则是 显示内容区域从右下往右上弹出效果:

请添加图片描述
wrapper去掉背景色,并且添加overflow: hidden;后效果:
请添加图片描述

封装成组件

可以把触发方式、transform弹出效果、transition动画样式、时长等等关键属性提出来,封装成可配置的组件。
赶快试试吧。

结语

完整代码。

<!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>
    .wrapper {
      position: relative;
      min-width: 10px;
      min-height: 10px;
      width: 400px;
      height: 200px;
      min-height: 10px;
      margin-left: calc(50% - 100px);
      margin-top: 100px;
      border-radius: 50px 20px 50px 20px;
      /* background-color: skyblue; */
      overflow: hidden;
    }

    .box {
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: 100%;
      height: 100%;
      transform: translate(100%, 100%);
      transition: 0.5s ease all;
      cursor: pointer;
      border-radius: inherit;
      background-color: #666;
    }

    .wrapper:hover .box {
      transform: translate(0, 0);
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <div class="box">文字显示区域巴拉巴拉。。。</div>
  </div>
</body>

</html>
转载请注明出处或者链接地址:https://www.qianduange.cn//article/1429.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!