沈阳商城网站开发,每个城市建设规划在哪个网站,阅读网站源码,WordPress全站广告文章目录 前言一、粒子特效登录页总结 前言
上头了#xff0c;再来一个粒子特效登录页面。 一、粒子特效登录页
登录页#xff1a; templatedivvue-particles idtsparticles particles-loadedparticlesLoaded :options… 文章目录 前言一、粒子特效登录页总结 前言
上头了再来一个粒子特效登录页面。 一、粒子特效登录页
登录页 templatedivvue-particles idtsparticles particles-loadedparticlesLoaded :optionsoptions /
formh3Login Here/h3label forusernameUsername/labelinput typetext placeholderEmail or Phone idusernamelabel forpasswordPassword/labelinput typepassword placeholderPassword idpasswordbuttonLog In/buttondiv classsocialdiv classgoi classfab fa-google/i Google/divdiv classfbi classfab fa-facebook/i Facebook/div/div
/formdiv idtsparticles/div
formh3Login Here/h3label forusernameUsername/labelinput typetext placeholderEmail or Phone idusernamelabel forpasswordPassword/labelinput typepassword placeholderPassword idpasswordbuttonLog In/buttondiv classsocialdiv classgoi classfab fa-google/i Google/divdiv classfbi classfab fa-facebook/i Facebook/div/div
/form/div
/templatescript setup langts name
let themeableContainer;import tsParticles from tsparticles/vue3;const particlesLoaded async (container: any) {console.log(Particles container loaded, container);
};
const options {fpsLimit: 60,fullScreen: { enable: true },particles: {number: {value: 50},shape: {type: circle},opacity: {value: 0.5},size: {value: 400,random: {enable: true,minimumValue: 200}},move: {enable: true,speed: 10,direction: top,outModes: {default: out,top: destroy,bottom: none}}},interactivity: {detectsOn: canvas,events: {resize: true}},style: {filter: blur(50px)},detectRetina: true,themes: [{name: light,default: {value: true,mode: light},options: {background: {color: #f7f8ef},particles: {color: {value: [#5bc0eb, #fde74c, #9bc53d, #e55934, #fa7921]}}}},{name: dark,default: {value: true,mode: dark},options: {background: {color: #080710},particles: {color: {value: [#004f74, #5f5800, #245100, #7d0000, #810c00]}}}}],emitters: {direction: top,position: {x: 50,y: 150},rate: {delay: 0.2,quantity: 2},size: {width: 100,height: 0}}}
/scriptstyle langscss scoped
*,
*:before,
*:after {padding: 0;margin: 0;box-sizing: border-box;
}
form {height: 520px;width: 400px;background-color: rgba(255, 255, 255, 0.13);position: absolute;transform: translate(-50%, -50%);top: 50%;left: 50%;border-radius: 10px;backdrop-filter: blur(30px);-webkit-backdrop-filter: blur(30px);border: 2px solid rgba(255, 255, 255, 0.1);box-shadow: 0 0 40px rgba(8, 7, 16, 0.6);padding: 50px 35px;
}
form * {font-family: Poppins, sans-serif;color: #000000;letter-spacing: 0.5px;outline: none;border: none;
}media (prefers-color-scheme: dark) {form * {color: #ffffff;}
}form h3 {font-size: 32px;font-weight: 500;line-height: 42px;text-align: center;
}label {display: block;margin-top: 30px;font-size: 16px;font-weight: 500;
}
input {display: block;height: 50px;width: 100%;background-color: rgba(255, 255, 255, 0.07);border-radius: 3px;padding: 0 10px;margin-top: 8px;font-size: 14px;font-weight: 300;
}::placeholder {color: #1b1b1b;
}media (prefers-color-scheme: dark) {::placeholder {color: #e5e5e5;}
}button {margin-top: 50px;width: 100%;background-color: #ffffff;color: #080710;padding: 15px 0;font-size: 18px;font-weight: 600;border-radius: 5px;cursor: pointer;
}
.social {margin-top: 30px;display: flex;
}
.social div {background: red;width: 150px;border-radius: 3px;padding: 5px 10px 10px 5px;background-color: rgba(255, 255, 255, 0.27);color: #150f03;text-align: center;
}media (prefers-color-scheme: dark) {.social div {color: #eaf0fb;}body {background: #000;}
}.social div:hover {background-color: rgba(255, 255, 255, 0.47);
}
.social .fb {margin-left: 25px;
}
.social i {margin-right: 4px;
}
/style如果不成功仔细看第一篇文章一步一步做很简单的。实际效果要比图片好看多了gif录糊了糊了。。。 总结 行到水穷处坐看云起时
