• <dl id="06azv"></dl>

      <li id="06azv"></li>

          1. <dl id="06azv"></dl>

              <dl id="06azv"><ins id="06azv"></ins></dl>
              <dl id="06azv"><ins id="06azv"><thead id="06azv"></thead></ins></dl>

                <dl id="06azv"><ins id="06azv"></ins></dl>
              1. <li id="06azv"></li>

                <dl id="06azv"><s id="06azv"></s></dl>
                <li id="06azv"><ins id="06azv"><thead id="06azv"></thead></ins></li>

              2. <li id="06azv"><ins id="06azv"><strong id="06azv"></strong></ins></li>
                <dl id="06azv"></dl>

              3. <dl id="06azv"></dl>

                  <form id="06azv"></form>
                  1. <li id="06azv"><ins id="06azv"></ins></li>

                    1. <output id="06azv"></output>

                      代理加盟 2018全新代理計劃 0預存,0充值,獨立平臺,豐厚利潤!

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

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

                      來源:未知 發布時間: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.lrwh.tw/news/449.html

                        責任編輯:秀站網
                        云南11选五5走势图