这次让我们玩点有趣的。先看效果→最好在PC端预览效果。下面是一个简单的小白教程。 (注:本教程只适合前台小白，请绕过高手)1。在电脑桌面上点击鼠标右键，选择[新建]→[文本文档] 2。双击打开桌面上新创建的文本文档，复制粘贴以下代码<！DOCTYPE html & gt& lthtml lang = " en " & gt& lthead & gt& ltmeta charset="UTF-8 " >& lttitle & gt你喜欢我吗？& lt/title & gt；& ltstyle & gt*{边距:0；填充:0；} a{ text-decoration:下划线；} body { font-size:16px；颜色:# 333；-WebKit-用户选择:无；用户选择:无；} .警报{位置:固定；top:0；底部:0；左:0；右:0；背景色:rgba(83，26，255，0.8)；} .警惕。盒子{位置:固定；top:0；底部:0；左:0；右:0；宽度:400px高度:240px边距:自动；填充:20px文本对齐:居中；边框:1px纯色# eee边框半径:10pxbox-shadow:0 0 20px # 111；背景:# fff溢出:隐藏；-WebKit-动画:model .5s动画:model .5s-webkit-transition:全是. 3s；转场:全. 3s；} .警惕。box::在{ content: '×'之后；位置:绝对；top:0；右:0；宽度:30px字体大小:20px行高:30px光标:指针；} .警惕。box:hover::after{ display:无；} .警惕。title { font-size:28px；行高:6；} .alert.no-btn。标题{行高:8.5；} .alert.no-btn。btns{显示:无；} .alert .btns.reverse{方向:RTL；} .警惕。btn{显示:内嵌块；宽度:100px保证金:0 5px边框-半径:4px边框:1px纯色# ccc框大小:边框-框；字体大小:16px行高:2.5；颜色:# 333；背景色:# fff光标:指针；} .alert . BTN . like { color:# fff；背景色:# ff4528-webkit-transition:全是. 3s；转场:全. 3s；} .alert . BTN . like:hover { background-color:# f 93618；} @关键帧模型{ 0%{不透明度:0；transform:scale(. 5)；} 60%{不透明度:1；变换:缩放(1.2)；} 100%{不透明度:1；变换:缩放(1)；} } @-webkit-keyframes模型{ 0% { opacity:0；-WebKit-transform:scale(. 5)；} 60%{不透明度:1；-WebKit-transform:scale(1.2)；} 100%{不透明度:1；-WebKit-transform:scale(1)；} } & lt/style & gt；& lt/head & gt；& ltbody & gt& ltdiv id = " container " & gt& lt/div & gt；& lt脚本& gtWindow.onload = function () {model('你喜欢我吗？'，真，‘喜欢’)；hover BTN()；$ ('.喜欢’)。onclick = function () {model('我也喜欢你，我们在一起吧'，真，'同意')；hover BTN()；};};function $(选择器){ return document.querySelector(选择器)；}函数hoverBtn() { $('。不喜欢)。addEventListener('mouseover '，function () { var btns = $('。btns’)；if(btns . class list . contains(' reverse '){ btns . class list . remove(' reverse ')；} else { btns . class list . add(' reverse ')；} });}函数模型(text，hasBtn，btnVal){ var html = ' & lt；div class="alert " >\ n '+' & lt；div class="box " >\ n '+' & lt；“h2 class="title " >”+text+' & lt；/H2 & gt；\ n '+' & lt；div class="btns " >\ n '+' & lt；div class = " like BTN " href = " JavaScript:；"& gt+btnVal+' & lt；/div & gt；\ n '+' & lt；div class= "不喜欢BTN " href = " JavaScript:；"& gtno '+btnval+'