美文网首页
css3特效动画和CSS3选择器的集合使用

css3特效动画和CSS3选择器的集合使用

作者: 霁雨轩阁 | 来源:发表于2018-09-12 21:40 被阅读0次

    //HTML

    <!DOCTYPE html>
    <html lang="zh-cn">
    <head>
    <meta charset="UTF-8">
    <title>一个简单的小效果</title>

    <meta http-equiv="x-ua-compatible" content="IE-edge,chrome=1">

    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/index.css">
    </head>
    <body>
    <div class="container">

    <input type="radio" id="control-1" name="choose" checked="checked" />
    <a href="#panel-1">ワンピース</a>
    <input type="radio" id="control-2" name="choose" />
    <a href="#panel-2">ワンピース</a>
    <input type="radio" id="control-3" name="choose" />
    <a href="#panel-3">ワンピース</a>
    <input type="radio" id="control-4" name="choose" />
    <a href="#panel-4">ワンピース</a>

    <div class="scroll">
    <section class="panel" id="panel-1">
    <div class="arrow" data-icon="󰂄"></div>
    <h2>ONE PIECE</h2>
    <p>ルーフィ：俺は、海贼王になる男だ！</p>
    </section>
    <section class="panel p-color" id="panel-2">
    <div class="arrow" data-icon="󰀦"></div>
    <div class="role role-up">
    <img src="img/c_01.png"/>
    <img src="img/c_02.png"/>
    <img src="img/c_03.png"/>
    <img src="img/c_04.png"/>
    </div>
    <div class="role role-down">
    <img src="img/c_05.png"/>
    <img src="img/c_06.png"/>
    <img src="img/c_07.png"/>
    <img src="img/c_08.png"/>
    <img src="img/c_09.png"/>
    </div>
    </section>
    <section class="panel" id="panel-3">
    <div class="arrow" data-icon="󰂄"></div>
    <h2>ONE PIECE</h2>
    <p>ルーフィ：俺は、海贼王になる男だ！</p>
    </section>
    <section class="panel p-color" id="panel-4">
    <div class="arrow" data-icon="󰀦"></div>
    <div class="caption caption-up">
    <img src="img/c_10.jpg"/>
    <img src="img/c_11.jpg"/>
    <img src="img/c_12.jpg"/>
    <img src="img/c_13.jpg"/>
    </div>
    <div class="caption caption-down">
    <img src="img/c_14.jpg"/>
    <img src="img/c_15.jpg"/>
    <img src="img/c_16.jpg"/>
    <img src="img/c_17.jpg"/>
    <img src="img/c_18.jpg"/>
    </div></section>
    </div>
    </div>
    </body>
    </html>


    6299FDC1170F8FFF6DE5DFE5FF5D47A2.png

    //CSS
    @charset "utf-8";
    @font-face {
    font-family: 'iconfont';
    src: url('../iconfont/iconfont.eot'); /* IE9/
    src: url('../iconfont/iconfont.eot?#iefix') format('embedded-opentype'), /     IE6-IE8 /
    url('../iconfont/iconfont.woff') format('woff'), /     chrome、firefox /
    url('../iconfont/iconfont.ttf') format('truetype'), /     chrome、firefox、opera、Safari, Android, iOS 4.2+/
    url('../iconfont/iconfont.svg#iconfont') format('svg'); /     iOS 4.1- /
    }
    .iconfont{
    font-family:"iconfont" !important;
    font-size:16px;
    font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
    }
    html,body,input,a,div,section,h2,p{/    初始化/
    ppadding: 0;
    margin: 0;
    }
    a{
    text-decoration: none; /    去点a的下划线/
    }
    body{
    font-family:arial ;
    color: #333;
    overflow: hidden;/    超出的3个暂时隐藏/
    }
    .container{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    }
    /    4个变化点的开始/
    .container input,.container a{
    width: 25%;
    height: 40px;
    position: fixed;
    bottom: 0;
    left: 0;
    color: #fff;
    }
    .container a{
    background-color: deepskyblue;
    text-align: center;
    line-height: 40px;
    font-family: "微软雅黑";
    z-index: 1;
    }
    .container input{
    z-index: 10;/    使input在最上层/
    opacity: 0; /    但是不显示出来/
    cursor: pointer;
    }
    /    使4个按钮平铺开*/

    control-2,#control-2+a{/加号表示紧挨这的A/

    left: 25%;

    }

    control-3,#control-3+a{

    left: 50%;

    }

    control-4,#control-4+a{

    left: 75%;

    }
    .container>input:checked+a,.container>input:checked:hover+a{/被选中的input的a悬停时还是橙色/
    background-color: orange;
    }
    .container>input:checked+a:after{/用伪类在选择卡上加一个小三角/
    content: "";
    width: 0;
    height: 0;
    border: 20px solid transparent;
    border-bottom-color: orange;
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -20px;
    }
    .container>input:hover+a{/鼠标悬停没有被选中的选项卡是颜色变化/
    background-color:dodgerblue;
    }
    /4个变化点结束/
    /主要内容样式的设置开始/
    .scroll,.panel{
    width: 100%;
    height: 100%;
    position: relative;
    }
    .panel{
    overflow: hidden;
    background-color: white;
    }
    .scroll{
    /3D开启手机硬件加速/
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: traslate3d(0,0,0);
    -o-transform:traslate3d(0,0,0);
    transform: traslate3d(0,0,0);
    /平滑过渡/
    -webkit-transition:all 0.6s ease-in-out ;
    -moz-transition:all 0.6s ease-in-out ;
    -ms-transition:all 0.6s ease-in-out ;
    -o-transition:all 0.6s ease-in-out ;
    transition:all 0.6s ease-in-out ;

    }
    /利用CSS3实现页面的位置的变化,写兼容/

    control-1:checked~ .scroll{/利用css3选择器,当第一个选项卡被选中时,执行页面变化/

    -webkit-transform: translateY(0%);
-moz-transform: translateY(0%);
-ms-transform: translateY(0%);
-o-transform:translateY(0%);
transform: translateY(0%);

    }

    control-2:checked~ .scroll{

    -webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform:translateY(-100%);
transform: translateY(-100%);

    }

    control-3:checked~ .scroll{

    -webkit-transform: translateY(-200%);
-moz-transform: translateY(-200%);
-ms-transform: translateY(-200%);
-o-transform:translateY(-200%);
transform: translateY(-200%);

    }

    control-4:checked~ .scroll{

    -webkit-transform: translateY(-300%);
-moz-transform: translateY(-300%);
-ms-transform: translateY(-300%);
-o-transform:translateY(-300%);
transform: translateY(-300%);

    }
    .panel .arrow{/顶部的三角形/
    width: 200px;
    height: 200px;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -200px;
    background-color: deepskyblue;
    -webkit-transform: rotate(45deg) translateY(-75%);
    -moz-transform: rotate(45deg) translateY(-75%);
    -ms-transform: rotate(45deg) translateY(-75%);
    -o-transform:rotate(45deg) translateY(-75%);
    transform: rotate(45deg) translateY(-75%);
    }
    [data-icon]:after{/顶通过伪类制作顶部的小帽子/
    content: attr(data-icon);
    width: 200px;
    height: 200px;
    color: #fff;
    font-size: 90px;
    text-align: center;
    line-height: 200px;
    position: absolute;
    left: 50%;
    margin-left: -100px;
    top: 0;
    font-family: "iconfont";
    -webkit-transform: rotate(-45deg) translateY(25%);
    -moz-transform: rotate(-45deg) translateY(25%);
    -ms-transform: rotate(-45deg) translateY(25%);
    -o-transform:rotate(-45deg) translateY(25%);
    transform: rotate(-45deg) translateY(25%);
    }
    .scroll h2{
    color: skyblue;
    font-size: 54px;
    line-height: 50px;
    text-align: center;
    position: absolute;
    width: 100%;
    top: 35%;
    font-weight: 900;
    }
    .scroll p{
    color: #C0C0C0;
    font-size: 18px;
    line-height: 20px;
    text-align: center;
    position: absolute;
    width: 100%;
    top: 50%;
    font-family: "微软雅黑";
    }
    .scroll .role,.scroll .caption{
    width: 100%;
    text-align: center;
    position: absolute;
    top: 30%;
    }
    .scroll .role img,.scroll .caption img{/小图片的设置/
    width: 100px;
    border: 3px solid #fff;
    border-radius: 50%;
    margin: 5px 5px;
    cursor: pointer;
    -webkit-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
    }
    .scroll .role img:hover{
    border-radius: 10px;
    }
    .scroll .caption img:hover{
    border-radius: 50%;
    }
    .scroll .caption img{
    border-radius:10px;

    }
    .scroll .role-down,.scroll .caption-down{
    top: 52%;
    }
    .p-color{
    background-color: skyblue;
    }
    .p-color .arrow{
    background: #fff;
    }
    .p-color [data-icon]:after{
    color: skyblue;
    }

    control-1:checked~ .scroll #panel-1 h2,

    control-2:checked~ .scroll #panel-2 .role-up,

    control-3:checked~ .scroll #panel-3 h2,

    control-4:checked~ .scroll #panel-4 .caption-up{/中间的第一层向下滑动的效果/

    -webkit-animation: moveDown 0.6s ease-in-out 0.2s backwards;
