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

发布时间：2017-09-29 17:31:48 人气：871 来源：本站

三角形翻转的效果，大家想必见过，这里就把相关代码贴下，大家可以应用哦，当然翻转效果暂时不支持IE 6 7 8。

1、纯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>

<p>

<p>

<p>

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>

</body>

</html>

新闻中心

电子商务一定要保证网上支付的安全性

网站建设一定要注意的几大事项

如何对自己的领域用内容进行宣传

独立IP网站是否比共享IP网站好

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

什么是网站被墙？网站被墙了解决办法

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

网站案例

网站案例

网站案例

联系方式

二维码