热门标签

,
zhuanjiao

发表文章数:1031

表白网源码

表白网源码。

¥255 现在购买

HTML

<link rel="stylesheet" href="css.css">
<script src="js.js"></script>
<h1 class="text-center head1">你喜欢我吗?</h1>
<div class="container-fluid">
<!-- row of buttons -->
<div class="row">
<div class="col-xs-6 text-right"> <button class="btn btn-primary">是的!</button></div>
<div class="col-xs-6"> <button class="btn btn-danger" id="no-btn">喜欢个锤子!</button></div>

</div>

</div>

CSS

.head1{
font-family: 'Lobster','Indie Flower';
}

.btn-danger{
position: relative;
top: 0px; /* change position here*/
/*animation: buttonMove 5s infinite;*/

}
.btn-primary{
position: relative;
top: 0px;
}
img{
width: 200px;
height: 400px;
}

@keyframes buttonMove {
0% {top: 0px;}
/*75% {top: 100px;} */
50% {top: 500px;}
100% {top:0px;}

}
@keyframes buttonMove2{
0% {top: 400px;
left:-200px; }

25% {top: 400px;
left:200px; }
50% {top: 400px;
left:200px; }
75% {top: 600px;
left:100px; }
100% {top: 600px;
left:-200px; }
}

JAVASCRIPT

var count=0;
$(document).ready(function(){
  $('.btn-danger').mouseenter(function(){   
    $('.btn-danger').css('animation', 'buttonMove 0.5s infinite');
    count++;
    console.log(count);
    if(count>=3){
      $('.btn-danger').css('animation', '');
      $('.btn-danger').css('top','500px');
      $('.btn-danger').css('left','-300px');
      $('.btn-danger').addClass('animated tada');
    }
    if(count>=4){
      $('.btn-danger').css('animation', 'buttonMove2  0.5s infinite ');
    }
    if(count>=6){
      $('.btn-danger').css('animation', '');
      $('.btn-danger').addClass('animated shake');
      $('#no-btn').css('top','200px');
      $('#no-btn').css('left','-400px');
    }
    if(count>=7){
      $('#no-btn').removeClass('btn-danger').addClass('btn-primary');
      $('#no-btn').text('是的!');
    }

  });  
  // code continues here
  //btn-clicked
  $('.btn-primary').click(function(){
    $('.head1').text("哈哈,我也喜欢你!!!");
    $('.head1').addClass("animated wobble");
  });

});

测试图

你点不到的按钮表白代码

 

未经允许不得转载:作者:zhuanjiao, 转载或复制请以 超链接形式 并注明出处 啭脚博客网
原文地址:《你点不到的按钮表白代码》 发布于2020-08-26

分享到:
赞(2) 打赏 生成海报

 您阅读这篇文章共花了: 

本站说明啭脚资源网:145v1.com 每天更新优质技术教程,资源,软件,活动,资讯!

本站提供的一切软件、教程和内容信息仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途, 否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内 ,从您的电脑或手机中彻底删除上述内容。

评论 抢沙发

6 + 7 =


长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.5主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

切换登录

注册