-ms-animation: moveDown 0.6s ease-in-out 0.2s backwards;
-moz-animation: moveDown 0.6s ease-in-out 0.2s backwards;
-o-animation: moveDown 0.6s ease-in-out 0.2s backwards;
animation: moveDown 0.6s ease-in-out 0.2s backwards;

    }
    @-webkit-keyframes moveDown{
    0%{
    -webkit-transform: translateY(-40px);
    opacity: 0;
    }
    100%{
    -webkit-transform: translateY(0px);
    opacity: 1;
    }
    }
    @-moz-keyframes moveDown{
    0%{
    -webkit-transform: translateY(-40px);
    opacity: 0;
    }
    100%{
    -webkit-transform: translateY(0px);
    opacity: 1;
    }
    }
    @-o-keyframes moveDown{
    0%{
    -webkit-transform: translateY(-40px);
    opacity: 0;
    }
    100%{
    -webkit-transform: translateY(0px);
    opacity: 1;
    }
    }
    @-ms-keyframes moveDown{
    0%{
    -webkit-transform: translateY(-40px);
    opacity: 0;
    }
    100%{
    -webkit-transform: translateY(0px);
    opacity: 1;
    }
    }
    @keyframes moveDown{
    0%{
    -webkit-transform: translateY(-40px);
    opacity: 0;
    }
    100%{
    -webkit-transform: translateY(0px);
    opacity: 1;
    }
    }

    control-1:checked~ .scroll #panel-1 p,

    control-2:checked~ .scroll #panel-2 .role-down,

    control-3:checked~ .scroll #panel-3 p,

    control-4:checked~ .scroll #panel-4 .caption-down{/中间第二层向上滑动的效果/

    -webkit-animation: moveDown 0.6s ease-in-out 0.2s backwards;
