六个拿来就能用的有趣网页特效 |
您所在的位置：网站首页 › instagram添加特效 › 六个拿来就能用的有趣网页特效 |
六个拿来就能用的有趣网页特效
|
上学期写大作业时收集的一些拿来直接用的网页特效，我还用服务器生成了 script 链接，只需一条标签就可以使用啦，如果你觉得这样会影响网站加载速度，没关系，你可以将其下载下来使用
效果预览
效果预览 引入jquery 引入js 代码 DOCTYPE html> Document * { margin: 0; padding: 0; box-sizing: border-box; } div { height: 100vh; } 3. 樱花飘落特效效果预览 效果预览 代码 源码下载 DOCTYPE html> 返回顶部 5. 可爱登录效果预览 在线访问 点击这里 文件目录 素材 素材 html DOCTYPE html> 掘金登录小案例 手机登录 其他登录方式 注册登录即表示同意 用户协议，隐私政策 document.querySelector('#phone').addEventListener('focus',function(){ document.querySelector('.t2').style.display = "block"; }); document.querySelector('#phone').addEventListener('blur',function(){ document.querySelector('.t2').style.display = "none"; }); document.querySelector('#pwd').addEventListener('focus',function(){ document.querySelector('.t1').style.display = "block"; }); document.querySelector('#pwd').addEventListener('blur',function(){ document.querySelector('.t1').style.display = "none"; }); document.querySelector('button').addEventListener('click',function(e){ document.body.style.backgroundColor = "#fff"; document.querySelector('#app').style.display = "none"; e.preventDefault(); });css *{ margin: 0; padding: 0; box-sizing: border-box; } body{ display: flex; align-items: center; justify-content: center; min-height: 100vh; background-color: #aaabab; } #app{ position: relative; height: 290px; width: 350px; background-color: #fff; } #app form{ position: relative; padding: 20px; } #app form h2{ color: #333333; font-size: 18px; user-select: none; } #app form p input{ width: 100%; height: 38px; color: #828282; border: 1px solid #ddd; padding-left: 8px; margin-top: 18px; border-radius: 2px; outline: none; } #app form p:nth-of-type(3) input{ background-color: #007fff; color: #edf6ff; } #app form a{ text-decoration: none; color: #198fff; margin: 10px 0; display: inline-block; font-size: 15px; } #app form p span{ margin-top: 10px; font-size: 14px; color: #847f7a; } #app form p span small{ font-size: 14px; color: #198fff; } button{ position: absolute; top: 20px; right: 20px; border: none; background-color: transparent; cursor: pointer; } button::after{ font-family: "bootstrap-icons"; content: '\F62A'; font-size: 24px; color: #afafaf; } #app img{ position: absolute; width: 100px; left: 50%; transform: translateX(-50%); display: none; } #app img:nth-of-type(1){ top: -64px; } #app img:nth-of-type(2){ top: -62px; } 6. 点击爆炸效果预览 |
代码
代码
图片素材
引入【本文地址】
今日新闻 |
推荐新闻 |