51可用代码模板网站

咨询热线:

181-1164-6936
  • 1
CSS样式
当前位置:首页>实用代码>CSS样式>

纯css3实现页面平滑过渡

时间:2017-08-14 14:46点击:

闲话不多说  直接上代码  相信大家都能看得懂  看懂不懂的自己在去看css基础知识点吧


这是HTML 内容


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE-edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Css3实现页面平滑过渡</title>
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/index.css" />
</head>
<body>
    <div class="container">
        <div class="st-container">
            <!-- 导航条开始 -->
            <!-- 利用input的checked状态来为a标签添加选中状态 -->
            <!-- 布局方式input+a标签,不可以添加父级,不然css无法选择到st-scroll -->
                        <input type="radio" name="radio-set" checked="checked" id="st-control-1">
                        <a class="nav-a" href="#st-panel-1">Serendipity</a>

                        <input type="radio" name="radio-set" id="st-control-2">
                        <a class="nav-a" href="#st-panel-2">Happiness</a>

                        <input type="radio" name="radio-set" id="st-control-3">
                        <a  class="nav-a" href="#st-panel-3">Tranquillity</a>

                        <input type="radio" name="radio-set" id="st-control-4">
                        <a class="nav-a" href="#st-panel-4">Positivity</a>

                        <input type="radio" name="radio-set" id="st-control-5">
                        <a class="nav-a" href="#st-panel-5">Friendship</a>
            <!-- 导航条结束 -->
            <!-- 页面主体内容开始 -->
            <div class="st-scroll">
                <!-- 第一屏 -->
                <section class="st-panel" id="st-panel-1">
                    <!-- 页面上方的三角形,data-icon是三角形中的图标样式! -->
                    <div class="st-desc" data-icon="H"></div>
                    <h2>Serendipity</h2>
                    <p>走过春的田野,趟过夏的激流,来到秋天就是安静祥和的世界。秋天,虽没有玫瑰的芳香,却有秋菊的淡雅,没有繁花似锦,却有硕
果累累。秋天,没有夏日的激情,却有浪漫的温情,没有春的奔放,却有收获的喜悦。清风落叶舞秋韵,枝头硕果醉秋容。秋天是甘美的酒,秋天是壮丽的诗,
秋天是动人的歌。</p>
                </section>
                <!-- 第二屏 -->
                <section class="st-panel st-color" id="st-panel-2">
                    <div class="st-desc" data-icon="2"></div>
                    <h2>Happiness</h2>
                    <p>时光如流,岁月带走了许多,却始终带不走那牵心的伤痕,寂静中,依然听得那一声声伤感的叹息;岁月如水,时光抹去了许多,却
始终抹不去那伤心的印迹,孤独中,依然感受了那一阵阵酸辛的撞击。人生,总有一些人,一些事,一些情,始终也走不出记忆,深居心灵,让你独自品尝时,
享受着那份孤独的美丽。</p>
                </section>
                <!-- 第三屏 -->
                <section class="st-panel" id="st-panel-3">
                    <div class="st-desc" data-icon="B"></div>
                    <h2>Tranquillity</h2>
                    <p>静静地站立枝头,静静地绽放。不期待那赞许的目光,不奢望那雷鸣般的掌声,不吝惜那优雅的花香;没有蜂缠蝶绕,没有绿叶簇拥,
也不惧雨雪冰霜。在废园一角或是深山峡谷,静静地开花,悄悄地凋落。它曾来过这个世界,它属于这个世界,曾经拥有过这个世界,将曾有的倩影,曾有的花
香留下,然后,悄悄离去。像一缕清风,像一颗流星…</p>
                </section>
                <!-- 第四屏 -->
                <section class="st-panel st-color" id="st-panel-4">
                    <div class="st-desc" data-icon="x"></div>
                    <h2>Positivity</h2>
                    <p>别想来日方长,世上最愚不可及的事,莫过于胸有大志,却又虚掷时光。一生其实不长,有时还没等你活透彻,青春难觅,垂暮已至,
