• 注册
  • 如果帮助到您!可以对我打赏吗?

  • 查看作者
  • 网页设计核心内容对视觉表现的影响

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

  • 0
  • 0
  • 0
  • 3
  • 请登录之后再进行评论

    登录
  • 做任务