分享10款很酷的科技感登录界面

人工智能科技感登录界面

图片

能源科技感登录界面

图片

智慧交通科技感登录界面

图片

电商大数据科技感登录界面

图片

管理系统科技感登录界面

图片

能源科技感登录界面

图片

大数据科技感登录界面

图片

智慧电厂科技感登录界面

图片

租房智慧科技感登录界面

图片

公安科技感登录界面

图片

部分登录界面源码

链接:https://pan.baidu.com/s/1uvuq1gfLekMiSeqpDdYWmg?pwd=warp

提取码:warp

好的,让我来为您展示一个充满科技感的前端登陆界面吧。 首先,我们需要一个背景,可以选择一个科技感十足的图片或者视频作为背景。这里我选择了一个动态的背景视频。可以通过CSS实现: ```css body { background: #000; } .video-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .video-bg video { min-width: 100%; min-height: 100%; object-fit: cover; } ``` 然后,我们需要一个登陆框。这里我选择了一个简单的表单,并添加了一些动画效果和光线粒子效果。可以通过CSS和JavaScript实现: ```html <div class="login-container"> <form> <h1>Login</h1> <div class="input-box"> <input type="text" placeholder="Username" required> <span></span> </div> <div class="input-box"> <input type="password" placeholder="Password" required> <span></span> </div> <button type="submit">Login</button> </form> <div class="particles-container"></div> </div> ``` ```css .login-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); padding: 50px; border-radius: 10px; box-shadow: 0 0 20px rgba(255, 255, 255, 0.1); animation: login-form 1s ease-in-out forwards; } @keyframes login-form { from { opacity: 0; transform: translate(-50%, -150%); } to { opacity: 1; transform: translate(-50%, -50%); } } form { display: flex; flex-direction: column; } form h1 { color: #fff; margin-bottom: 30px; text-align: center; } .input-box { position: relative; margin-bottom: 20px; } input { width: 100%; padding: 10px; background: transparent; border: none; border-bottom: 2px solid rgba(255, 255, 255, 0.5); color: #fff; } input:focus, input:valid { border-bottom-color: #fff; } input:focus + span:before, input:valid + span:before { transform: scaleX(1); } input:focus + span:after, input:valid + span:after { transform: scaleX(1); } span { position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(to right, #00c6ff, #0072ff); transform: scaleX(0); transform-origin: bottom right; transition: transform 0.3s ease-in-out; } span:before, span:after { content: ""; position: absolute; bottom: 0; width: 10px; height: 2px; background-color: #fff; transform: scaleX(0); transition: transform 0.3s ease-in-out; } span:before { left: -10px; transform-origin: bottom left; } span:after { right: -10px; transform-origin: bottom right; } button { background: linear-gradient(to right, #00c6ff, #0072ff); border: none; color: #fff; padding: 10px; border-radius: 5px; cursor: pointer; transition: background 0.3s ease-in-out; } button:hover { background: linear-gradient(to right, #0072ff, #00c6ff); } ``` ```javascript const particlesContainer = document.querySelector(".particles-container"); for (let i = 0; i < 50; i++) { const particle = document.createElement("div"); particle.classList.add("particle"); particlesContainer.appendChild(particle); } document.addEventListener("mousemove", function (event) { const particles = document.querySelectorAll(".particle"); for (let i = 0; i < particles.length; i++) { const particle = particles[i]; const dx = event.clientX - particle.offsetLeft - particle.clientWidth / 2; const dy = event.clientY - particle.offsetTop - particle.clientHeight / 2; const angle = Math.atan2(dy, dx); const distance = Math.sqrt(dx * dx + dy * dy); const maxDistance = 200; const strength = (maxDistance - distance) / maxDistance; const x = Math.cos(angle) * strength * 20; const y = Math.sin(angle) * strength * 20; particle.style.transform = `translate(${x}px, ${y}px)`; } }); ``` 最后,将背景视频和登陆框放在一个容器中即可: ```html <div class="container"> <div class="video-bg"> <video src="background.mp4" autoplay loop muted></video> </div> <div class="login-container"> <!-- 登陆框代码 --> </div> </div> ``` 通过这些 CSS 和 JavaScript 效果的组合,我们可以创建一个充满科技感的前端登录界面,让用户有一种置身未来世界的感觉。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值