0 0 9 2 - 鱼C英雄帖|【完全体！！！】,Web密训营,Web开发,鱼C论坛

不二如是 发表于 2017-3-21 16:11:51

已有 5 人购买本主题需向作者支付 5 鱼币 才能浏览购买主题

新手·ing 发表于 2017-3-21 16:44:24

纳尼
虽然很凌乱
但是作为鱼油
我买了

不二如是 发表于 2017-3-21 16:52:09

新手·ing 发表于 2017-3-21 16:44
纳尼
虽然很凌乱
但是作为鱼油

{:10_275:}

dreamdnj 发表于 2017-4-5 08:10:48

感谢楼主！！

不二如是 发表于 2017-4-5 09:09:52

dreamdnj 发表于 2017-4-5 08:10
感谢楼主！！

欢迎学习·～

上帝也幽默 发表于 2018-9-15 01:36:37

跟着不二老师的思路一步步敲代码真是太有趣了

suweixuan1998 发表于 2020-1-16 11:26:00

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鱼C工作室</title>
<style type="text/css">
   body{
         background: url("bg.jpg") no-repeat 50% 0;

         font-family: "Adobe Fangsong Std";
         color: #e02562;
   }

   #main,#slogan,#run{
         position: relative;
         height: 666px;
   }
   #main{
         padding-top: 555px;
         text-align: center;
   }
   #main{
         opacity: 0;
         transition: all 2.2s .3s;/*延长0.3s，动画总长2.2s*/
   }
   #main.show{
         opacity: 1;
   }
   #main h1{
         font-size: 93px;
         font-family: "Adobe Caslon Pro";
   }
   #main h2{
         font-size: 33px;
         font-weight:100;
   }
   #slogan{
         padding-top: 111px;
         text-align: center;
   }
   #slogan h1{
         display:inline-block;
         padding-top: 12px;
         padding-bottom: 12px;
         border-top: 3px solid #000;
         border-bottom: 3px dotted #000;
   }
   #slogan h2{
         font-size: 33px;
   }
   #run h1{
         position: absolute;
         font-family: "Abadi MT Condensed Extra Bold";
         font-size: 77px;
         right: 41%;
         top: 8%;
   }
   #run h2{
         position: absolute;
         font-size: 33px;
         right: 41%;
         top: 25%;
   }
   #run img{
         position: absolute;
         left: 40%;
         top: 37%;
   }
   #slogan h1{
         opacity: 0;
         transform: scaleY(0);
         transition: all 1.5s;
   }
   #slogan h2{
         opacity: 0;
         transform: scaleX(0);
         transition: all 1.5s .5s;
   }

   #slogan h1.scroll{
         opacity: 1;
         transform: scaleY(1);
   }
   #slogan h2.scroll{
         opacity: 1;
         transform: scaleX(1);
   }
   #run h1{
         opacity: 0;
         transform: translateX(-200px);
         transition: all 2s;
   }
   #run h2{
         opacity: 0;
         transform: translateX(200px);
         transition: all 2s .5s;
   }
   #run img{
         opacity: 0;
         transform: translateX(200px);
         transition: all 2.5s .5s;
   }
   #run h1.scroll,#run h2.scroll,#run img.scroll{
         opacity: 1;
         transform: translateX(0px);
   }
</style>
</head>
<body>
<div id="main">
<h1>鱼C英雄帖</h1>
<h2>欢迎加入鱼C党卫军</h2>
</div>

<div id="slogan">
<h1>隐藏在黑暗中的正义</h1>
<h2>守护鱼C和平</h2>

</div>

<div id="run">
<h1>I need U</h1>
<h2>让编程改变世界</h2>
<img src="xiangyun.png">
</div>
<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

   var slogan2_y = $('#slogan').offset().top;
   var buffer = 500;/*触发px*/
   var slogan3_y = $('#run').offset().top;

   var windowHeight = $(window).height();

   $('#main').addClass('show');
   $(window).scroll(function(){
         pos = $(window).scrollTop();
         if(pos > slogan2_y-buffer){
            $('#slogan > h1').addClass('scroll');
            $('#slogan > h2').addClass('scroll');
         }
         if(pos > slogan3_y-buffer){
            $('#run > h1').addClass('scroll');
            $('#run > h2').addClass('scroll');
            $('#run > img').addClass('scroll');
         }
         if(pos < slogan2_y-windowHeight+buffer){
            $('#slogan > h1').removeClass('scroll');
            $('#slogan > h2').removeClass('scroll');
         }
         if(pos < slogan3_y-windowHeight+buffer){
            $('#run > h1').removeClass('scroll');
            $('#run > h2').removeClass('scroll');
            $('#run > img').removeClass('scroll');
         }

   })
})
</script>
</body>
</html>

