html css 和 javascript 中的颜色变化效果
请在 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>
以上是html css 和 javascript 中的颜色变化效果的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

JavaScript是现代Web开发的基石,它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发,极大地提升了用户体验和跨平台开发的灵活性。

Python和JavaScript开发者的薪资没有绝对的高低,具体取决于技能和行业需求。1.Python在数据科学和机器学习领域可能薪资更高。2.JavaScript在前端和全栈开发中需求大,薪资也可观。3.影响因素包括经验、地理位置、公司规模和特定技能。

学习JavaScript不难,但有挑战。1)理解基础概念如变量、数据类型、函数等。2)掌握异步编程,通过事件循环实现。3)使用DOM操作和Promise处理异步请求。4)避免常见错误,使用调试技巧。5)优化性能,遵循最佳实践。

如何在JavaScript中将具有相同ID的数组元素合并到一个对象中?在处理数据时,我们常常会遇到需要将具有相同ID�...

实现视差滚动和元素动画效果的探讨本文将探讨如何实现类似资生堂官网(https://www.shiseido.co.jp/sb/wonderland/)中�...

JavaScript的最新趋势包括TypeScript的崛起、现代框架和库的流行以及WebAssembly的应用。未来前景涵盖更强大的类型系统、服务器端JavaScript的发展、人工智能和机器学习的扩展以及物联网和边缘计算的潜力。

深入探讨console.log输出差异的根源本文将分析一段代码中console.log函数输出结果的差异,并解释其背后的原因。�...
