1. Python技术站首页
  2. css

JS+CSS3制作炫酷的弹窗效果

• css

下面我将详细讲解“JS+CSS3制作炫酷的弹窗效果”的完整攻略。

1. 弹窗效果的实现思路

要实现弹窗效果，我们需要完成以下几个步骤：

  1. 创建一个弹窗，并设置其基本样式；
  2. 利用JavaScript控制弹窗的显示和隐藏；
  3. 利用CSS3动画效果（如transition和animation）来为弹窗添加过渡效果。

接下来，我将一步步详细讲解如何实现弹窗效果。

2. 创建基本样式

首先，我们需要创建一个基本样式。下面是一个简单的弹窗样式代码示例：

.popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  padding: 20px 30px;
  display: none;
}

.popup h2 {
  font-size: 18px;
  margin-bottom: 15px;
}

.popup .content {
  font-size: 16px;
  line-height: 1.5;
  color: #333;
}

.popup .btn-close {
  position: absolute;
  top: 10px;
  right: 10px;
  display: block;
  width: 20px;
  height: 20px;
  font-size: 20px;
  color: #333;
  text-align: center;
  line-height: 20px;
  cursor: pointer;
}

上面的代码创建了一个名为“popup”的样式，其中设置了弹窗的基本样式，如位置、背景色、阴影、圆角等。此外，还设置了一个按钮样式，用于关闭弹窗。

3. 控制弹窗的显示和隐藏

接下来，我们需要通过JavaScript来控制弹窗的显示和隐藏。下面是一个简单的代码示例：

const popup = document.querySelector('.popup');
const btnOpenPopup = document.querySelector('.open-popup');
const btnClosePopup = document.querySelector('.btn-close');

// 显示弹窗
const openPopup = () => {
  popup.style.display = 'block';
};

// 隐藏弹窗
const closePopup = () => {
  popup.style.display = 'none';
};

// 点击打开按钮时显示弹窗
btnOpenPopup.addEventListener('click', openPopup);

// 点击关闭按钮或弹窗外部时隐藏弹窗
btnClosePopup.addEventListener('click', closePopup);
popup.addEventListener('click', (e) => {
  if (e.target === popup) {
    closePopup();
  }
});

上面的代码监听了打开按钮和关闭按钮的点击事件，当点击打开按钮时，调用了“openPopup”函数来显示弹窗；而当点击关闭按钮或弹窗外部时，调用了“closePopup”函数来隐藏弹窗。

4. 添加过渡效果

最后，我们可以为弹窗添加过渡效果，让它看起来更炫酷。下面是一个简单的过渡效果代码示例：

.popup {
  /* 其他样式 */
  transition: opacity 0.3s ease-in-out; /* 添加过渡效果 */
}

.popup.fade-in {
  opacity: 1;
}

.popup.fade-out {
  opacity: 0;
}

上面的代码添加了一个名为“fade-in”的样式，用于在弹窗显示时过渡渐入；同时还添加了一个名为“fade-out”的样式，用于在弹窗隐藏时过渡渐出。

在JavaScript中，我们只需要在显示和隐藏弹窗的函数中，添加或删除“fade-in”和“fade-out”样式即可实现过渡效果：

// 显示弹窗，并添加过渡效果
const openPopup = () => {
  popup.classList.add('fade-in');
  popup.style.display = 'block';
};

// 隐藏弹窗，并添加过渡效果
const closePopup = () => {
  popup.classList.add('fade-out');
  setTimeout(() => {
    popup.classList.remove('fade-out');
    popup.classList.remove('fade-in');
    popup.style.display = 'none';
  }, 300);
};

上面的代码在“openPopup”和“closePopup”函数中，通过添加和删除“fade-in”和“fade-out”样式，来为弹窗添加过渡效果。

至此，我们就完成了“JS+CSS3制作炫酷的弹窗效果”的完整攻略。

5. 示例说明

下面是两个“JS+CSS3制作炫酷的弹窗效果”的示例说明。

示例一：透明度过渡效果

