HTML 5 CSS 3 & JavaScript 实现用按钮播放视频功能cid1065-网页前端设计

作者code

html and css

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Playmorph</title>
  6. <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/TweenMax.min.js"></script>
  7. <style>
  8. body {
  9. display: flex;
  10. justify-content: center;
  11. align-items: center;
  12. height: 100vh;
  13. margin: 0;
  14. background-image: url(active-adult-asian-1033374.jpg);
  15. background-size:cover;
  16. overflow: hidden;
  17. }
  19. .play-button {
  20. width: 152px;
  21. height: 152px;
  22. position: relative;
  23. cursor: pointer;
  24. }
  26. .play-backdrop {
  27. width: 100%;
  28. height: 100%;
  29. position: fixed;
  30. left: 0;
  31. top: 0;
  32. background-image: url(beautiful-girl-model-157131.jpg);
  33. opacity: 0;
  34. background-size: cover;
  35. visibility: hidden;
  36. }
  38. .play-close {
  39. width: 30px;
  40. height: 30px;
  41. position: absolute;
  42. right: 0;
  43. bottom: calc(100% + 15px);
  44. border: none;
  45. outline: none;
  46. background: deepskyblue;
  47. opacity: 0;
  48. cursor: pointer;
  49. }
  51. .play-close::before,
  52. .play-close::after {
  53. content: "";
  54. display: block;
  55. width: 100%;
  56. height: 1px;
  57. position: absolute;
  58. top: 50%;
  59. left: 0;
  60. transform: rotate(45deg);
  61. background-color: white;
  62. border-radius: 50px;
  64. }
  66. .play-close::after {
  67. transform: rotate(-45deg);
  68. color:black;
  69. }
  71. .play-circles {
  72. display: block;
  73. width: 100%;
  74. height: 100%;
  75. }
  77. .play-perspective {
  78. width: 600px;
  79. height: 400px;
  80. position: absolute;
  81. left: -230px;
  82. top: -125px;
  83. }
  85. .play-triangle {
  86. width: 600px;
  87. height: 400px;
  88. background-color:deepskyblue;
  89. cursor: pointer;
  90. }
  93. </style>
  94. </head>
  95. <body>
  96. <div class="play-backdrop"></div>
  97. <div class="play-button">
  98. <svg class="play-circles" viewBox="0 0 152 152">
  99. <circle class="play-circle-01" fill="none" stroke="#fff" stroke-width="3" stroke-dasharray="343" cx="76" cy="76" r="72.7"/>
  100. <circle class="play-circle-02" fill="none" stroke="#fff" stroke-width="3" stroke-dasharray="309" cx="76" cy="76" r="65.5"/>
  101. </svg>
  102. <div class="play-perspective">
  103. <button class="play-close"></button>
  104. <div class="play-triangle">
  105. <div class="play-video">
  106. <iframe width="600" height="415" src="https://www.youtube.com/embed/9w2JLO7A-Os" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
  107. </div>
  108. </div>
  109. </div>
  110. </div>
  111. <script>
  112. TweenMax.set(".play-circle-01", {
  113. rotation: 90,
  114. transformOrigin: "center"
  115. })
  117. TweenMax.set(".play-circle-02", {
  118. rotation: -90,
  119. transformOrigin: "center"
  120. })
  122. TweenMax.set(".play-perspective", {
  123. xPercent: 6.5,
  124. scale: .175,
  125. transformOrigin: "center",
  126. perspective: 1
  127. })
  129. TweenMax.set(".play-video", {
  130. visibility: "hidden",
  131. opacity: 0,
  132. })
  134. TweenMax.set(".play-triangle", {
  135. transformOrigin: "left center",
  136. transformStyle: "preserve-3d",
  137. rotationY: 10,
  138. scaleX: 2
  139. })
  141. const rotateTL = new TimelineMax({ paused: true })
  142. .to(".play-circle-01", .7, {
  143. opacity: .1,
  144. rotation: '+=360',
  145. strokeDasharray: 456,
  146. ease: Power1.easeInOut
  147. }, 0)
  148. .to(".play-circle-02", .7, {
  149. opacity: .1,
  150. rotation: '-=360',
  151. strokeDasharray: 411,
  152. ease: Power1.easeInOut
  153. }, 0)
  155. const openTL = new TimelineMax({ paused: true })
  156. .to(".play-backdrop", 1, {
  157. opacity: .95,
  158. visibility: "visible",
  159. ease: Power2.easeInOut
  160. }, 0)
  161. .to(".play-close", 1, {
  162. opacity: 1,
  163. ease: Power2.easeInOut
  164. }, 0)
  165. .to(".play-perspective", 1, {
  166. xPercent: 0,
  167. scale: 1,
  168. ease: Power2.easeInOut
  169. }, 0)
  170. .to(".play-triangle", 1, {
  171. scaleX: 1,
  172. ease: ExpoScaleEase.config(2, 1, Power2.easeInOut)
  173. }, 0)
  174. .to(".play-triangle", 1, {
  175. rotationY: 0,
  176. ease: ExpoScaleEase.config(10, .01, Power2.easeInOut)
  177. }, 0)
  178. .to(".play-video", 1, {
  179. visibility: "visible",
  180. opacity: 1
  181. }, .5)
  184. const button = document.querySelector(".play-button")
  185. const backdrop = document.querySelector(".play-backdrop")
  186. const close = document.querySelector(".play-close")
  188. button.addEventListener("mouseover", () => rotateTL.play())
  189. button.addEventListener("mouseleave", () => rotateTL.reverse())
  190. button.addEventListener("click", () => openTL.play())
  191. backdrop.addEventListener("click", () => openTL.reverse())
  192. close.addEventListener("click", e => {
  193. e.stopPropagation()
  194. openTL.reverse()
  195. })
  200. </script>
  201. </body>
  202. </html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Playmorph</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/TweenMax.min.js"></script> 
    <style>
    body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-image: url(active-adult-asian-1033374.jpg);
        background-size:cover;
  overflow: hidden;
}

