• 长度能绕田径场一圈  加长版“复兴号”动车组将亮相京沪高铁 2019-02-25
  • 李慎明:奋力谱写社会主义现代化新征程壮丽篇章 2019-02-14
  • 走高端路线 北汽与麦格纳拟成立合资公司 2019-02-02
  • 推进新时代中国特色社会主义云南新实践——访云南省委书记陈豪 2019-02-02
  • 时速350公里自动驾驶!京张智能高铁大片来了 2018-12-08
  • 老旧厂房里的“文创梦”(人民眼·建设新型城市文化空间) 2018-11-27
  • 代理加盟 2019全新代理计划 赚钱+省钱双管齐下,独立平台,丰厚利润!

    您现在的位置: 11选五开奖结果走势图 > 站长学院 > 建站教程 >

    体彩竞彩:网页设计核心内容对视觉表现的影响

    来源:未知 发布时间:2014-04-15热度: ℃我要评论
    三角形翻转的效果,大家想必见过,这里就把相关代码贴下,大家可以应用哦,当然翻转效果暂时不支持IE 6 7 8。 1、纯CSS做个三角 代码如下: style type=text/css .rightdirection { width:0;he...

    11选五开奖结果走势图 www.dwxy9.com

    三角形翻转的效果,大家想必见过,这里就把相关代码贴下,大家可以应用哦,当然翻转效果暂时不支持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>

    本文地址://www.dwxy9.com/news/449.html

    • 长度能绕田径场一圈  加长版“复兴号”动车组将亮相京沪高铁 2019-02-25
    • 李慎明:奋力谱写社会主义现代化新征程壮丽篇章 2019-02-14
    • 走高端路线 北汽与麦格纳拟成立合资公司 2019-02-02
    • 推进新时代中国特色社会主义云南新实践——访云南省委书记陈豪 2019-02-02
    • 时速350公里自动驾驶!京张智能高铁大片来了 2018-12-08
    • 老旧厂房里的“文创梦”(人民眼·建设新型城市文化空间) 2018-11-27