html+css制作扑克牌/小胡桃展开特教

时间：2023-05-29 00:37:00 pk1接近传感器sc1204

基于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>

结束啦！祝大家学习完有所收获！！！

锐单商城拥有海量元器件数据手册、IC替代型号，打造电子元器件IC百科大全！

html+css制作扑克牌/小胡桃展开特教

一、扑克牌展开特效

相关文章