Color changing effect in the html css and javascript-JS Tutorial-php.cn

Color changing effect in the html css and javascript

DDD

Release： 2024-10-20 20:41:02

Original

962 people have browsed it

Color changing effect in the html css and javascript

Follow us on the instagram please

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>

Copy after login

The above is the detailed content of Color changing effect in the html css and javascript. For more information, please follow other related articles on the PHP Chinese website!