唯留一声嗟叹。岁月难饶,光阴不逮,我们现在过的每一天,都是我们余生中最年轻的一天,把握不好当下,未来必是一片虚无。我们需要梦想,但要迈开腿,
历经跋涉方能抵达。</p>
                </section>
                <!-- 第五屏 -->
                <section class="st-panel" id="st-panel-5">
                    <div class="st-desc" data-icon="c"></div>
                    <h2>Friendship</h2>
                    <p>用友谊写一本书,一本厚厚的书。在书里,友谊如珍珠,我们共同穿缀,联成一串串璀璨的项链;友谊如彩绸,我们共同剪裁,缝制
成一件件绚丽的衣衫;友谊如油彩,我们共同调色,描绘出一幅幅美妙的图画。</p>
                </section>
            </div>
            <!-- 页面主体内容结束 -->
        </div>
        </div>
    </div>
</body>
</html>


CSS内容



/*设置页面上方三角形内的图标,实际上是一种字体*/
@font-face{
    /*设置字体类型*/
    font-family: "raphaelicons";
    /*引入字体文本,共有4个后缀文件需要全部引入*/
    src:url('../fonts/raphaelicons-webfont.eot') format('eot'),
        url('../fonts/raphaelicons-webfont.ttf') format('ttf'),
        url('../fonts/raphaelicons-webfont.woff') format('woff'),
        url('../fonts/raphaelicons-webfont.svg') format('svg');
        /*宽度和样式不设置*/
        font-weight: normal;
        font-style: normal;
}
body{
    font-family: Georgia,serif;
    background-color: #ddd;
    font-weight: 400;
    font-size: 15px;
    color: #333;
    /*字体抗锯齿效果,可以使字体更加平滑*/
    -webkit-font-smoothing:antialiased;
}

a{
    color: #555;
    text-decoration: none;
}

.clr{
    width: 0;
    height: 0;
    overflow: hidden;
    clear: both;
    padding: 0;
    margin: 0;
}

/*设置根父级大小占满整个屏幕,定位后设置4个方向为0,可以自动撑满整个屏幕*/
.st-container{
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    font-family: "Josefin Slab","myriad Pro",Arial,sans-serif;
}

/* > 子选择器,只选择子级,孙子级不会有影响,但是最好是给定元素一个类
,这样灵活性会更好,层级嵌套不会那么紧密,浏览器解析css是从右向左的,
所以类选择器会比元素选择器更好一点,input留作对比*/
.st-container > input,
.st-container > .nav-a{
    /*宽度设置100/5=20%*/
    width: 20%;
    height: 50px;
    line-height: 50px;
    /*固定到页面底部*/
    position: fixed;
    bottom: 0;
    /*页面所有层级最好不要超过2*/
    z-index: 1;
}

/*input设置为透明,层级要比a高*/
.st-container > input{
    opacity: 0;
    z-index: 2;
    /*鼠标样式变为手形*/
    cursor:pointer;
}

/*设置a*/
.st-container > .nav-a{
    font-weight: 700;
    font-size: 20px;
    background-color: #e23a6e;
    text-align: center;
    color: #fff;
}

/* + 紧邻兄弟选择器,只会选择紧邻的兄弟级*/
#st-control-1,#st-control-1 + .nav-a{
    left: 0;
}
#st-control-2,#st-control-2 + .nav-a{
    left: 20%;
}
#st-control-3,#st-control-3 + .nav-a{
    left: 40%;
}
#st-control-4,#st-control-4 + .nav-a{
    left: 60%;
}
#st-control-5,#st-control-5 + .nav-a{
    left: 80%;
}


/*添加高亮效果,当input为checked时 ,它的兄弟级a标签背景色改变
    当input为checked并且有hover时 a改变颜色,
*/
input:checked + .nav-a,
input:checked:hover + .nav-a{
    background-color: #821134;
}

/*绘制三角形,当input为选中状态时,在a的后面添加伪元素,并绘制为三角
形,定位到导航上方*/
input:checked + .nav-a:after {
    content: "";
    /*绘制三角形方法,宽高为0,border颜色为透明,底部border颜色添加,
    定位*/
    width: 0;
    height: 0;
    overflow: hidden;
    border: 20px solid transparent;
    border-bottom-color: #821134;
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -20px;
}

