前言
目标：使用位移、缩放、旋转、渐变效果丰富网页元素的呈现方式。
提示：以下是本篇文章正文内容，下面案例可供参考
一、网页制作思路
1.从上到下，先整体再局部
2.先标签，再 CSS 美化
3.制作顺序：图片效果>箭头>圆点
注：CSS 书写顺序：
1）. 盒子模型属性
2）. 文字样式
3）. 圆角、阴影等修饰属性
二、代码+效果图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>双开门</title>
<style>
* {
margin: 0;
padding: 0;
}
/* 1. 布局：父子结构，父级是大图，子级是左右小图 */
.father {
display: flex;
margin: 0 auto;
width: 1366px;
height: 600px;
background-image: url(./images/bg.jpg);
overflow: hidden;
}
.father .left,
.father .right {
width: 50%;
height: 600px;
background-image: url(./images/fm.jpg);
transition: all .5s;
}
.father .right {
/* right 表示的取到精灵图右面的图片 */
background-position: right 0;
}
/* 2. 鼠标悬停的效果：左右移动 */
.father:hover .left {
transform: translate(-100%);
}
.father:hover .right {
transform: translateX(100%);
}
</style>
</head>
<body>
<div class="father">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
66
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