小脑斧 发表于 2020-4-18 17:02:07

cssl里面占好多行啊{:10_277:}

小脑斧 发表于 2020-4-18 17:03:29

本帖最后由小脑斧于 2020-4-18 17:05 编辑

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鱼C工作室</title>
<style type="text/css">
      body{
         background: url("big.jpeg") no-repeat 50% 0;
         font-family: "仿宋";
         color: #e02562;
   }
   #main{
         opacity: 0;/*opacity初始值设为0，即完全透明。而是从完全透明，渐变出来。结合transtion,更详细结合js*/
         transition: all 2.2s .5s;
         padding-top: 450px;
         text-align: center;
   }
   #main.show{
         opacity: 1;
   }
   #main,#slogan,#run{
         position: relative;
         height: 1400px;
   }
   #main h1{
         font-size: 150px;
         font-family: "Caslon" ;
   }
   #main h2{
         font-size: 50px;
         font-weight: 100;
   }
   /*预先不显示，但是只有当页面滚动到该区域才在中间显示！92内容，slogan设置动画*/
   #slogan{
         padding-top: 335px;
         text-align: center;
   }
   #slogan h1{
         display: inline-block;
         padding-top: 12px;
         padding-bottom: 12px;
         font-size: 55px;
         border-top: 3px solid #000000;
         border-bottom: 3px dotted #000000;

         /*92动画设置*/
         opacity: 0;
         transform: scaleY(0);/*scaleY（通过设置 Y 轴的值来定义缩放转换）为0，即高度为0,后开始正常*/
         transition: all 1.5s;
   }
   #slogan h2{
         font-size: 55px;

         opacity: 0;
         transform: scaleX(0);
         transition: all 1.5s .5s;
   }
   #slogan h1.scroll{
         opacity: 1;
         transform: scaleY(1);
   }
   #slogan h2.scroll{
         opacity: 1;
         transform: scaleY(1);
   }

   #run h1{
         position: absolute;
         font-size: 77px;
         right: 41%;
         top: 1%;

         opacity: 0;
         transform: translateX(-200px);
         transition: all 2s;
   }
   #run h2{
         position: absolute;
         font-size: 33px;
         right: 44%;
         top: 10%;
         font-family: "楷体";

         opacity: 0;
         transform: translateX(200px);
         transition: all 2s .5s;
   }
   #run img{
         position: absolute;
         right: 45%;
         top: 18%;

         opacity: 0;
         transform: translateY(200px);
         transition: all 2s .5s;
   }
   #run h1.scroll{
         opacity: 1;
         transform: scaleY(1);
   }
   #run h2.scroll{
         opacity: 1;
         transform: scaleY(1);
   }
   #run img.scroll{
         opacity: 1;
         transform: scaleY(1);
   }
</style>
<script type="text/javascript" src="jquery-3.2.1/jquery-3.2.1.js"></script>
<script type="text/javascript">
   $(document).ready(function(){
         var slogan2_y = $('#slogan').offset().top;
         var buffer = 500;/*触发px*/
         var slogan3_y = $('#run').offset().top;
         var windowHeight = $(window).height();
         //#main
         $('#main').addClass('show');
         //slogan h
         $(window).scroll(function(){
            //先获得slogan的顶部坐标pos。
            pos = $(window).scrollTop();

            //不断将获得的顶部坐标和进行比较，当pos >slogan2成立，即表示进入slogan区
            if(pos > slogan2_y-buffer){
               $('#slogan > h1').addClass('scroll');
               $('#slogan > h2').addClass('scroll');
            }

            if(pos > slogan3_y-buffer){
               $('#run > h1').addClass('scroll');
               $('#run > h2').addClass('scroll');
               $('#run > img').addClass('scroll');
            }
            //自己重新刷新，激活特效。只要界面向上滚动，特效就被remove了
            if(pos < slogan2_y-windowHeight+buffer){
               $('#slogan > h1').removeClass('scroll');
               $('#slogan > h2').removeClass('scroll');
            }
            if(pos < slogan3_y-windowHeight+buffer){
               $('#run > h1').removeClass('scroll');
               $('#run > h2').removeClass('scroll');
               $('#run > img').removeClass('scroll');
            }
         })
   });
</script>
</head>
<body>
<div id="main">
   <h1>鱼C英雄帖</h1>
   <h2>欢迎加入鱼C党卫军</h2>
</div>

<div id="slogan">
   <h1>隐藏在黑暗中的正义</h1>
   <h2>守护鱼C和平</h2>
</div>

<div id="run">
   <h1>I need U</h1>
   <h2>让编程改变世界</h2>
   <img src="3.jpg">
</div>
</body>
</html>

页: [1]

鱼C论坛's Archiver