设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 技术交流 › Web开发 › Web密训营 › 0 0 9 2 - 鱼C英雄帖 |【完全体！！！】
返回列表 发新帖
查看: 1561|回复: 8

[庖丁解牛] 0 0 9 2 - 鱼C英雄帖 |【完全体！！！】

[复制链接]
不二如是
发表于 2017-3-21 16:11:51 | 显示全部楼层 |阅读模式
购买主题 已有 5 人购买  本主题需向作者支付 5 鱼币 才能浏览

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

新手·ing
发表于 2017-3-21 16:44:24 | 显示全部楼层
纳尼
虽然很凌乱
但是作为鱼油
我买了

评分

参与人数 1鱼币 +5 收起 理由
不二如是 + 5 热爱鱼C^_^

查看全部评分

想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

不二如是
 楼主| 发表于 2017-3-21 16:52:09 | 显示全部楼层
新手·ing 发表于 2017-3-21 16:44
纳尼
虽然很凌乱
但是作为鱼油

想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

dreamdnj
发表于 2017-4-5 08:10:48 | 显示全部楼层
感谢楼主！！

评分

参与人数 1鱼币 +6 收起 理由
不二如是 + 6 加油～

查看全部评分

想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

不二如是
 楼主| 发表于 2017-4-5 09:09:52 | 显示全部楼层
dreamdnj 发表于 2017-4-5 08:10
感谢楼主！！

欢迎学习·～
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

上帝也幽默
发表于 2018-9-15 01:36:37 | 显示全部楼层
跟着不二老师的思路一步步敲代码真是太有趣了
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

suweixuan1998
发表于 2020-1-16 11:26:00 | 显示全部楼层
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>鱼C工作室</title>
  6.     <style type="text/css">
  7.         body{
  8.             background: url("bg.jpg") no-repeat 50% 0;

  10.             font-family: "Adobe Fangsong Std";
  11.             color: #e02562;
  12.         }

  14.         #main,#slogan,#run{
  15.             position: relative;
  16.             height: 666px;
  17.         }
  18.         #main{
  19.             padding-top: 555px;
  20.             text-align: center;
  21.         }
  22.         #main{
  23.             opacity: 0;
  24.             transition: all 2.2s .3s;/*延长0.3s，动画总长2.2s*/
  25.         }
  26.         #main.show{
  27.             opacity: 1;
  28.         }
  29.         #main h1{
  30.             font-size: 93px;
  31.             font-family: "Adobe Caslon Pro";
  32.         }
  33.         #main h2{
  34.             font-size: 33px;
  35.             font-weight:100;
  36.         }
  37.         #slogan{
  38.             padding-top: 111px;
  39.             text-align: center;
  40.         }
  41.         #slogan h1{
  42.             display:inline-block;
  43.             padding-top: 12px;
  44.             padding-bottom: 12px;
  45.             border-top: 3px solid #000;
  46.             border-bottom: 3px dotted #000;
  47.         }
  48.         #slogan h2{
  49.             font-size: 33px;
  50.         }
  51.         #run h1{
  52.             position: absolute;
  53.             font-family: "Abadi MT Condensed Extra Bold";
  54.             font-size: 77px;
  55.             right: 41%;
  56.             top: 8%;
  57.         }
  58.         #run h2{
  59.             position: absolute;
  60.             font-size: 33px;
  61.             right: 41%;
  62.             top: 25%;
  63.         }
  64.         #run img{
  65.             position: absolute;
  66.             left: 40%;
  67.             top: 37%;
  68.         }
  69.         #slogan h1{
  70.             opacity: 0;
  71.             transform: scaleY(0);
  72.             transition: all 1.5s;
  73.         }
  74.         #slogan h2{
  75.             opacity: 0;
  76.             transform: scaleX(0);
  77.             transition: all 1.5s .5s;
  78.         }

  80.         #slogan h1.scroll{
  81.             opacity: 1;
  82.             transform: scaleY(1);
  83.         }
  84.         #slogan h2.scroll{
  85.             opacity: 1;
  86.             transform: scaleX(1);
  87.         }
  88.         #run h1{
  89.             opacity: 0;
  90.             transform: translateX(-200px);
  91.             transition: all 2s;
  92.         }
  93.         #run h2{
  94.             opacity: 0;
  95.             transform: translateX(200px);
  96.             transition: all 2s .5s;
  97.         }
  98.         #run img{
  99.             opacity: 0;
  100.             transform: translateX(200px);
  101.             transition: all 2.5s .5s;
  102.         }
  103.         #run h1.scroll,#run h2.scroll,#run img.scroll{
  104.             opacity: 1;
  105.             transform: translateX(0px);
  106.         }
  107.     </style>
  108. </head>
  109. <body>
  110. <div id="main">
  111.     <h1>鱼C英雄帖</h1>
  112.     <h2>欢迎加入鱼C党卫军</h2>
  113. </div>

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

  119. </div>

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

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

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

  136.         $('#main').addClass('show');
  137.         $(window).scroll(function(){
  138.             pos = $(window).scrollTop();
  139.             if(pos > slogan2_y-buffer){
  140.                 $('#slogan > h1').addClass('scroll');
  141.                 $('#slogan > h2').addClass('scroll');
  142.             }
  143.             if(pos > slogan3_y-buffer){
  144.                 $('#run > h1').addClass('scroll');
  145.                 $('#run > h2').addClass('scroll');
  146.                 $('#run > img').addClass('scroll');
  147.             }
  148.             if(pos < slogan2_y-windowHeight+buffer){
  149.                 $('#slogan > h1').removeClass('scroll');
  150.                 $('#slogan > h2').removeClass('scroll');
  151.             }
  152.             if(pos < slogan3_y-windowHeight+buffer){
  153.                 $('#run > h1').removeClass('scroll');
  154.                 $('#run > h2').removeClass('scroll');
  155.                 $('#run > img').removeClass('scroll');
  156.             }

  158.         })
  159.     })
  160. </script>
  161. </body>
  162. </html>
