汤姆和杰瑞卡片与 html css 和 javascript 具有幻觉效果-js教程-PHP中文网

首页

web前端

js教程

汤姆和杰瑞卡片与 html css 和 javascript 具有幻觉效果

Nov 05, 2024 am 02:47 AM

Tom and Jerry cards with illusionsitic effect with html css and javascript

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Elegant Hover Cards&lt;/title&gt;
    &lt;style&gt;
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
        }
        .card-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
        }
        .top-row {
            display: flex;
            gap: 20px;
        }
        .card {
            position: relative;
            width: 250px;
            height: 300px;

            background-color: #fff;
            border-radius: 15px;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
            transition: transform 0.5s ease;
            cursor: pointer;
        }
        .card:hover {
            transform: scale(1.05);
        }
        .card img {
            position: absolute;
            top: -30px;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            transition: transform 0.5s ease;
        }
        .card-right img{
            width: 200px;
        }
        /* Hover effects for each card */
        .card-left:hover img {
            transform: translate(-60%, -40%);
        }
        .card-right:hover img {
            transform: translate(-25%, -25%);
        }

        .card-content {
            position: absolute;
            bottom: 20px;
            left: 20px;
            right: 20px;
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.3s ease, transform 0.5s ease;
        }
        .card:hover .card-content {
            opacity: 1;
            transform: translateY(0);
        }
        .card-content h2 {
            margin-bottom: 10px;
            font-size: 1.5rem;
            color: #333;
        }
        .card-content p {
            font-size: 1rem;
            color: #666;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div class="card-container"&gt;
    &lt;!-- Top Row Cards --&gt;
    &lt;div class="top-row"&gt;
        &lt;!-- Left Card - Tom --&gt;
        &lt;div class="card card-left"&gt;
            &lt;img src="./tom.png" alt="Tom Image"&gt;
            &lt;div class="card-content"&gt;
                &lt;h2&gt;Tom&lt;/h2&gt;
                &lt;p&gt;Tom Cat is a cartoon character from the Tom and Jerry series, a cat who is usually mute but does speak in some cartoons.&lt;/p&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- Right Card - Jerry --&gt;
        &lt;div class="card card-right"&gt;
            &lt;img src="./jerry.png" alt="Jerry Image"&gt;
            &lt;div class="card-content"&gt;
                &lt;h2&gt;Jerry&lt;/h2&gt;
                &lt;p&gt; Jerry is a brown anthropomorphic house mouse who is usually silent. Jerry is the protagonist in the series, and his rival is Tom Cat.&lt;/p&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;


&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;

登录后复制

以上是汤姆和杰瑞卡片与 html css 和 javascript 具有幻觉效果的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn