Heim > Artikel > Web-Frontend > Farbwechseleffekt im HTML-CSS und Javascript

Farbwechseleffekt im HTML-CSS und Javascript

DDDOriginal: 2024-10-20 20:41:02964Durchsuche

Color changing effect in the html css and javascript

Folgen Sie uns bitte auf Instagram

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>

Das obige ist der detaillierte Inhalt vonFarbwechseleffekt im HTML-CSS und Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript css html https

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Video zur Änderung der HintergrundfarbeNächster Artikel：Video zur Änderung der Hintergrundfarbe

In Verbindung stehende Artikel

Mehr sehen