复制代码
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

小脑斧
发表于 2020-4-18 17:02:07 | 显示全部楼层
cssl里面占好多行啊
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

小脑斧
发表于 2020-4-18 17:03:29 | 显示全部楼层
本帖最后由 小脑斧 于 2020-4-18 17:05 编辑
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>鱼C工作室</title>
  6.     <style type="text/css">
  7.          body{
  8.             background: url("big.jpeg") no-repeat 50% 0;           
  9.             font-family: "仿宋";
  10.             color: #e02562;
  11.         }
  12.         #main{
  13.             opacity: 0;/*opacity初始值设为0，即完全透明。而是从完全透明，渐变出来。结合transtion,更详细结合js*/
  14.             transition: all 2.2s .5s;
  15.             padding-top: 450px;
  16.             text-align: center;
  17.         }
  18.         #main.show{
  19.             opacity: 1;
  20.         }
  21.         #main,#slogan,#run{
  22.             position: relative;
  23.             height: 1400px;
  24.         }
  25.         #main h1{
  26.             font-size: 150px;
  27.             font-family: "Caslon" ;
  28.         }
  29.         #main h2{
  30.             font-size: 50px;
  31.             font-weight: 100;
  32.         }
  33.         /*预先不显示，但是只有当页面滚动到该区域才在中间显示！92内容，slogan设置动画*/
  34.         #slogan{
  35.             padding-top: 335px;
  36.             text-align: center;
  37.         }
  38.         #slogan h1{
  39.             display: inline-block;
  40.             padding-top: 12px;
  41.             padding-bottom: 12px;
  42.             font-size: 55px;
  43.             border-top: 3px solid #000000;
  44.             border-bottom: 3px dotted #000000;

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

  54.             opacity: 0;
  55.             transform: scaleX(0);
  56.             transition: all 1.5s .5s;
  57.         }
  58.         #slogan h1.scroll{
  59.             opacity: 1;
  60.             transform: scaleY(1);
  61.         }
  62.         #slogan h2.scroll{
  63.             opacity: 1;
  64.             transform: scaleY(1);
  65.         }

  67.         #run h1{
  68.             position: absolute;
  69.             font-size: 77px;
  70.             right: 41%;
  71.             top: 1%;

  73.             opacity: 0;
  74.             transform: translateX(-200px);
  75.             transition: all 2s;
  76.         }
  77.         #run h2{
  78.             position: absolute;
  79.             font-size: 33px;
  80.             right: 44%;
  81.             top: 10%;
  82.             font-family: "楷体";

  84.             opacity: 0;
  85.             transform: translateX(200px);
  86.             transition: all 2s .5s;
  87.         }
  88.         #run img{
  89.             position: absolute;
  90.             right: 45%;
  91.             top: 18%;

  93.             opacity: 0;
  94.             transform: translateY(200px);
  95.             transition: all 2s .5s;
  96.         }
  97.         #run h1.scroll{
  98.             opacity: 1;
  99.             transform: scaleY(1);
  100.         }
  101.         #run h2.scroll{
  102.             opacity: 1;
  103.             transform: scaleY(1);
  104.         }
  105.         #run img.scroll{
  106.             opacity: 1;
  107.             transform: scaleY(1);
  108.         }
  109.     </style>
  110.     <script type="text/javascript" src="jquery-3.2.1/jquery-3.2.1.js"></script>
  111.     <script type="text/javascript">        
  112.         $(document).ready(function(){
  113.             var slogan2_y = $('#slogan').offset().top;
  114.             var buffer = 500;/*触发px*/
  115.             var slogan3_y = $('#run').offset().top;
  116.             var windowHeight = $(window).height();
  117.             //#main
  118.             $('#main').addClass('show');
  119.             //slogan h
  120.             $(window).scroll(function(){
  121.                 //先获得slogan的顶部坐标pos。
  122.                 pos = $(window).scrollTop();

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

  130.                 if(pos > slogan3_y-buffer){
  131.                     $('#run > h1').addClass('scroll');
  132.                     $('#run > h2').addClass('scroll');
  133.                     $('#run > img').addClass('scroll');
  134.                 }
  135.                 //自己重新刷新，激活特效。只要界面向上滚动，特效就被remove了
  136.                 if(pos < slogan2_y-windowHeight+buffer){
  137.                     $('#slogan > h1').removeClass('scroll');
  138.                     $('#slogan > h2').removeClass('scroll');
  139.                 }
  140.                 if(pos < slogan3_y-windowHeight+buffer){
  141.                     $('#run > h1').removeClass('scroll');
  142.                     $('#run > h2').removeClass('scroll');
  143.                     $('#run > img').removeClass('scroll');
  144.                 }   
  145.             })
  146.         });
  147.     </script>
  148. </head>
  149. <body>
  150.     <div id="main">
  151.         <h1>鱼C英雄帖</h1>
  152.         <h2>欢迎加入鱼C党卫军</h2>
  153.     </div>

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

  160.     <div id="run">
  161.         <h1>I need U</h1>
  162.         <h2>让编程改变世界</h2>
  163.         <img src="3.jpg">
  164.     </div>
  165. </body>
  166. </html>
复制代码
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-4-18 11:16

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表