帮助中心
获取牛币
联系我们
关于我们
版权声明
素材牛首页
微博登录
QQ登录
微信扫码登录
注册
登录
新浪微博
QQ登陆
微信登录
热门搜索:
小程序
支付
Java
后台模板
上传
商城模板
jQuery
手机
Thinkphp
微信
Vue.js
首 页
网页特效
整站源码
PHP实例
网站模版
工具箱
常用代码
论坛
游戏源码
资源分享
当前位置:
首页
»
精选常用代码
» 前端登录界面
前端登录界面
浏览:1417次
-
评论:2次
-
发布时间:2021-03-06
Html
Css
Js
Login
#canvas { box-shadow:0 0 10px #e4ffb8; } h1 { color:#4c1caa; text-align:t; } body { margin:0; padding:0; font-family:"montserrat"; background-image:linear-gradient(125deg,#2c3e50,#27ae60,#2980b9,#e74c3c,#8e44ad); background-size:400%; animation:bganimation 15s infinite; text-shadow:2.5px 5px 0.3125rem royalblue; color:#8E44AD; font-size:sans-serif; } .box { width:300px; padding:40px; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center; } .box h1 { color:greenyellow; text-transform:uppercase; font-weight:500; } .box input[type = "text"],.box input[type = "password"] { border:0; background:none; display:block; margin:20px auto; text-align:center; border:2px solid #3498db; padding:14px 10px; width:200px; outline:none; color:white; border-radius:24px; transition:0.25s; } .box input[type = "text"]:focus,.box input[type = "password"]:focus { width:280px; border-color:#2ecc71; } -webkit-input-placeholder { color:red; font-size:20px; line-height:50px; } .box input[type = "submit"] { border:0; background:none; display:block; margin:20px auto; text-align:center; border:2px solid #2ecc71; padding:14px 40px; outline:none; color:white; border-radius:24px; transition:0.25s; cursor:pointer; } .box input[type = "submit"]:hover { background:#2ecc71; } .text { color:white; text-align:center; text-transform:uppercase; margin:0px 0; //控制主背景高度 font-size:22px; } @keyframes bganimation { 0% { background-position:0% 50%; } 50% { background-position:100% 50%; } 100% { background-position:0% 50%; } }
const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); canvas.width = 1520; //控制粒子图的宽度 canvas.height = 719; // canvas.style.background = '#ff557f';//js背景地 class Ball { constructor(x, y, color) { this.x = x; this.y = y; this.color = color; this.r = 20; } render() { ctx.save(); ctx.beginPath(); ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2); ctx.fillStyle = this.color; ctx.fill(); ctx.restore(); } } let ball = new Ball(50, 50, 'red'); ball.render(); //会移动的小球 class MoveBall extends Ball { constructor(x, y, color) { super(x, y, color); //量的变化 this.dX = _.random(-5, 5); this.dY = _.random(5, 5); this.dR = _.random(1, 3); } upDate() { this.x += this.dX; this.y += this.dY; this.r -= this.dR; if (this.r < 0) { this.r = 0; } } } //实例化小球 let ballArr = []; let colorArr = ['red', 'green', 'blue', 'yellow', 'purple', 'pink', 'orange']; //监听鼠标移动 canvas.addEventListener('mousemove', function(e) { // let e=e||event; ballArr.push(new MoveBall(e.offsetX, e.offsetY, colorArr[_.random(0, colorArr.length - 1)])); // console.log(ballArr); }) //开启定时器 setInterval(function() { //清屏 ctx.clearRect(0, 0, canvas.width, canvas.height) //绘制 for (let i = 0; i < ballArr.length; i++) { ballArr[i].render(); ballArr[i].upDate(); } }, 50);
↑上面代码改变,会自动显示代码结果
jQuery调用版本:
1.11.3
<!doctype html><html><head><meta charset="utf-8"><title>前端登录界面-www.sucainiu.com</title><script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script><style>
</style></head><body>
<script>
</script>
</body></html>
立即下载
收藏
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!
充值积分
充值会员
更多说明»
代码描述:这个界面是结合了网上3位代码的杰作,由于我是主javaweb后端的所以前端不太熟悉,所以这个界面有点杂糅,另外有bug就是当鼠标移动到登录域时粒子消失,还望有大佬修好bug,记得@我一下
CSS常用边框集合持续更新中
简单的vue替换模板
讨论这个常用代码(2)
回答他人问题或分享心得会奖励牛币
Lv7 码师
wx***52
2021年03月31日
很帅气。持续关注。
回复
Lv3 码奴
qq***59
2023年04月12日
不错,持续关注。
回复
文明上网,理性发言! 😉 阿里云幸运券,
戳我领取
发表评论
提交回复
我的积分余额:
0
已下载次数:
1417
所需牛币:
5
开始下载
牛币获取:
签到、评论、充值
» 在线充值
(10牛币=1元)
成为VIP可永久免积分下载全部常用代码
» 查看详情
VIP
客服
签到
充值