/*当input hover效果时 他的兄弟级a标签变色*/
input:hover + .nav-a {
    background-color: #ad244f;
}

/*内容区*/
/*父级 与每一屏宽高100%,并且相对定位*/
.st-scroll,
.st-panel{
    width: 100%;
    height: 100%;
    position: relative;
}

.st-panel{
    overflow: hidden;
    z-index: 0;
}

/*设定父级的位置0,0*/
.st-scroll{
    left: 0;
    top: 0;
    /*设定过渡效果,transform 0.6秒完成 ,又快到慢*/
    transition:transform 0.6s ease-in-out;
    /*设定transform属性为3d,开启3d可以开启手机cpu加速,初始位置为0,*/
    transform:translate3d(0,0,0);
    -webkit-transform:translate3d(0,0,0);
    -ms-transform:translate3d(0,0,0);
    -o-transform:translate3d(0,0,0);
    -moz-transform:translate3d(0,0,0);
    -webkit-backface-visibility:hide; /*笔记点*/
}

/*当前选中的input的兄弟级,~ 兄弟选择器,不需要紧邻,这也是为什么刚
开始我们导航条不设置父级的原因,不然选择不到.st-scroll*/
/*第一屏选中时,.st-scroll的位置在Y轴上不动*/
#st-control-1:checked ~ .st-scroll {
    transform:translateY(0%);
    -moz-transform:translateY(0%);
    -ms-transform:translateY(0%);
    -o-transform:translateY(0%);
    -webkit-transform:translateY(0%);
}
/*第一屏选中时,.st-scroll的位置在Y轴向上移动(-1*100%)也就是一个页面
的高度*/
#st-control-2:checked ~ .st-scroll {
    transform:translateY(-100%);
    -moz-transform:translateY(-100%);
    -ms-transform:translateY(-100%);
    -o-transform:translateY(-100%);
    -webkit-transform:translateY(-100%);
}
/*第一屏选中时,.st-scroll的位置在Y轴向上移动(-2*100%)也就是2个页面
的高度*/
#st-control-3:checked ~ .st-scroll {
    transform:translateY(-200%);
    -moz-transform:translateY(-200%);
    -ms-transform:translateY(-200%);
    -o-transform:translateY(-200%);
    -webkit-transform:translateY(-200%);
}
/*以此类推,不断向上移动*/
#st-control-4:checked ~ .st-scroll {
    transform:translateY(-300%);
    -moz-transform:translateY(-300%);
    -ms-transform:translateY(-300%);
    -o-transform:translateY(-300%);
    -webkit-transform:translateY(-300%);
}
/*以此类推,不断向上移动*/
#st-control-5:checked ~ .st-scroll {
    transform:translateY(-400%);
    -moz-transform:translateY(-400%);
    -ms-transform:translateY(-400%);
    -o-transform:translateY(-400%);
    -webkit-transform:translateY(-400%);
}

/*设置页面上方的三角块,给定一个正方形,然后旋转45deg,
位置使用translateY(-50%),自身的一半*/
.st-desc {
    width: 350px;
    height: 350px;
    background-color: #fa96b5;
    position: absolute;
    left: 50%;
    margin-left: -175px;
    z-index: 0;
    transform:translateY(-50%) rotate(45deg);
}

/*属性前添加内容*/
[data-icon]:after{
    /*attr 调用自定义属性的内容*/
    content: attr(data-icon);
    width: 350px;
    height: 350px;
    /*background-color: #0f0;*/
    color: #fff;
    font-size: 180px;
    text-align: center;
    line-height: 350px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: rotate(-45deg);
    margin: -100px 0 0 -100px;
    /*字体调用最开始引入的艺术字体*/
    font-family: "raphaelicons";
}