这个示例的弹窗特点是透明度过渡效果，在弹窗显示和隐藏时会有一个淡出淡入的过渡效果。下面是示例代码：

<!-- HTML -->
<div class="container">
  <button class="open-popup">打开弹窗</button>
  <div class="popup">
    <h2>这是一个弹窗</h2>
    <div class="content">
      这是弹窗的内容
    </div>
    <i class="btn-close">&times;</i>
  </div>
</div>

<!-- CSS -->
<style>
  .container {
    position: relative;
    height: 100%;
  }
  .open-popup {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 10px 20px;
    background-color: #fff;
    border: none;
    color: #333;
    cursor: pointer;
  }
  .popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    z-index: 9999;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    padding: 20px 30px;
    opacity: 0;
    display: none;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
  }
  .popup.fade-in {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  .popup.fade-out {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
  }
  .popup h2 {
    font-size: 18px;
    margin-bottom: 15px;
  }
  .popup .content {
    font-size: 16px;
    line-height: 1.5;
    color: #333;
  }
  .popup .btn-close {
    position: absolute;
    top: 10px;
    right: 10px;
    display: block;
    width: 20px;
    height: 20px;
    font-size: 20px;
    color: #333;
    text-align: center;
    line-height: 20px;
    cursor: pointer;
  }
</style>

<!-- JavaScript -->
<script>
  const popup = document.querySelector('.popup');
  const btnOpenPopup = document.querySelector('.open-popup');
  const btnClosePopup = document.querySelector('.btn-close');

  const openPopup = () => {
    popup.classList.add('fade-in');
    popup.style.display = 'block';
  };

  const closePopup = () => {
    popup.classList.add('fade-out');
    setTimeout(() => {
      popup.classList.remove('fade-out');
      popup.classList.remove('fade-in');
      popup.style.display = 'none';
    }, 300);
  };

  btnOpenPopup.addEventListener('click', openPopup);
  btnClosePopup.addEventListener('click', closePopup);
  popup.addEventListener('click', (e) => {
    if (e.target === popup) {
      closePopup();
    }
  });
</script>

示例二：旋转效果

这个示例的弹窗特点是旋转效果，在弹窗显示和隐藏时会有一个旋转的过渡效果。下面是示例代码：

<!-- HTML -->
<div class="container">
  <button class="open-popup">打开弹窗</button>
  <div class="popup">
    <h2>这是一个弹窗</h2>
    <div class="content">
      这是弹窗的内容
    </div>
    <i class="btn-close">&times;</i>
  </div>
</div>

<!-- CSS -->
<style>
  .container {
    position: relative;
    height: 100%;
  }
  .open-popup {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 10px 20px;
    background-color: #fff;
    border: none;
    color: #333;
    cursor: pointer;
  }
  .popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(180deg) scale(0);
    z-index: 9999;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    padding: 20px 30px;
    opacity: 0;
    display: none;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
  }
  .popup.fade-in {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
  }
  .popup.fade-out {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(180deg) scale(0);
  }
  .popup h2 {
    font-size: 18px;
    margin-bottom: 15px;
  }
  .popup .content {
    font-size: 16px;
    line-height: 1.5;
    color: #333;
  }
  .popup .btn-close {
    position: absolute;
    top: 10px;
    right: 10px;
    display: block;
    width: 20px;
    height: 20px;
    font-size: 20px;
    color: #333;
    text-align: center;
    line-height: 20px;
    cursor: pointer;
  }
</style>

<!-- JavaScript -->
<script>
  const popup = document.querySelector('.popup');
  const btnOpenPopup = document.querySelector('.open-popup');
  const btnClosePopup = document.querySelector('.btn-close');

  const openPopup = () => {
    popup.classList.add('fade-in');
    popup.style.display = 'block';
  };

  const closePopup = () => {
    popup.classList.add('fade-out');
    setTimeout(() => {
      popup.classList.remove('fade-out');
      popup.classList.remove('fade-in');
      popup.style.display = 'none';
    }, 300);
  };

  btnOpenPopup.addEventListener('click', openPopup);
  btnClosePopup.addEventListener('click', closePopup);
  popup.addEventListener('click', (e) => {
    if (e.target === popup) {
      closePopup();
    }
  });
