react实现红包雨抢红包效果代码
代码语言:html
所属分类:红包
代码描述:react实现红包雨抢红包效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> div { margin: 0; padding: 0; } @-webkit-keyframes heartBeat { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1.05); } } @keyframes heartBeat { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1.05); } } @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes zoomIn { from { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } @keyframes zoomIn { from { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } @-webkit-keyframes tada { 0, 10%, 20% { transform: rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { transform: rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { transform: rotate3d(0, 0, 1, -3deg); } to { transform: scale3d(1, 1, 1); } } @keyframes tada { 0, 10%, 20% { transform: rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { transform: rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { transform: rotate3d(0, 0, 1, -3deg); } to { transform: scale3d(1, 1, 1); } } html, body { padding: 0; margin: 0; width: 100%; height: 100%; } #app { width: 100%; height: 100%; background-image: url(//repo.bfw.wiki/bfwrepo/image/5de084d231193.png); } .countdown { position: absolute; z-index: 1; text-align: center; font-size: 14px; color: #fff; display: flex; width: 100%; margin-top: 50px; flex-direction: column; align-items: center; font-weight: 600; line-height: 24px; } .countdown .count { font-size: 24px; color: #FFB800; font-weight: 700; } .hongBaoWrap { position: absolute; z-index: 2; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 100px); } .hongBaoWrap .hongBao { position: relative; background: #db2647; border-radius: 8px; width: 146px; height: 215px; text-align: center; overflow: hidden; } .hongBaoWrap .hongBao.toda { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-name: tada; animation-name: tada; } .hongBaoWrap .hongBao.active { -webkit-animation-duration: 0.1s; animation-duration: 0.1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: heartBeat; animation-name: heartBeat; } .hongBaoWrap .hongBao .cover { position: absolute; z-index: 1; border-radius: 50%; background: #FE2C55; width: 365px; height: 300px; bottom: 65px; left: 0; transform: translateX(-109.5px); background: linear-gradient(to left, #fb3b4a 0, #fb4162 50%, #fb3b4a 100%); box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2); } .hongBaoWrap .hongBao .content { position: absolute; z-index: 2; left: 0; text-align: center; width: 100%; padding-top: 20px; } .hongBaoWrap .hongBao .content .title { color: #FFF0CD; font-size: 14px; line-height: 24px; font-weight: 800; } .hongBaoWrap .hongBao .content .count { height: 30px; color: #FFF0CD; font-size: 30px; line-height: 30px; font-size: 40px; margin-top: 32px; font-weight: 900; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .hongBaoWrap .hongBao .btn { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; display: block; width: 56px; height: 56px; font-size: 24px; line-height: 56px; color: #FB3D64; font-weight: 800; border-radius: 50%; position: absolute; z-index: 1; bottom: 35px; left: 50%; transform: translateX(-50%); background: radial-gradient(50% 50% at 50% 50%, #FFD76F 0%, #FFE5A3 100%); box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2); } .hongBaoWrap .hongBao .btn .border { position: absolute; z-index: 1; top: 2px; left: 2px; width: 52px; height: 52px; border: 1px solid #FFB800; box-sizing: border-box; border-radius: 50%; } .trailer { width: 400px; height: 430px; position: absolute; z-index: 1; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; background-image: url(//repo.bfw.wiki/bfwrepo/images/hongbao/hognbaoyu.png); background-repeat: no-repeat; background-size: cover; } .trailer.active .count { -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-name: zoomIn; animation-name: zoomIn; } .trailer .count { display: inline-block; font-size: 60px; font-weight: bold; margin-top: 285px; background: linear-gradient(0deg, #ff7300, #fadf00); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } </style> </head> <body> <!-- partial:index.partial.html --> <div id="app"></div> <!-- partial --> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react.production.16.13.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-dom.production.16.13.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/classnames.2.3.1.js"></script> <script> "use strict"; const base64Url = '//repo.bfw.wiki/bfwrepo/images/hongbao/hongbao.png'; const { useState, useRef, useEffect, useCallback } = React; const classnames = classNames; function useInterval(fn, delay, options) { const immediate = options === null || options === void 0 ? void 0 : options.immediate; const fnRef = useRef(fn); fnRef.current = fn; useEffect(() => { if (typeof delay !== 'number' || delay <= 0) return; if (immediate) { fnRef.current(); } const timer = setInterval(() => { fnRef.current(); }, delay); return () => { clearInterval(timer); }; }, [delay]); } function getRandom(min, max) { if (min > max) { [min, max] = [max, min]; } const num = Math.random() * (max - min) + min; return Number(num.toFixed(2)); } function loadImage(url) { return new Promise((resolve, reject) => { let img = new Image(); img.src = url; img.onload = () => resolve(img); img.onerror = () => reject(new Error("load image error!")); }); } const velX = 1.8; // 水平速度(每帧) const velRatio = Math.tan(60 * Math.PI / 180); // 垂直速度/水平速度 const config = { maxScale: 2, baseWidth: 50, baseHeight: 50, velX: velX, velY: velX * velRatio, // 垂直方向移动速度 }; const area = 120 * 120; // 红包占位,控制红包雨密度 class Drop { constructor(img, canvasRef) { this.canvasRef = canvasRef; const scale = getRandom(1, config.maxScale); this.width = co.........完整代码请登录后点击上方下载按钮下载查看
网友评论0