甜蜜的警报

如果你是程序员，并且正在开发需要“警报”功能的应用程序，那么你一定想让这个警报变得“甜蜜”一些。因此，我们为你准备了一份“甜蜜的警报”！

主要特点

• 带有可定制的甜蜜音乐
• 可设置警报时长
• 支持自动关闭功能
• 自适应不同分辨率的屏幕
• 显示甜蜜的图标和动画效果

使用方法

HTML

<div id="sweet-alert">
  <div class="sa-icon sa-success">
    <span class="sa-line sa-tip"></span>
    <span class="sa-line sa-long"></span>
    <div class="sa-placeholder"></div>
    <div class="sa-fix"></div>
  </div>
  <div class="sa-icon sa-custom">
    <span class="sa-line sa-tip"></span>
    <span class="sa-line sa-long"></span>
    <div class="sa-placeholder"></div>
    <div class="sa-fix"></div>
  </div>
  <div class="sa-icon sa-custom up">
    <span class="sa-line sa-convert"></span>
    <span class="sa-line sa-convert-stroke"></span>
  </div>
  <div class="sa-content">
    <h2>甜蜜警报！</h2>
    <p>这是一段甜蜜的提示信息。</p>
  </div>
  <audio id="sweet-music" src="sweet.mp3"></audio>
</div>

CSS

#sweet-alert {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  text-align: center;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

#sweet-alert .sa-icon,
#sweet-alert .sa-content {
  display: inline-block;
  vertical-align: middle;
}

#sweet-alert .sa-icon {
  width: 80px;
  height: 80px;
  margin-right: 20px;
}

#sweet-alert .sa-icon.sa-success {
  border-color: #97e472;
}

#sweet-alert .sa-icon.sa-custom {
  position: relative;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 55px 95px 55px;
  border-color: transparent transparent #fff transparent;
  margin-right: 20px;
}

#sweet-alert .sa-icon.sa-custom .sa-line {
  position: absolute;
  width: 15px;
  height: 3px;
  background-color: #fff;
  display: block;
}

#sweet-alert .sa-icon.sa-custom .sa-line.sa-tip {
  top: 45px;
  left: 12px;
  transform: rotate(-45deg);
}

#sweet-alert .sa-icon.sa-custom .sa-line.sa-long {
  top: 60px;
  left: 4px;
  transform: rotate(45deg);
}

#sweet-alert .sa-icon.sa-custom up {
  position: absolute;
  top: -45px;
  left: 0;
  right: 0;
  margin: auto;
}

#sweet-alert .sa-icon.sa-custom up .sa-line.sa-convert,
#sweet-alert .sa-icon.sa-custom up .sa-line.sa-convert-stroke {
  position: absolute;
  width: 10px;
  height: 2px;
  background-color: #fff;
  display: block;
  border-radius: 1px;
}

#sweet-alert .sa-icon.sa-custom up .sa-line.sa-convert {
  top: 5px;
  left: 15px;
  transform: rotate(90deg);
  animation: sa-convert-line 0.5s 0.8s forwards;
}

#sweet-alert .sa-icon.sa-custom up .sa-line.sa-convert-stroke {
  top: 5px;
  left: 15px;
  transform: rotate(90deg);
  animation: sa-convert-line-stroke 0.5s 0.8s forwards;
}

#sweet-alert .sa-content h2 {
  margin-top: 0;
  margin-bottom: 10px;
}

#sweet-alert .sa-content p {
  margin-top: 0;
  margin-bottom: 20px;
}

#sweet-alert .sa-btn {
  display: inline-block;
  background-color: #97e472;
  color: #fff;
  text-decoration: none;
  padding: 10px 30px;
  border-radius: 5px;
  transition: background-color 0.3s;
}

#sweet-alert .sa-btn:hover {
  background-color: #76c553;
}

#sweet-alert.show {
  display: block;
  animation: sa-show 0.3s forwards ease-in-out;
}

#sweet-alert.hide {
  display: none;
}

#sweet-alert.hide.show {
  animation: sa-hide 0.3s forwards ease-in-out;
}

@keyframes sa-show {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes sa-hide {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes sa-convert-line {
  0% { opacity: 0; transform: rotate(90deg); }
  100% { opacity: 1; transform: rotate(0deg); }
}

@keyframes sa-convert-line-stroke {
  0% { opacity: 0; transform: rotate(0deg); }
  100% { opacity: 1; transform: rotate(90deg); }
}

JavaScript

(function() {
  var sweetAlert = document.getElementById('sweet-alert');
  var sweetMusic = document.getElementById('sweet-music');

  function showSweetAlert() {
    sweetAlert.classList.add('show');
    sweetMusic.play();
  }

  function hideSweetAlert() {
    sweetAlert.classList.remove('show');
    sweetMusic.pause();
    sweetMusic.currentTime = 0;
  }

  document.getElementById('show-sweet-alert').addEventListener('click', function() {
    showSweetAlert();
    setTimeout(function() {
      hideSweetAlert();
    }, 5000);
  });

  document.getElementById('hide-sweet-alert').addEventListener('click', function() {
    hideSweetAlert();
  });
})();

如何定制

你可以通过更改样式表和 JavaScript 代码中的样式和事件来定制“甜蜜的警报”的外观和功能。同时，你还可以根据你的需要添加更多的特性和效果。