【小白教程】趣味表白效果
这次我们玩点有意思的，先看看效果→趣味表白效果
最好是在PC端预览哦，下面出简单的小白教程。（注意：此教程仅适合前台小白，高手请绕过）
1. 在电脑桌面点击鼠标右键，选择【新建】→【文本文档】
2. 双击打开已在桌面上新建好的文本文档，复制粘贴以下代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>你喜欢我吗？</title> <style> *{ margin: 0; padding: 0;} a{ text-decoration: underline;} body{ font-size: 16px; color: #333; -webkit-user-select: none; user-select: none;} .alert{ position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(83, 26, 255, 0.8);} .alert .box{ position: fixed; top: 0; bottom: 0; left: 0; right: 0; width: 400px; height: 240px; margin: auto; padding: 20px; text-align: center; border: 1px solid #eee; border-radius: 10px; box-shadow: 0 0 20px #111; background: #fff; overflow: hidden; -webkit-animation: model .5s; animation: model .5s; -webkit-transition: all .3s; transition: all .3s;} .alert .box::after{ content: '×'; position: absolute; top: 0; right: 0; width: 30px; font-size: 20px; line-height: 30px; cursor: pointer;} .alert .box:hover::after{ display: none;} .alert .title{ font-size: 28px; line-height: 6;} .alert.no-btn .title{ line-height: 8.5;} .alert.no-btn .btns{ display: none;} .alert .btns.reverse{ direction: rtl;} .alert .btn{ display: inline-block; width: 100px; margin: 0 5px; border-radius: 4px; border: 1px solid #ccc; box-sizing: border-box; font-size: 16px; line-height: 2.5; color: #333; background-color: #fff; cursor: pointer;} .alert .btn.like{ color: #fff; background-color: #ff4528; -webkit-transition: all .3s; transition: all .3s;} .alert .btn.like:hover{ background-color: #f93618;} @keyframes model { 0%{ opacity: 0; transform: scale(.5);} 60%{ opacity: 1; transform: scale(1.2);} 100%{ opacity: 1; transform: scale(1);} } @-webkit-keyframes model { 0%{ opacity: 0; -webkit-transform: scale(.5);} 60%{ opacity: 1; -webkit-transform: scale(1.2);} 100%{ opacity: 1; -webkit-transform: scale(1);} } </style></head><body> <div id="container"></div> <script> window.onload = function () { model('你喜欢我吗？',true,'喜欢'); hoverBtn(); $('.like').onclick = function () { model('我也喜欢你，我们在一起吧',true,'同意'); hoverBtn(); }; }; function $(selector) { return document.querySelector(selector); } function hoverBtn() { $('.dislike').addEventListener('mouseover',function () { var btns = $('.btns'); if(btns.classList.contains('reverse')){ btns.classList.remove('reverse'); } else{ btns.classList.add('reverse'); } }); } function model(text,hasBtn,btnVal) { var html = '<div class="alert">\n' + ' <div class="box">\n' + ' <h2 class="title">'+ text + '</h2>\n' + ' <div class="btns">\n' + ' <div class="like btn" href="javascript:;">'+ btnVal + '</div>\n' + ' <div class="dislike btn" href="javascript:;">不'+ btnVal +'</div>\n' + ' </div>\n' + ' </div>\n' + ' </div>'; document.getElementById('container').innerHTML = html; if(!hasBtn){ $('.alert').classList.add('no-btn'); } } </script></body></html>3. 选择【文件】→【另存为】
4. 在弹窗底部“文件名”处将“txt”改成“html”，“编码”处选择“utf-8”，点击保存
5. 双击打开桌面上已经另存好的网页文件即可以了
喜欢吗？喜欢就点个赞关注我呗~
说明
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 【小白教程】趣味表白效果
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 【小白教程】趣味表白效果
