Maison > Article > interface Web > Effet de changement de couleur dans le HTML CSS et Javascript

Effet de changement de couleur dans le HTML CSS et Javascript

DDDoriginal: 2024-10-20 20:41:021070parcourir

Color changing effect in the html css and javascript

Suivez-nous sur Instagram s'il vous plaît

https://www.instagram.com/webstreet_code/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Instagram Card with Colorful Border</title>
    <style>
        body {
            margin: 0;
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background-color: #1d1f20; /* Dark background for contrast */
            font-family: Arial, sans-serif;
        }

        .instagram-card {
            width: 300px;
            color:white;
            height: 400px;
            background-color: #393939; /* Silver background for the card */
            border: 10px solid transparent; /* Initial border */
            border-radius: 15px; /* Rounded corners */
            animation: borderAnimation 6s linear infinite; /* Slower animation for card border */
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: relative; /* For button positioning */
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
        }

        .profile-image {
            width: 100px; /* Circular image width */
            height: 100px; /* Circular image height */
            border-radius: 50%; /* Make the image circular */
            object-fit: cover; /* Ensure the image covers the area */
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Shadow for profile image */
            margin-bottom: 15px; /* Space between image and text */
        }

        .instagram-name {
            font-size: 20px; /* Font size for Instagram name */
            font-weight: bold; /* Bold font */
            color: #cbc4c4; /* Dark color for contrast */
            margin-bottom: 10px; /* Space between name and description */
        }

        .follow-button {
            margin-top: 20px; /* Space between card and button */
            padding: 10px 20px; /* Padding for the button */
            border: none; /* No border */
            border-radius: 5px; /* Rounded corners for button */
            cursor: pointer; /* Pointer cursor on hover */
            color: #fff; /* White text */
            font-size: 16px; /* Font size for button text */
            animation: buttonAnimation 6s linear infinite; /* Slower animation for button border */
            background: transparent; /* Transparent background */
            position: absolute; /* Position absolute to overlap with card */
            bottom: 20px; /* Positioned at the bottom of the card */
            left: 50%; /* Center the button */
            transform: translateX(-50%); /* Adjust for centering */
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Shadow for button */
        }

        @keyframes borderAnimation {
            0% {
                border-image: linear-gradient(45deg, #ff0080, #ff8c00, #ff0080, #ff8c00) 1; /* Pink to Orange */
            }
            50% {
                border-image: linear-gradient(45deg, #00f260, #0575e6, #00f260, #0575e6) 1; /* Green to Blue */
            }
            100% {
                border-image: linear-gradient(45deg, #ff0080, #ff8c00, #ff0080, #ff8c00) 1; /* Return to Pink to Orange */
            }
        }

        @keyframes buttonAnimation {
            0% {
                border: 2px solid transparent; /* Initial transparent border */
                background: linear-gradient(45deg, #ff0080, #ff8c00); /* Initial gradient */
            }
            50% {
                border: 2px solid transparent;
                background: linear-gradient(45deg, #00f260, #0575e6); /* Change gradient */
            }
            100% {
                border: 2px solid transparent;
                background: linear-gradient(45deg, #ff0080, #ff8c00); /* Return to initial gradient */
            }
        }

        .follow-button::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 5px; /* Match button corners */
            background: linear-gradient(45deg, #ff0080, #ff8c00);
            z-index: -1; /* Behind the button */
            animation: buttonAnimation 6s linear infinite; /* Button background animation */
            opacity: 0.8; /* Slight transparency for overlay */
        }
    </style>
</head>
<body>

    <div class="instagram-card">
        <img class="profile-image" src="./logo.jpg" alt="Profile Picture"> <!-- Replace with your image URL -->
        <div class="instagram-name">@webstreet_code</div> <!-- Replace with your Instagram page name -->
        <p>Your Daily Dose of Learning.</p>
        <button class="follow-button">Follow Us</button>
    </div>

</body>
</html>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript css html https

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Vidéo de changement de couleur d'arrière-planArticle suivant：Vidéo de changement de couleur d'arrière-plan

Articles Liés

Voir plus