h5的overlay popover属性实现弹出层效果代码-html代码-BFW代码库

h5的overlay popover属性实现弹出层效果代码

代码语言：html

所属分类：弹出层

代码描述：h5的overlay popover属性实现弹出层效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>
  <meta charset="UTF-8">
  
  
  
  
<style>
html {
  font-family: system-ui, sans-serif;
}

[popover]:popover-open {
  offset-distance: 0%;
  opacity: 1;
}

/* Needs to be included after the previous [popover]:popover-open
   rule to take effect, as the specificity is the same */
@starting-style {
  [popover]:popover-open {
    offset-distance: 100%;
    opacity: 0;
  }
}
[popover] {
  offset-rotate: 0deg;
  offset-path: path("M 250,100 S -300,500 -700,-200");
  font-size: 1.2rem;
  padding: 2em;
  border-radius: 0.5em;
  /* Final state of the exit animation */
  offset-distance: 100%;
  opacity: 0;
  overlay: none;
  transition: opacity 1s, transform 0.7s, overlay 1s allow-discrete, display 1s allow-discrete, offset-distance 1s;
}

/* Transition for the popover's backdrop */
[popover]::backdrop {
  background-color: #f3d060;
  opacity: 0;
  transition: opacity 0.8s allow-discrete, display 0.8s allow-discrete, overlay 1s allow-discrete, background 0.7s;
}

[popover]:popover-open::backdrop {
  background-color: #f3d060;
  opacity: 1;
}

/* Nesting selectors (&) cannot represent pseudo-elements, so this 
   starting-style rule cannot be nested. */
@starting-style {
  [popover]:popover-open::backdrop {
    background-color: #f3d060;
    opacity: 0;
  }
}
button {
  font-family: system-ui, sans-serif;
  font-size: 2rem;
  padding: 0.3em 0.5em;
  border-radius: 0.5rem;
  border-color: #eee;
  background-color: #f3d060;
  margin: 0.5em;
}

body {
  min-height: 100vh;
  margin: 0;
  background-color: #f9f6ef;
}

.note {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50%;
  z-index: 99999;
  background-color: #ee7762;
  font-size: 2rem;
  padding: 1em;
  border-radius: 0.4em;
}
.note a {
  color: #fff;
  text-decoration-color: #a5282c;
  text-shadow: 0.1em 0.1em 0.1em #0003;
}

.box {
  width: 60vw;
  height: 70vh;
  position: absolute;
  top: 30%;
  left: 40%;
  z-index: 999;
  border-top-left-radius: 1em;
  background-color: #5EB0E5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='599' height='299.5' viewBox='0 0 1600 800'%3E%3Cpath fill='%23F3D060' d='M1102.5 734.8c2.5-1.2 24.8-8.6 25.6-7.5.5.7-3.9 23.8-4.6 24.5C1123.3 752.1 1107.5 739.5 1102.5 734.8zM1226.3 229.1c0-.1-4.9-9.4-7-14.2-.1-.3-.3-1.1-.4-1.6-.1-.4-.3-.7-.6-.9-.3-.2-.6-.1-.8.1l-13.1 12.3c0 0 0 0 0 0-.2.2-.3.5-.4.8 0 .3 0 .7.2 1 .1.1 1.4 2.5 2.1 3.6 2.4 3.7 6.5 12.1 6.5 12.2.2.3.4.5.7.6.3 0 .5-.1.7-.3 0 0 1.8-2.5 2.7-3.6 1.5-1.6 3-3.2 4.6-4.7 1.2-1.2 1.6-1.4 2.1-1.6.5-.3 1.1-.5 2.5-1.9C1226.5 230.4 1226.6 229.6 1226.3 229.1zM33 770.3C33 770.3 33 770.3 33 770.3c0-.7-.5-1.2-1.2-1.2-.1 0-.3 0-.4.1-1.6.2-14.3.1-22.2 0-.3 0-.6.1-.9.4-.2.2-.4.5-.4.9 0 .2 0 4.9.1 5.9l.4 13.6c0 .3.2.6.4.9.2.2.5.3.8.3 0 0 .1 0 .1 0 7.3-.7 14.7-.9 22-.6.3 0 .7-.1.9-.3.2-.2.4-.6.4-.9C32.9 783.3 32.9 776.2 33 770.3z'/%3E%3Cpath fill='%23AEE1CD' d='M171.1 38.........完整代码请登录后点击上方下载按钮下载查看