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;
  bac.........完整代码请登录后点击上方下载按钮下载查看