• 代理加盟 2019全新代理計劃 賺錢+省錢雙管齊下,獨立平臺,豐厚利潤!

    您現在的位置: 秀站網 > 站長學院 > 建站教程 >

    網頁設計核心內容對視覺表現的影響

    來源:未知 發布時間:2014-04-15熱度:我要評論
    三角形翻轉的效果,大家想必見過,這里就把相關代碼貼下,大家可以應用哦,當然翻轉效果暫時不支持IE 6 7 8。 1、純CSS做個三角 代碼如下: style type=text/css .rightdirection { width:0;he...

    三角形翻轉的效果,大家想必見過,這里就把相關代碼貼下,大家可以應用哦,當然翻轉效果暫時不支持IE 6 7 8。

    1、純CSS做個三角

    代碼如下:
    <style type="text/css">
    .rightdirection
    {
     width:0;height:0;
     line-height:0;
     border-width:20px;
     border-style:solid;
     border-color:transparent transparent transparent #A9DBF6;
    }
    .bottomdirection
    {
     width:0;height:0;
     line-height:0;
     border-width:20px;
     border-style:solid;
     border-color: #A9DBF6 transparent transparent transparent;
    }
    .leftdirection
    {
     width:0;height:0;
     line-height:0;
     border-width:20px;
     border-style:solid;
     border-color: transparent #A9DBF6 transparent transparent;
    }
    .topdirection
    {
     width:0;height:0;
     line-height:0;
     border-width:20px;
     border-style:solid;
     border-color: transparent transparent #A9DBF6 transparent;
    }
    </style>
    <div  class="rightdirection"></div>
    <p>
    <div  class="bottomdirection"></div>
    <p>
    <div  class="leftdirection"></div>
    <p>
    <div  class="topdirection"></div>

    2.翻轉:實現翻轉

    <!DOCTYPE html>
    <html>
    <head>
    <style>


    .jt b {
        border-color: #FFD0C0 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
        border-style: solid dashed dashed;
        border-width: 10px;
        font-size: 0;
        height: 0;
        line-height: 0;
        position: absolute;
        left: 150px;
        top: 14px;
        width: 0;
    }
    .jt:hover b {
        border-color: #ccc rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
        transform: rotate(180deg);
        transform-origin: 50% 30% 0;
        transition: transform 0.2s ease-in 0s;
     -moz-transform: rotate(180deg);
        -moz-transform-origin: 50% 30% 0;
        -moz-transition: transform 0.2s ease-in 0s;
    }


    </style>
    </head>
    <body>

    <div class="jt">
     <b>你好啊</b>
     </div>

    </body>
    </html>

    本文地址:http://www.uanl.tw/news/449.html

      責任編輯:秀站網
      广东十一选五专家计划