样式分析
从图中我们可以看出，本项目是将鼠标移入图片中，则图片将一张一张展开，实现一个很炫酷的效果
框架分析
不难发现，此页面由11张图片组成，并且在未展开前，所有图片堆叠在一起，由此可见，此页面是在一个“盒子”中放入11张图片，当鼠标移入时，11张图片依次旋转实现此效果
代码分析
通过div标签和src图片标签配合使用就可以实现此框架，具体代码如下
<html>
...
...
<body>
<!--定义外部盒子模型-->
<div class="box">
<!--定义十二张图片-->
<img src="image1.png" class="card" />
<img src="image1.png" class="card" />
<img src="image1.png" class="card" />
<img src="image1.png" class="card" />
<img src="image1.png" class="card" />
<img src="image1.png" class="card" />
<img src="image1.png" class="card" />
<img src="image1.png" class="card" />
<img src="image1.png" class="card" />
<img src="image1.png" class="card" />
<img src="image1.png" class="card" />
</div>
</body>
</html>
CSS分析
做完上面的代码，我们就完成了HTML框架编写过程，现在，我们通过CSS来编写样式布局
/*去除所有元素的默认边距*/
* {
padding: 0;
margin: 0;
transition: all 2s;
}
/*最外层盒子的样式*/
.box {
height: 400px;
width: 280px;
margin: 50px auto;
}
动画实现
现在，所有的图片都已经在div盒子里面了，紧接着，我们就要给图片添加鼠标移入事件了，所以我们要为div盒子添加鼠标移入事件，还要给每张图片添加移动事件处理结果
我们就得使用
nth-child
来选择元素了
.box:hover img:nth-child(0)
/*通过索引获取父控件中所有子空间*/
/*.box是父控件*/
/*hover是定义鼠标移入事件*/
/*img是子控件的标签类型*/
/*nth-child中填入子标签的索引 索引是从1开始的*/
选中所有图片控件，并且添加旋转动画
.box:hover img:nth-child(1) {
/*rotate()旋转动画*/
/*translateX()X轴平移*/
transform: rotate(50deg) translateX(100px);
/*添加背景阴影*/
/*第一个参数是X轴偏移*/
/*第二个参数是Y轴偏移*/
/*第三个参数是模糊程度*/
/*第四个参数是模糊颜色*/
box-shadow: 0 0 20px red;
}
.box:hover img:nth-child(2) {
transform: rotate(40deg) translateX(80px);
box-shadow: 0 0 20px orange;
}
.box:hover img:nth-child(3) {
transform: rotate(30deg) translateX(60px);
box-shadow: 0 0 20px yellow;
}
.box:hover img:nth-child(4) {
transform: rotate(20deg) translateX(40px);
box-shadow: 0 0 20px blue;
}
.box:hover img:nth-child(5) {
transform: rotate(10deg) translateX(20px);
box-shadow: 0 0 20px darkcyan;
}
.box:hover img:nth-child(6) {
box-shadow: 0 0 20px purple;
}
.box:hover img:nth-child(7) {
transform: rotate(-10deg) translateX(-20px);
box-shadow: 0 0 20px skyblue;
}
.box:hover img:nth-child(8) {
transform: rotate(-20deg) translateX(-40px);
box-shadow: 0 0 20px yellowgreen;
}
.box:hover img:nth-child(9) {
transform: rotate(-30deg) translateX(-60px);
box-shadow: 0 0 20px burlywood;
}
.box:hover img:nth-child(10) {
transform: rotate(-40deg) translateX(-80px);
box-shadow: 0 0 20px goldenrod;
}
.box:hover img:nth-child(11) {
transform: rotate(-50deg) translateX(-100px);
box-shadow: 0 0 20px palevioletred;
}
这样我们就可以实现魔法卡牌了！
以下是全部代码
<html>
<head>
<style>
/*分析:假设一共有11张图片*/
/*1.第6张图片没有变化*/
/*2.第5张和第7张旋转角度相等,且旋转方向相反(符号相反)*/
/*3.第4张和第6张旋转角度也相当...*/
/*...*/
/*...*/
/*...*/
/*全部界面的内外边距为0*/
* {
padding: 0;
margin: 0;
transition: all 2s;
}
/*最外层盒子的样式*/
.box {
height: 400px;
width: 280px;
/*顶部和底部外边距50px水平自动居中*/
margin: 50px auto;
}
/*定义内部卡片样式*/
.card {
height:400px;
width:280px;
/*绝对定位*/
position: absolute;
/*旋转中心:底部中心*/
transform-origin: center bottom;
/*圆角为40px*/
border-radius: 35px;
/*阴影设置*/
/*box-shadow:X偏移 Y偏移 模糊程度 模糊颜色;*/
box-shadow: 0 0 10px #000;
}
/*??:hover鼠标移动后样式*/
/*父视图:hover 子元素类型:nth-child(索引) 获取*/
.box:hover img:nth-child(1) {
/*rotate()旋转动画*/
/*translateX()X轴平移*/
transform: rotate(50deg) translateX(100px);
box-shadow: 0 0 20px red;
}
.box:hover img:nth-child(2) {
transform: rotate(40deg) translateX(80px);
box-shadow: 0 0 20px orange;
}
.box:hover img:nth-child(3) {
transform: rotate(30deg) translateX(60px);
box-shadow: 0 0 20px yellow;
}
.box:hover img:nth-child(4) {
transform: rotate(20deg) translateX(40px);
box-shadow: 0 0 20px blue;
}
.box:hover img:nth-child(5) {
transform: rotate(10deg) translateX(20px);
box-shadow: 0 0 20px darkcyan;
}
.box:hover img:nth-child(6) {
box-shadow: 0 0 20px purple;
}
.box:hover img:nth-child(7) {
transform: rotate(-10deg) translateX(-20px);
box-shadow: 0 0 20px skyblue;
}
.box:hover img:nth-child(8) {
transform: rotate(-20deg) translateX(-40px);
box-shadow: 0 0 20px yellowgreen;
}
.box:hover img:nth-child(9) {
transform: rotate(-30deg) translateX(-60px);
box-shadow: 0 0 20px burlywood;
}
.box:hover img:nth-child(10) {
transform: rotate(-40deg) translateX(-80px);
box-shadow: 0 0 20px goldenrod;
}
.box:hover img:nth-child(11) {
transform: rotate(-50deg) translateX(-100px);
box-shadow: 0 0 20px palevioletred;
}
</style>
</head>
<body>
<!--定义外部盒子模型-->
<div class="box">
<!--定义十二张图片-->
<img src="image.png" class="card" />
<img src="image.png" class="card" />
<img src="image.png" class="card" />
<img src="image.png" class="card" />
<img src="image.png" class="card" />
<img src="image.png" class="card" />
<img src="image.png" class="card" />
<img src="image.png" class="card" />
<img src="image.png" class="card" />
<img src="image.png" class="card" />
<img src="image.png" class="card" />
</div>
</body>
</html>
版权声明：本文为qq_37443884原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。