随笔分类 - 前端特效合集
记录一些自己制作或学习的前端页面效果
摘要：js实现简单的俄罗斯方块小游戏 开始 1. 创建一个宽为 200px，高为 360px 的背景容器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=
阅读全文
摘要：极简主义网页计算器。 实现了按键特效，可响应键盘按键，实时显示计算结果。 可切换模式，拓展高级功能，包括根号、三角函数、括号等。 效果如下： 代码如下： html： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <
阅读全文
摘要：js千分位分隔，数字货币化—4种方法（含正则） 方法1-整数货币化 // 整数货币化 function intCurrency(num) { var reg = new RegExp("^[\\d]+[\\d|.]+$", 'g') if (!reg.test(num)) { return "只能为
阅读全文
摘要：前几天看到了一个很有趣的demo，用js制作植物大战僵尸小游戏，本着学习的心态，对照着做了一下，发现这里面的一些代码设计的确很精妙，这里分享下源码和效果，如果有需要，可以看下。 效果如下： 下载地址
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>太极旋转图</title> <style type="text/css"> body{ margin: 0px; padding: 0px; } .wrap{ width: 200
阅读全文
摘要：今天分享一个在 JavaScript中，实现一个鼠标移入可以随机变换颜色，本质就是js的随机数运用。 代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> /* 这里定义一下div（块元素
阅读全文
摘要：主页面 代码1（style.css） .nav { height: 41px; border-top: 3px solid #b4fffa; border-bottom: 1px solid #edeef0; background-color: #fcfcfc; line-height: 41px;
阅读全文
摘要：代码如下： <style type="text/css"> div {font-weight: bold;text-align: center;} .tone{width: 30px;height:30px;border: 2px solid #ff5151;border-radius: 18px;
阅读全文
摘要：最近做了一个迷你键盘的dome，这里分享给大家 dome下载地址（点击下载） 代码如下： <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>迷你键盘</title> <style> *{margin:0;pa
阅读全文
摘要：在铺页面的过程中，总是会遇到轮播图需要处理，一般我是会用swiper来制作，但总会有哪个几个个例需要我自己来写功能，这里制作了一个jq用来实现图片无缝轮播的dome，分享给大家ヽ(￣▽￣)ﾉ。 dome下载点击这里 具体代码如下： <!DOCTYPE html> <html> <head> <met
阅读全文
摘要：今天在看帖子的时候，看到了个有趣的css旋转相册，刚好之前做了一个星空背景dome，这里给大家分享下代码： 旋转相册参考：https://blog.csdn.net/gitchatxiaomi/article/details/108474015?utm_medium=distribute.pc_ca
阅读全文
摘要：参考并转载于https://www.fghrsh.net/post/123.html 个人网站添加Live2D 看板娘的方法： 在页面中加入以下代码（已经全部处理完，可以根据需求适当修改）： <!DOCTYPE html> <html> <head> <title>Live2D 看板娘 测试dome
阅读全文