【小白教程】趣味表白效果
这次我们玩点有意思的,先看看效果→趣味表白效果
最好是在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. 双击打开桌面上已经另存好的网页文件就可以了
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
Java中的路径问题
java中路径问题看似不大,但是有时候细节问题导致的是 当前路径不存在 常常伴随左右。来总结一下路径问题吧。 路径不存在: 首先必须注意的是 如果FileInputStream中的路径如果不存在的话,就会报错,如果路径存在而文件不存在 就会创建对应的文件。 /代表位置 分两种情况:目标资源是给谁使用的。 给服务器使用的: / 表示在当前web应用的根目录(webRoot 给浏览器使用的: / 表示在webapps的根目录下 举例:转发:就是服务器调用,就是内部调用,/代表当前项目: request.getRequestDispatcher("/target.html") .forward(request, response); 请求重定向:就是浏览器调用。 response.sendRedirect("/day11/target.html"); html页面的超连接href:浏览器调用。 response.getWriter().write("<html><body><a href= '/day11/target.html'>超链接</a>...
- 下一篇
打造编程环境
Python虚拟环境 下载安装 清华的镜像 [https://mirror.tuna.tsinghua.edu.cn/help/anaconda/] Miniconda 安装包可以到 https://mirrors.tuna.tsinghua.edu.cn/anaconda/miniconda/ 下载。 下载后直接默认安装Miniconda 添加环境变量 下面进入到非常关键的添加环境变量的步骤,无论你是否有选择”Add Anaconda to my PATH environment variable”,都建议按照以下步骤进行环境变量的添加或查看。 Miniconda的安装中第三个步骤时记下的默认安装路径,”新建”三个路径:1)默认路径本身;2)默认路径+”\Scripts”;3)默认路径+”\Library\bin” 例如默认路径为:”C:\Users\Administrator\Miniconda3”,那么需要添加的三个路径则是: 1)C:\Users\Administrator\Miniconda3; 2)C:\Users\Administrator\Miniconda3\Scri...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- CentOS8,CentOS7,CentOS6编译安装Redis5.0.7
- CentOS7,CentOS8安装Elasticsearch6.8.6
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- Linux系统CentOS6、CentOS7手动修改IP地址
- CentOS7安装Docker,走上虚拟化容器引擎之路
- CentOS7编译安装Cmake3.16.3,解决mysql等软件编译问题
- SpringBoot2全家桶,快速入门学习开发网站教程
- CentOS7设置SWAP分区,小内存服务器的救世主
- Docker快速安装Oracle11G,搭建oracle11g学习环境