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

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

野原新一 128 2022-07-24

基于html+css制做的两个小特效,感觉写的还是不怎么细致,不明白的可以下方评论区留言,一起学术交流,正所谓,闻道有先后,术业有专攻。学而不思则罔,思而不学则殆。这是看元岛社区的康老师的前端课程学的,结合了社区里面大佬的解析

演示站小胡桃(点击请用电脑端打开,手机端未做适配)

1. 页面背景设置

清除网页默认间距
*{
   margin:0;
   padding:0;
}
设置背景图片宽度,高度,方便操作给背景一个颜色(blue)
 .wrap{
 width:310px;
 height:438px;
/*background-color:skyblue;*/

背景页面默认在左上角,如果让它居中,就可以使用相对定位 /margin:0px auto;/

  margin:0px auto;

把自己想加的图片加到容器里

 <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=""> 

2.核心旋转代码

旋转45度 如何用deg rotate旋转

81ebd432c76b4b9495ee40fada76fdd2

transform:rotate(45deg);

/图片的样式 需要将图片 定位到一起!!! 需要覆盖的时候 想到定位
position:absolute; 绝对定位 不影响其他元素, 根据left和top来确定位置
默认的坐标:页面的左上角

img{
      position:absolute;
      left:0;
      top:0;

可以修改transform-origin属性改变不同的旋转

transform-origin: top left;
transform-origin: bottom right 60px;
transform-origin: 50px 50px;
transform-origin: center;

最后完整代码

<!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: 100px;;
        height:10px;
        background-color:rgb(255, 255, 255);
        margin:12px auto;
        background-position: center;
        position:relative;

       /*居中显示*/
       position:relative;
       /* 旋转45度 deg rotate 旋转 */
       /* transform:rotate(45deg); */
    }
      /*图片的样式  需要将图片  定位到一起!!!  需要覆盖的时候  想到定位
     position:absolute; 绝对定位  不影响其他元素, 根据left和top来确定位置
    默认的坐标:页面的左上角*/
    img{
        position:absolute;
        right: -250px;
        top: -100px;
        transition:transform 1s;
        transform-origin: top left;
        max-width:inherit;  
        max-height:inherit;  
        /* overflow:hidden;   */

    }
      /*当鼠标放入容器时,对应的图片发生旋转*/
     /*当鼠标放到容器时,当第四章张图旋转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="ing/1.jpg"alt="">
    <img src="ing/1.jpg"alt="">
    <img src="ing/1.jpg"alt="">
    <img src="ing/1.jpg"alt="">  
</body>
</html>


# 前端 # 源码 # css # HTML