-ms-animation: moveDown 0.6s ease-in-out 0.2s backwards;
-moz-animation: moveDown 0.6s ease-in-out 0.2s backwards;
-o-animation: moveDown 0.6s ease-in-out 0.2s backwards;
animation: moveDown 0.6s ease-in-out 0.2s backwards;

    }
    @-webkit-keyframes moveDown{
    0%{
    -webkit-transform: translateY(40px);
    opacity: 0;
    }
    100%{
    -webkit-transform: translateY(0px);
    opacity: 1;
    }
    }
    @-moz-keyframes moveDown{
    0%{
    -webkit-transform: translateY(40px);
    opacity: 0;
    }
    100%{
    -webkit-transform: translateY(0px);
    opacity: 1;
    }
    }
    @-o-keyframes moveDown{
    0%{
    -webkit-transform: translateY(40px);
    opacity: 0;
    }
    100%{
    -webkit-transform: translateY(0px);
    opacity: 1;
    }
    }
    @-ms-keyframes moveDown{
    0%{
    -webkit-transform: translateY(40px);
    opacity: 0;
    }
    100%{
    -webkit-transform: translateY(0px);
    opacity: 1;
    }
    }
    @keyframes moveDown{
    0%{
    -webkit-transform: translateY(40px);
    opacity: 0;
    }
    100%{
    -webkit-transform: translateY(0px);
    opacity: 1;
    }
    }
    /主要内容样式设置结束/

    相关文章

      网友评论

          本文标题：css3特效动画和CSS3选择器的集合使用

          本文链接：https://www.haomeiwen.com/subject/faabgftx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|css3特效动画和CSS3选择器的集合使用|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！