HTML CSS 및 자바스크립트의 색상 변경 효과
- DDD원래의
- 2024-10-20 20:41:021077검색
인스타그램 팔로우해주세요
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>
위 내용은 HTML CSS 및 자바스크립트의 색상 변경 효과의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.