</script>

通过示例，你可以学习到如何使用不同的样式和动画效果创建出不同样式的弹窗。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS+CSS3制作炫酷的弹窗效果 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • html的基本使用（HTML标签解释）

    下面是关于“html的基本使用（HTML标签解释）”的攻略： HTML的基本使用（HTML标签解释） HTML，全称为“Hyper Text Markup Language”，即超文本标记语言，是Web页面的基础语言，一个页面的总体结构、布局以及内容都是由HTML语言完成的。在HTML中，通过标签来对页面进行组织和定义。 HTML基本基础结构 HTML页面基…

    css 2023年6月9日
    00

  • 如何使用less实现随机下雪动画详解

    如何使用less实现随机下雪动画 简介 在前端界，实现各种各样的动画效果是很普遍的需求。其中，下雪动画是一种常见而又有趣的效果。本文将介绍如何使用less实现随机下雪动画效果。 实现 首先，我们需要使用HTML和CSS来描述下雪的效果，具体如下： <div class="snow-container"> <div cla…

    css 2023年6月11日
    00

  • CSS背景色渐变写法兼容ie6至ie9

    要在CSS中实现背景色渐变并且兼容IE6至IE9，需要使用filter属性。下面是详细的步骤： 在CSS样式表中定义需要设置背景色渐变的元素，为了更好的兼容性，建议设置background-color属性为一个默认的颜色。 .gradient{ width: 200px; height: 100px; background-color: #F7F7F7; /…

    css 2023年6月9日
    00

  • 详解CSS3新增的背景属性

    来详细讲解一下CSS3新增的背景属性的完整攻略。 背景属性 在CSS3中，我们新增了很多有用的背景属性，包括 background-clip、background-origin、background-size 等。接下来我会对这些属性依次进行介绍。 background-clip background-clip 控制背景图片的绘制区域。默认情况下，背景图片会…

    css 2023年6月9日
    00

  • CSS 选择所有子元素添加样式的方法

    当需要为某个元素下的所有子元素添加样式时，可以使用CSS通配符和后代选择器共同实现。具体步骤如下： 步骤一：通过后代选择器选中父元素 在CSS文件中使用后代选择器来选中父元素，语法格式为”父元素 子元素”。例如，如果想为body元素下的所有子元素添加样式，可以这样写： body * { /* 添加的样式代码 */ } 在上述代码中，body *的意思是选中b…

    css 2023年6月9日
    00

  • js模拟3D场景效果代码打包

    我来为您详细讲解“js模拟3D场景效果代码打包”的完整攻略。 什么是JS模拟3D场景效果？ JavaScript模拟3D场景效果就是通过JS代码实现一个3D场景，让用户在浏览器中感受到3D的效果。 实现JS模拟3D场景的方法 实现JS模拟3D场景一般有两种方法： 1. 使用CSS 3D Transforms CSS 3D Transforms是CSS3的一个…

    css 2023年6月10日
    00

  • JavaScript访问CSS属性的几种方式介绍

    好的。让我们来详细讲解下题目所提到的“JavaScript访问CSS属性的几种方式介绍”。 什么是JavaScript访问CSS属性 在现代的Web开发中，CSS是非常重要的一部分，它负责控制网页的样式和布局。在一些情况下，我们可能需要在JavaScript代码中访问CSS属性，例如获取某个元素的宽度、高度、颜色等信息，或者修改某个元素的样式。 JavaSc…

    css 2023年6月10日
    00

  • 超链接点击移动至上方以及点击过的css效果设置

    下面是关于“超链接点击移动至上方以及点击过的css效果设置”的完整攻略。 点击移动至上方 我们可以通过CSS来实现点击链接后，移动到链接上方的效果。具体实现方法如下： 首先，我们需要给链接的CSS添加一个:hover伪类，用来设置链接在鼠标悬浮时的样式。 a:hover{ position: relative; top: -1px; } 接下来，我们要通过给…

    css 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部