/*设定内容标题样式*/
.st-panel h2{
    color: #e23a6e;
    font-size: 70px;
    line-height: 50px;
    text-align: center;
    font-weight: 900;
    margin-top: 294px;
    /*文本阴影*/
    text-shadow: 1px 1px 8px rgba(151,24,64,0.5);
}
/*自定义动画 标题从上到下*/
@-webkit-keyframes moveDown{
    0%{
        -webkit-transform:translateY(-40px);
        opacity: 0;
    }
    100%{
        -webkit-transform:translateY(0px);
        opacity: 1;
    }
}
/*自定义动画 文本从下到上*/
@-webkit-keyframes moveUp{
    0%{
        -webkit-transform:translateY(40px);
        opacity: 0;
    }
    100%{
        -webkit-transform:translateY(0px);
        opacity: 1;
    }
}
/*标题动画设置*/
#st-control-1:checked ~ .st-scroll #st-panel-1 h2,
#st-control-2:checked ~ .st-scroll #st-panel-2 h2,
#st-control-3:checked ~ .st-scroll #st-panel-3 h2,
#st-control-4:checked ~ .st-scroll #st-panel-4 h2,
#st-control-5:checked ~ .st-scroll #st-panel-5 h2{
    -webkit-animation:moveDown 1s ease-in-out 0.2s backwards;
    -moz-animation:moveDown 0.6s ease-in-out 0.2s backwards;
    -ms-animation:moveDown 0.6s ease-in-out 0.2s backwards;
    -o-animation:moveDown 0.6s ease-in-out 0.2s backwards;
    animation:moveDown 1s ease-in-out 0.2s backwards;
}

.st-panel p{
    width: 50%;
    font-size: 20px;
    text-align: center;
    margin: 0 auto;
    margin-top: 50px;
    color: #333;
    word-spacing: 8px;
    line-height: 30px;
}
/*文本动画设置*/
#st-control-1:checked ~ .st-scroll #st-panel-1 p,
#st-control-2:checked ~ .st-scroll #st-panel-2 p,
#st-control-3:checked ~ .st-scroll #st-panel-3 p,
#st-control-4:checked ~ .st-scroll #st-panel-4 p,
#st-control-5:checked ~ .st-scroll #st-panel-5 p{
    -webkit-animation:moveUp 1s ease-in-out 0.2s backwards;
    -moz-animation:moveUp 0.6s ease-in-out 0.2s backwards;
    -ms-animation:moveUp 0.6s ease-in-out 0.2s backwards;
    -o-animation:moveUp 0.6s ease-in-out 0.2s backwards;
    animation:moveUp 1s ease-in-out 0.2s backwards;

}

.st-color{
    background-color: #fa96b5;
}

.st-color [data-icon]:after{
    color: #fa96b5;
}

.st-color .st-desc{
    background-color: #fff;
}
.st-color h2{
    color: #fff;
}

/*媒体查询,重置样式*/
@media screen and (max-width: 520px){
    .st-panel h2{
        font-size: 42px;
    }
    .st-panel p{
        width: 90%;
        left: 10%;
        margin-top: 0;
        margin-top: 30px;
    }
    .st-container > a {
        font-size: 13px;
    }
    .st-desc{
        width: 200px;
        height:200px;
        margin-left: -100px;
    }
    [data-icon]:after{
        width: 120px;
        height: 120px;
        font-size: 120px;
    }
    .st-panel h2{
        margin-top:154px; 
    }

}
/*媒体查询,重置样式*/
@media  (min-width: 520px) and (max-width: 820px){
    .st-panel h2{
        font-size: 60px;
    }
    .st-panel p{
        width: 90%;
        left: 10%;
        margin-top: 0;
        margin-top: 30px;
    }
    .st-container > a {
        font-size: 14px;
    }
    .st-desc{
        width: 300px;
        height:300px;
        margin-left: -150px;
    }
    [data-icon]:after{
        width: 120px;
        height: 120px;
        font-size: 120px;
    }
    .st-panel h2{
        margin-top:220px; 
    }
}


51可用模板(代码)网站专为广大站长朋友提供精品模板与代码,同时免费提供网站收录。
本站域名: WWW.51KYDM.COM    联系方式:QQ:182468923    手机:18111646936
本站关键词:网站链接收录网址收录入口网站免费提交收录网站收录提交入口    网站地图
51可用模板
展开