基于html css第一次写两个小特效CSS的博文，感觉写的还是不怎么细致，不明白的可以下方评论区留言，一起学术交流，正所谓，闻道有先后，术业有专攻。学而不思则罔，思而不学则殆。
上一次英雄联盟自动轮播图页效果视频已经通过审核
传送门
一、扑克牌展开特效
- 一、扑克牌展开效果图
- 二、页面背景设置
- 三、 容器放置图片
- 3.扑克牌展开特效视频
- 四、胡桃旋转特效
- 4.胡桃效果图1
- 4.2小胡桃旋转特效核心代码：
一、扑克牌展开效果图
二、页面背景设置
/清除网页默认间距/
*{
margin:0; padding:0; } 设置背景图片的宽度和高度，方便操作给背景一种颜色（blue）
.wrap{
width:310px; height:438px; /*background-color:skyblue;*/ 背景页面默认在左上角，但我喜欢它在中间。移动默认位置的方法是什么？ 我们可以使用相对定位 /margin:0px auto;/
/相对定位*/
margin:0px auto; 移到中间，发现背景太高，不利于显示效果/美观。我的想法是向中下移动一点。怎么移动？ 上下相等0左右 居中显示 上下有200像素，约0像素*/
margin:200px auto 这里已经设置了背景(然后你可以把你最喜欢的图片放在容器里，你可以参考把图片放在目录里的容器)
在这里我们会发现一个问题吗？ 背景和图片是分开的，我们想要的效果是(背景和图片重叠/覆盖背景色) 可以使用 position:relative;标签，为了美丽的图片，背景颜色提前注释，在正常情况下，图片完整的背景颜色
/绝对定位/
position:relative; 旋转45度 deg rotate旋转
transform:rotate(45deg); /图片的样式 需要将图片 一起定位！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！ 需要覆盖的时候 想到定位 position:absolute; 绝对定位 不影响其他元素， 根据left和top来确定位置 默认坐标：页面左上角/
img{
position:absolute; left:0; top:0; 过渡动画
transition:transform 1s; /旋转中心点/
transform-origin:right bottom;
/当鼠标放入容器时,对应的图片发生旋转/ /当鼠标放到容器时,当第四章张图旋转60deg/
.wrap:hover img:nth-child(4){
transform:rotate(60deg);
}
/当鼠标放到容器时,第三张图旋转30deg/
.wrap:hover img:nth-child(3){
transform:rotate(30deg);
}
/当鼠标放到容器时,第二张图旋转-30deg/
.wrap:hover img:nth-child(1){
transform:rotate(-30deg);
}
三、 放置图片的容器
<div class="wrap">
<img src="images/pk1.png"alt="">
<img src="images/pk1.png"alt="">
<img src="images/pk1.png"alt="">
<img src="images/pk1.png"alt="">
</body>
</html>
3.1扑克牌展开特效视频
四、小胡桃旋转展开特效
4.1小胡桃效果图
4.2小胡桃旋转特效核心代码：
<!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;
}
.wrap{
width:1346px;
height:1000px;
background-color:blue;
margin:1200px auto;
/*居中显示*/
position:relative;
/* 旋转45度 deg rotate 旋转 */
/* transform:rotate(45deg); */
}
/*图片的样式 需要将图片 定位到一起！！！ 需要覆盖的时候 想到定位 position:absolute; 绝对定位 不影响其他元素, 根据left和top来确定位置 默认的坐标:页面的左上角*/
img{
position:absolute;
right:0;
top:0;
transition:transform 1s;
transform-origin: right bottom;
}
/*当鼠标放入容器时,对应的图片发生旋转*/
/*当鼠标放到容器时,当第四章张图旋转60deg*/
.wrap:hover img:nth-child(4){
transform:rotate(60deg);
}
.wrap:hover img:nth-child(3){
transform:rotate(30deg);
}
.wrap:hover img:nth-child(1){
transform:rotate(-30deg);
}
</style>
</head>
<body>
<!-- 放置图片的容器 -->
<div class="wrap">
<img src="images/2.png"alt="">
<img src="images/2.png"alt="">
<img src="images/2.png"alt="">
<img src="images/2.png"alt="">
</body>
</html>
结束啦！祝大家学习完有所收获 ！！！