<nav id="qvmyt"><address id="qvmyt"></address></nav>
<pre id="qvmyt"></pre>
<u id="qvmyt"><listing id="qvmyt"></listing></u>


    <li id="qvmyt"><menuitem id="qvmyt"></menuitem></li>
    <li id="qvmyt"><source id="qvmyt"></source></li><progress id="qvmyt"><sub id="qvmyt"></sub></progress>
    <optgroup id="qvmyt"></optgroup>
  • 歡迎來到AD8000.CN 站長教程網!

    HTML5

    當前位置:主頁 > 網頁制作 > HTML5 >

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

    時間:2017-11-22|欄目:HTML5|點擊:

    三角形翻轉的效果,大家想必見過,這里就把相關代碼貼下,大家可以應用哦,當然翻轉效果暫時不支持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.yunziyuan.com.cn/news/449.html

    上一篇:Flash網站與html5網站區別

    欄    目:HTML5

    下一篇:沒有了

    本文標題:網頁設計核心內容對視覺表現的影響

    本文地址:

    您可能感興趣的文章

    說點什么吧
    • 全部評論(0
      還沒有評論,快來搶沙發吧!

    廣告投放 | 聯系我們 | 版權申明

    重要申明:本站所有的文章、圖片、評論等,均由網友發表或上傳并維護或收集自網絡,屬個人行為,與本站立場無關。

    如果侵犯了您的權利,請與我們聯系,我們將在24小時內進行處理、任何非本站因素導致的法律后果,本站均不負任何責任。

    聯系QQ:215436232 | 郵箱:215436232#qq.com(#換成@)

    Copyright © 2020-2022 站長教程網 AD8000.CN 版權所有

    河北懦蟹装饰工程有限公司