CSS--创意产品卡

前言

这个参考自大佬的文章
原文
然后做了点改进，多了些js

代码

<div class="card">
        <div class="imgb">
            <img src="./90.png" alt="">
        </div>
        <div class="con">
            <h2>JORDEN</h2>
            <div class="size">
                <h3>Size：</h3>
                <span>40</span>
                <span>41</span>
                <span>42</span>
                <span>43</span>
            </div>
            <div class="color">
                <h3>Color：</h3>
                <span class="green"></span>
                <span class="blue"></span>
                <span class="red"></span>
            </div>
            <a href="#">立即购买</a>
        </div>
    </div>
    <script>
        let green=document.querySelector('.green');
        let red=document.querySelector('.red');
        let blue=document.querySelector('.blue');
        let card=document.querySelector('.card');
        let style=window.getComputedStyle(card,":before");
        let arr=[green,blue,red];
        let arr1=['card1','card2','card3'];
        for(let i=0;i<arr.length;i++){
            arr[i].addEventListener('click',function(){
               for(let j=0;j<arr.length;j++){
                   card.classList.remove('.card1');
                   card.classList.remove('.card2');
                   card.classList.remove('.card3');
               }
               card.className=arr1[i];
               card.classList.add('card');
            })
        }
    </script>

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            /*居中处理*/
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #131313;
            min-height: 100vh;
        }



        .card {
            position: relative;
            width: 320px;
            height: 450px;
            background: #232323;
            border-radius: 20px;
            overflow: hidden;
        }

        .card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: pink;
            clip-path: circle(150px at 80% 20%);
            /*这个属性可以设置很多种图形，甚至可以做波浪文字，有兴趣的可以看我之前的文章*/
            transition: 0.5s ease-in-out;
        }
        .card1::before{
            background-color: #9bdc28;
        }
        .card2::before{
            background-color: #03a9f4;
        }
        .card3::before{
            background-color: #e91e63;
        }

        .card:hover::before {
            clip-path: circle(300px at 80% -20%);
        }

        .card .imgb {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 1000;
            height: 220px;
            width: 100%;
            transition: 0.5s;
        }

        .card:hover .imgb {
            top: 0%;
            transform: translateY(0);
        }

        .card .imgb img {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) rotate(-20deg);
            width: 270px;
        }

        .card .con {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 100px;
            text-align: center;
            transition: 0.6s;
            z-index: 0;
        }

        .card:hover .con {
            height: 200px;
        }

        .card .con h2 {
            position: relative;
            font-weight: 600;
            letter-spacing: 1px;
            color: #fff;
        }

        .card .con .size,
        .card .con .color {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 8px 20px;
            transition: 0.5s;
            opacity: 0;
            visibility: hidden;
        }

        .card:hover .con .size {
            opacity: 1;
            visibility: visible;
            transition-delay: 0.5s;
        }

        .card:hover .con .color {
            opacity: 1;
            visibility: visible;
            transition-delay: 0.6s;
        }

        .card .con .size h3,
        .card .con .color h3 {
            color: #fff;
            font-weight: 300;
            font-size: 14px;
            text-transform: uppercase;
            /*强制所有字符变为大写*/
            letter-spacing: 2px;
            /*字与字间的间距*/
            margin-right: 10px;
        }

        .card .con .size span {
            width: 26px;
            height: 26px;
            text-align: center;
            line-height: 26px;
            font-size: 14px;
            display: inline-block;
            /*这里设置为行内块元素才能设置行内元素的宽高*/
            color: #111;
            background: #fff;
            margin: 0 5px;
            color: #111;
            border-radius: 4px;
            cursor: pointer;
            /*改变鼠标箭头样式*/
        }

        .card .con .size span:hover {
            background: #9bdc28;
        }

        .card .con .color span {
            width: 20px;
            height: 20px;
            background: #ff0;
            border-radius: 50%;
            margin: 0 5px;
            cursor: pointer;
        }

        .card .con .color span:nth-child(2) {
            background: #9bdc28;
        }

        .card .con .color span:nth-child(3) {
            background: #03a9f4;
        }

        .card .con .color span:nth-child(4) {
            background: #e91e63;
        }

        .card .con a {
            display: inline-block;
            padding: 10px 20px;
            background: #fff;
            border-radius: 4px;
            margin-top: 10px;
            text-decoration: none;
            font-weight: 600;
            color: #111;

            opacity: 0;
            transform: translateY(50px);
            transition: 0.6s;
        }

        .card:hover .con a {
            opacity: 1;
            transform: translateY(0px);
            transition-delay: 0.65s;
        }
        /*这里内容的往上浮现主要是因为容器高度的增加，因为在前面的绝对定位里已经设置bottom:0!!!*/

小结

这里主要是给大家了解一下，然后在学习他人的优秀作品的过程中我发现了一些我一直没注意的盲点，比如js里面如何获取伪类元素及修改样式等等，这些我将会另外写一章来介绍！