.play-button {
  width: 152px;
  height: 152px;
  position: relative;
  cursor: pointer;
}

.play-backdrop {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background-image: url(beautiful-girl-model-157131.jpg);
  opacity: 0;
    background-size: cover;
  visibility: hidden;
}

.play-close {
  width: 30px;
  height: 30px;
  position: absolute;
  right: 0;
  bottom: calc(100% + 15px);
  border: none;
  outline: none;
  background: deepskyblue;
  opacity: 0;
  cursor: pointer;
}

.play-close::before,
.play-close::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: rotate(45deg);
  background-color: white;
    border-radius: 50px;
    
}

.play-close::after {
  transform: rotate(-45deg);
  color:black;
}

.play-circles {
  display: block;
  width: 100%;
  height: 100%;
}

.play-perspective {
  width: 600px;
  height: 400px;
  position: absolute;
  left: -230px;
  top: -125px;
}

.play-triangle {
  width: 600px;
  height: 400px;
  background-color:deepskyblue;
  cursor: pointer;
}

    
    </style>
</head>
<body>
    <div class="play-backdrop"></div>
<div class="play-button">
  <svg class="play-circles" viewBox="0 0 152 152">
    <circle class="play-circle-01" fill="none" stroke="#fff" stroke-width="3" stroke-dasharray="343" cx="76" cy="76" r="72.7"/>
    <circle class="play-circle-02" fill="none" stroke="#fff" stroke-width="3" stroke-dasharray="309" cx="76" cy="76" r="65.5"/>
  </svg>
  <div class="play-perspective">
    <button class="play-close"></button>
    <div class="play-triangle">
      <div class="play-video">
        <iframe width="600" height="415" src="https://www.youtube.com/embed/9w2JLO7A-Os" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
      </div>
    </div>
  </div>
</div>
<script>
    TweenMax.set(".play-circle-01", {
  rotation: 90,
  transformOrigin: "center"
})

TweenMax.set(".play-circle-02", {
  rotation: -90,
  transformOrigin: "center"
})

TweenMax.set(".play-perspective", {
  xPercent: 6.5,
  scale: .175,
  transformOrigin: "center",
  perspective: 1
})

TweenMax.set(".play-video", {
  visibility: "hidden",
  opacity: 0,
})

TweenMax.set(".play-triangle", {
  transformOrigin: "left center",
  transformStyle: "preserve-3d",
  rotationY: 10,
  scaleX: 2
})

const rotateTL = new TimelineMax({ paused: true })
  .to(".play-circle-01", .7, {
    opacity: .1,
    rotation: '+=360',
    strokeDasharray: 456,
    ease: Power1.easeInOut
  }, 0)
  .to(".play-circle-02", .7, {
    opacity: .1,
    rotation: '-=360',
    strokeDasharray: 411,
    ease: Power1.easeInOut
  }, 0)

const openTL = new TimelineMax({ paused: true })
  .to(".play-backdrop", 1, {
    opacity: .95,
    visibility: "visible",
    ease: Power2.easeInOut
  }, 0)
  .to(".play-close", 1, {
    opacity: 1,
    ease: Power2.easeInOut
  }, 0)
  .to(".play-perspective", 1, {
    xPercent: 0,
    scale: 1,
    ease: Power2.easeInOut
  }, 0)
  .to(".play-triangle", 1, {
    scaleX: 1,
    ease: ExpoScaleEase.config(2, 1, Power2.easeInOut)
  }, 0)
  .to(".play-triangle", 1, {
    rotationY: 0,
    ease: ExpoScaleEase.config(10, .01, Power2.easeInOut)
  }, 0)
  .to(".play-video", 1, {
    visibility: "visible",
    opacity: 1
  }, .5)


const button = document.querySelector(".play-button")
const backdrop = document.querySelector(".play-backdrop")
const close = document.querySelector(".play-close")

button.addEventListener("mouseover", () => rotateTL.play())
button.addEventListener("mouseleave", () => rotateTL.reverse())
button.addEventListener("click", () => openTL.play())
backdrop.addEventListener("click", () => openTL.reverse())
close.addEventListener("click", e => {
  e.stopPropagation()
  openTL.reverse()
})

    
    
    
</script>
</body>
</html>

在线演示

让链接同时具备两种打开方式
获取源码: Drive Download 20200402T141206Z 001
下载数:84人次, 文件大小: 85.4 KB, 上传日期: 2020年-11 月-26日

公众号回复:gcode  获取解压密码

qrcode_for_gh_6ea2c28a1709_258 (1)

2,508 人查阅

类似文章