常见问题
当前位置:首页 > 资讯 > 常见问题 > 网页设计核心内容对视觉表现的影响
网页设计核心内容对视觉表现的影响
发布日期:2019-10-18 阅读次数: 28 次

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