html+css制作扑克牌 小胡桃展开特教_html5实现 标移动到牌 展开效果

传送门

一、扑克牌展开特效

• 一、扑克牌展开效果图
• 二、页面背景设置
• 三、 放置图片的容器
• 3.1扑克牌展开特效视频
• 四、小胡桃旋转展开特效
• 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](https://img-blog.csdnimg.cn/img_convert/6ed86f13bebf92438c32e750b9a5b89f.png)
![img](https://img-blog.csdnimg.cn/img_convert/7ba1acf1edf2e7b3b7276b64d29b5982.png)

**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**

rc="images/pk1.png"alt="">  
    <img src="images/pk1.png"alt="">  


[外链图片转存中...(img-TnLdbIDo-4702043617280)]
[外链图片转存中...(img-3RRRQCQH-4702043617280)]

**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**