怎么利用CSS代码控制导航图片翻转效果?

发布网友发布时间：2022-04-06 11:23

我来回答

共4个回答

懂视网时间：2022-04-06 15:44

本篇文章给大家带来的内容是关于如何使用css实现翻转图片的效果（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

具体效果图如下：

主要用到的技术除了3D翻转和定位，还用到了一个新的属性 backface-visibility：visable|hidden;

该属性主要是用来设定元素背面是否可见。

具体的步骤如下：

1、写出页面主体，

 <div>
 <img src="Images/b.jpg" alt="">
 <img src="Images/c.jpg" alt="">
 </div>

2、通过定位使两张图片叠加在一起

div img {
  width: 250px;
  height: 170px;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 1s;
 }

3、设置第一张图片背面不可见

div img:first-child {
  z-index: 1;
  backface-visibility: hidden;
 }

4、添加旋转180度

div:hover img {
  transform: rotateY(180deg);
 }

最后给出完整代码

<!DOCTYPE html>
<html>

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style>
 /* backface-visibility */
 
 div {
  width: 250px;
  height: 170px;
  margin: 100px auto;
  position: relative;
 }
 
 div img {
  width: 250px;
  height: 170px;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 1s;
 }
 
 div img:first-child {
  z-index: 1;
  backface-visibility: hidden;
 }
 
 div:hover img {
  transform: rotateY(180deg);
 }
 </style>
</head>

<body>
 <div>
 <img src="Images/b.jpg" alt="">
 <img src="Images/c.jpg" alt="">
 </div>
</body>

</html>

热心网友时间：2022-04-06 12:52

a:link{background:url("a.jpg")} 链接默认状态
a:visited{background:url("a.jpg")} 链接访问过以后的状态
a:hover{background:url("b.jpg")} 当鼠标移动上去的状态
a:active{background:url("c.jpg")} 当前的活动状态

放到样式里面就可以了

具体的导航名称自己定义！

热心网友时间：2022-04-06 14:10

a:link{background:url("a.jpg")}
a:visited{background:url("a.jpg")}
a:hover{background:url("b.jpg")}
a:active{background:url("c.jpg")}

热心网友时间：2022-04-06 15:45

可以通过CSS超链接的伪类来实现。
假设你的常规图片、鼠标移上后的图片和按下后的图片分别是1.jpg、2.jpg、3.jpg，
CSS中就可以这么写：
a {
background:url("1.jpg");
}

a:hover {
background:url("2.jpg");
}

a:visited {
background:url("3.jpg");
}

另外还有另外两个方法，在这里用不到：
a:active 这个表示鼠标点下时候的状态
a:link 这个是默认状态，有些时候和a可以替换

不知道说清楚没有哈。^^