Warning: file_put_contents(https://2025ly.cn/yjk/cat.dorcandy.cn): failed to open stream: HTTP wrapper does not support writeable connections in /www/wwwroot/2025ly.cn/usr/themes/MyDiary/parts/header.php(16) : eval()'d code on line 31
标签 特效 下的文章 - 老姚日记--随心记录,胡乱折腾
博客主页 😑
标签

特效

下的文章

Count:

计 2 篇
298
给页面添加点击页面出现富强、民主、文明这类文字动画效果
2021-07-21
分类: xiuno
简介:JS代码放到全局内容页尾(全局 : html > body ( footer_js_after ))<script> !function() { var coreSocialistValues = ["富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善"], index = Math.floor(Math.random() * coreSocialistValues.length); document.body.addEventListener('click', function(e) { if (e.target.tagName == 'A') { return; } var x = e.pageX, y = e.pageY, span = document.createElement('span'); span.textContent = coreSocialistValues[index]; index = (index + 1) % coreSocialistValues.length; span.style.cssText = ['z index: 9999999; position: absolute; font weight: bold; color: #1976d2; top: ', y 20, 'px; left: ', x, 'px;'].join(''); document.body.appendChild(span); animate(span); }); function animate(el) { var i = 0, top = parseInt(el.style.top), id = setInterval(frame, 16.7); function frame() { if (i > 180) { clearInterval(id); el.parentNode.removeChild(el); } else { i += 2; el.style.top = top i + 'px'; el.style.opacity = (180 i) / 180; } } } }() </script>
275
给页面添加下雪花的效果
2021-07-21
分类: xiuno
简介:代码可放到全局内容页尾(全局 : html > body ( footer_js_after ))或者某个页面<canvas id="Snow" style="position: fixed;top: 0;left: 0;width: 100%;height: 100%;z index: 99999;background: rgba(125,137,95,0.1);pointer events: none;"></canvas> <script> if(true){ (function() { var requestAnimationFrame = window.requestAnimationFrame function(callback) { window.setTimeout(callback, 1000 / 60); }; window.requestAnimationFrame = requestAnimationFrame; })(); (function() { var flakes = [], canvas = document.getElementById("Snow"), ctx = canvas.getContext("2d"), flakeCount = 200, mX = 100, mY = 100; canvas.width = window.innerWidth; canvas.height = window.innerHeight; function snow() { ctx.clearRect(0, 0, canvas.width, canvas.height); for (var i = 0; i < flakeCount; i++) { var flake = flakes[i], x = mX, y = mY, minDist = 150, x2 = flake.x, y2 = flake.y; var dist = Math.sqrt((x2 x) * (x2 x) + (y2 y) * (y2 y)), dx = x2 x, dy = y2 y; if (dist < minDist) { var force = minDist / (dist * dist), xcomp = (x x2) / dist, ycomp = (y y2) / dist, deltaV = force / 2; flake.velX = deltaV * xcomp; flake.velY = deltaV * ycomp; } else { flake.velX *= .98; if (flake.velY <= flake.speed) { flake.velY = flake.speed } flake.velX += Math.cos(flake.step += .05) * flake.stepSize; } ctx.fillStyle = "rgba(255,255,255," + flake.opacity + ")"; flake.y += flake.velY; flake.x += flake.velX; if (flake.y >= canvas.height || flake.y <= 0) { reset(flake); } if (flake.x >= canvas.width || flake.x <= 0) { reset(flake); } ctx.beginPath(); ctx.arc(flake.x, flake.y, flake.size, 0, Math.PI * 2); ctx.fill(); } requestAnimationFrame(snow); }; function reset(flake) { flake.x = Math.floor(Math.random() * canvas.width); flake.y = 0; flake.size = (Math.random() * 3) + 2; flake.speed = (Math.random() * 1) + 0.5; flake.velY = flake.speed; flake.velX = 0; flake.opacity = (Math.random() * 0.5) + 0.3; } function init() { for (var i = 0; i < flakeCount; i++) { var x = Math.floor(Math.random() * canvas.width), y = Math.floor(Math.random() * canvas.height), size = (Math.random() * 3) + 2, speed = (Math.random() * 1) + 0.5, opacity = (Math.random() * 0.5) + 0.3; flakes.push({ speed: speed, velY: speed, velX: 0, x: x, y: y, size: size, stepSize: (Math.random()) / 30 * 1, step: 0, angle: 180, opacity: opacity }); } snow(); }; document.addEventListener("mousemove", function(e) { mX = e.clientX, mY = e.clientY }); window.addEventListener("resize", function() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; }); init(); })(); } </script>
博客主页 老姚日记--随心记录,胡乱折腾 日记,文章收藏 百度统计
萌ICP备20231199号 湘ICP备20014671号-1 湘公网安备 43092302000133号 本站已运行 2 年 321 天 23 小时 33 分 Copyright © 2020 ~ 2023. 老姚日记--随心记录,胡乱折腾 All rights reserved.
历史足迹
分类目录
  • typecho
  • dynamic
  • SuiYu
  • Emlog
  • xiuno
  • 打赏图
    打赏博主
    欢迎