zoukankan      html  css  js  c++  java
  • 正反面的实现

    《HTML》

    <div class="content">
    <div class="translate">
    <div class="front">
    <p>吃</p>
    </div>
    <!-- 反面 --><!-- background-size设置背景图的大小 值为contain时 同比例缩放图片大小 -->
    <div class="back">
    <p>背面</p>
    </div>
    </div>
    <div class="translate">
    <!-- 正面 -->
    <div class="front">
    <p>西</p>
    </div>
    <div class="back">
    <p>背面</p>
    </div>
    </div>
    <div class="translate">
    <!-- 正面 -->
    <div class="front">
    <p>瓜</p>
    </div>
    <div class="back">
    <p>背面</p>
    </div>
    </div>

    《css》

    .back {
    background:url(../images/11.png) no-repeat;
    background-size:300px 400px;
    }
    /*页面内容*/
    .content {
    perspective:1000px;
    1300px;
    margin:0 auto;
    }
    /*包含正反面div*/
    .translate {
    300px;
    height: 300px;
    border-radius: 50%;
    margin-left:10px;
    margin-bottom:120px;
    display: inline-block;/*div横排显示,变成行级元素*/
    cursor: pointer;
    }
    /*正面*/
    .translate .front{
    300px;
    height: 300px;
    border-radius: 50%;
    display: inline-block;
    background-color: pink;
    }
    /*反面*/
    .translate .back{
    300px;
    height: 400px;
    border-radius: 50%;
    display: none;/*让背面先隐藏,不显示*/
    }
    /*正反面文字样式*/
    .front p{
    text-align: center;
    font-size: 72px;
    color:#fff;
    line-height: 145px;
    font-family: "隶书";
    }
    .back p{
    text-align: center;
    font-size: 72px;
    line-height: 145px;
    color:#fff;
    opacity: 0;/*使背面的字为透明,不显示*/
    font-family: "微软雅黑";
    }

    《js》

    $(function(){
    $(".translate").hover(function(){
    $(this).css({"transform":"rotateY(180deg)","transition":"0.6s"});//沿着Y轴旋转180度,动画时间
    //获取当前索引值,当前是哪个div
    var n=$(this).index();
    //将背面翻转过显示,将正面隐藏
    $(".back").eq(n).css({"transform":"rotateY(180deg)","display":"inline-block"});
    $(".front").eq(n).hide()
    },function(){
    $(this).css("transform","rotateY(0deg)");
    //获取当前索引值,当前是哪个div
    var n=$(this).index();
    //将背面翻转过显示,将正面隐藏
    $(".front").eq(n).css({"transform":"rotateY(360deg)","display":"inline-block"});
    $(".back").eq(n).hide()
    })
    })

  • 相关阅读:
    Codeforces 1045C Hyperspace Highways (看题解) 圆方树
    Codeforces 316E3 线段树 + 斐波那切数列 (看题解)
    Codeforces 803G Periodic RMQ Problem 线段树
    Codeforces 420D Cup Trick 平衡树
    Codeforces 295E Yaroslav and Points 线段树
    Codeforces 196E Opening Portals MST (看题解)
    Codeforces 653F Paper task SA
    Codeforces 542A Place Your Ad Here
    python基础 异常与返回
    mongodb 删除
  • 原文地址:https://www.cnblogs.com/ZHAOcong31/p/7407135.html
Copyright © 2011-2022 走看看