0 0 9 2 - 鱼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
纳尼
虽然很凌乱
但是作为鱼油

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里面占好多行啊

小脑斧 · 发表于 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>

账号		自动登录	找回密码
密码			立即注册

不二如是不二如是当前离线 UID 378930 日志相册贡献荣誉积分 57321 狗仔卡	发表于 2017-3-21 16:11:51 \| 显示全部楼层 \|阅读模式购买主题已有 5 人购买本主题需向作者支付 5 鱼币才能浏览本帖被以下淘专辑推荐: · HTML5 & CSS3 - 庖丁解牛\|主题: 205, 订阅: 37
	想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
	回复使用道具举报置顶卡千斤顶显身卡

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

本帖被以下淘专辑推荐:

评分

评分