前端小制作 Part.3---卡片展示

最新推荐文章于 2023-04-19 16:52:48 发布

Jeffrey.pace

最新推荐文章于 2023-04-19 16:52:48 发布

阅读量444

点赞数

分类专栏：代码仓库文章标签： html5 javascript html

本文链接：https://blog.csdn.net/weixin_52450397/article/details/120688101

版权

代码仓库专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HTML

<body>
    <div class="background">
        <li class="luna">
            <img src="images/露娜.png">
            <p>露娜</p>
        </li>
    
        <li class="make">
            <img src="images/马可波罗.png">
            <p>马可波罗</p>
        </li>
    
        <li class="libai">
            <img src="images/李白.png">
            <p>李白</p>
        </li>
    
        <li class="jialuo">
            <img src="images/伽罗.png">
            <p>伽罗</p>
        </li>
    </div>
    <script type="text/javascript" src="Test.js"></script>
</body>

CSS

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.background{
    display: flex;
    justify-content: space-evenly;
    align-items: center;

    margin: 100px 100px;
    width: 1200px;
    height: 600px;
    background-image: url(images/TechnologyBackGround.png);
}
li{
    position: relative;

    list-style: none;
    height: 350px;
    width: 240px;
    box-shadow: 5px 5px 5px grey;
    border-radius: 20px;

    transition: .2s linear;
}
p{
    position: absolute;
    visibility: hidden;
    bottom: 0%;
    left: 0%;

    height: 0px;
    width: 240px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    backdrop-filter: blur(10px);    /*滤镜*/

    text-align: center;
    overflow: hidden;

    transition-property: height;
    transition: .2s linear;
}
li:hover{
    transform: scale(1.05);
    box-shadow: 7px 7px 10px grey;
}
li:hover p{
    height: 80px;

    line-height: 80px;
    color:#fff;
    
    visibility: visible;
}
img{
    width: 100%;
    height: 100%;
    border-radius: 20px;
    filter: saturate(1.1);
}

JavaScript

     // 获取卡片对象    
    var cardObjects = document.getElementsByTagName('li');

    //  鼠标移入cardObjects[i]卡片， 排他算法
    for(var i = 0; i < cardObjects.length; i ++){
        cardObjects[i].onmouseover = function(){
            for(var j = 0; j < cardObjects.length; j ++)
                cardObjects[j].style.opacity = "0.6";
            this.style.opacity = "1";
        }
    }
    
    // 鼠标从cardObjects[i]卡片移开
    for(var i = 0; i < cardObjects.length; i ++){      
        cardObjects[i].onmouseout = function(){
            for(var j = 0; j < cardObjects.length; j ++)
                cardObjects[j].style.opacity="1";
        }
    }

效果展示

Jeffrey.pace

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端小制作 Part.3---卡片展示

HTML & JavaScript<body> <div class="background"> <li class="luna"> <img src="images/露娜.png"> <p>露娜</p> <script> document.querySelector('.
复制链接

扫一扫