[英]How to change the hover color for the FontAwesome with onclick function?
我想使用onclick功能更改 FontAwesome 圖標的懸停顏色,我已經在一個部分中制作了 FontAwesome 背景動畫效果,代碼應該這樣工作:當我點擊任何顏色時,FontAwesome 圖標應該更改為這種顏色. 我有很多方法,但它們不正確,這里是頁面的照片和代碼:- [1]: https : //i.stack.imgur.com/dzxAX.png [2]: https:/ /i.stack.imgur.com/veVuf.png
@import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900&display=swap"); * { margin: 0; padding: 0; font-family: "Poppins", sans-serif; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; } #background { position: fixed; top: 0; width: 100%; height: 100vh; background: #111; display: flex; flex-direction: column; overflow: hidden; z-index: 0; } section .row { position: relative; top: -50%; width: 100%; display: flex; padding: 10px 0; white-space: nowrap; font-size: 64px; transform: rotate(-30deg); } i { color: rgba(0, 0, 0, 0.5); transition: 1s; padding: 0 5px; user-select: none; cursor: default; } i:hover { color: #9bdc28; /* #9bdc28 */ transition: 0s; text-shadow: 0 0 120px #9bdc28; /* #9bdc28 */ } section .row div { animation: animate1 80s linear infinite; animation-delay: -80s; } section .row div:nth-child(2) { animation: animate2 80s linear infinite; animation-delay: -40s; } @keyframes animate1 { 0% { transform: translateX(0%); } 100% { transform: translateX(-200%); } } @keyframes animate2 { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } } section .row:nth-child(even) div { animation: animate3 80s linear infinite; animation-delay: -80s; } section .row:nth-child(even) div:nth-child(2) { animation: animate4 80s linear infinite; animation-delay: -40s; } @keyframes animate3 { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } @keyframes animate4 { 0% { transform: translateX(-200%); } 100% { transform: translateX(0); } } div { position: relative; color: white; background-color: transparent; z-index: 100; line-height: 2rem; color: #fff6; } .container { position: relative; background-color: transparent; } .container .card { position: relative; width: 320px; height: 450px; background: #232323; border-radius: 20px; overflow: hidden; } .container .card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--background); clip-path: circle(150px at 80% 20%); transition: 0.5s ease-in-out; } .container .card:hover:before { clip-path: circle(300px at 80% -20%); } .container .card:after { content: "Nike"; position: absolute; top: 30%; left: -20%; font-size: 12em; font-weight: 800; font-style: italic; color: rgba(255, 255, 255, 0.04); } .container .card .product-pic { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10000; width: 100%; height: 220px; transition: 0.5s; } .container .card:hover .product-pic { top: 0%; transform: translateY(0%); } .container .card .product-pic img { position: absolute; top: 49%; left: 50%; transform: translate(-50%, -50%) rotate(-25deg); width: 270px; } .container .card .contentBx { position: absolute; bottom: 0; width: 100%; height: 100px; text-align: center; transition: 1s; z-index: 10; } .container .card:hover .contentBx { height: 210px; } .container .card .contentBx h2 { position: relative; font-weight: 600; letter-spacing: 1px; color: #fff; } .container .card .contentBx .product-size, .container .card .contentBx .product-colors { display: flex; justify-content: center; align-items: center; padding: 8px 20px; transition: 0.5s; opacity: 0; visibility: hidden; } .container .card:hover .contentBx .product-size { opacity: 1; visibility: visible; transition-delay: 0.57s; } .container .card:hover .contentBx .product-colors { opacity: 1; visibility: visible; transition-delay: 0.8s; } .container .card .contentBx .product-size h3, .container .card .contentBx .product-colors h3 { color: #fff; font-weight: 300; font-size: 14px; text-transform: uppercase; letter-spacing: 2px; margin-right: 10px; } .container .card .contentBx .product-size span { width: 26px; height: 26px; text-align: center; line-height: 26px; font-size: 14px; display: inline-block; color: #111; background: #fff; margin: 0 5px; transition: 0.5s; color: #111; border-radius: 4px; cursor: pointer; } .container .card .contentBx .product-size span:hover { background: #9bdc28; } .container .card .contentBx .product-colors span { width: 14px; height: 14px; margin: 0 10px; border-radius: 50%; cursor: pointer; position: relative; } .container .card .contentBx .product-colors .active::after { content: ""; width: 22px; height: 22px; border: 2px solid #8888; position: absolute; border-radius: 50%; box-sizing: border-box; left: -4px; top: -4px; } .container .card .contentBx .product-colors span:nth-child(2) { background: #9bdc28; } .container .card .contentBx .product-colors span:nth-child(3) { background: #03a9f4; } .container .card .contentBx .product-colors span:nth-child(4) { background: #e91e63; } .container .card .contentBx a { display: inline-block; padding: 10px 20px; background: #fff; border-radius: 4px; margin-top: 10px; text-decoration: none; font-weight: 600; color: #111; opacity: 0; transform: translateY(50px); transition: 0.5s; } .container .card:hover .contentBx a { opacity: 1; transform: translateY(0px); transition-delay: 0.88s; }
<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta charset="UTF-8"> <title>FontAwesome Background | Animation Effects</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="style2.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" charset="utf-8"></script> </head> <body> <section id="background"> <div class="row"> <div> <i data-color="#9bdc28" class="fa fa-address-book-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bath" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-shower" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-thermometer-half" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-balance-scale" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-battery-half" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bell-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bicycle" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bolt" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bullhorn" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-commenting-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-code" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-comments-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-envelope-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-gift" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-glass" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-globe" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-graduation-cap" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-heart-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-hourglass" aria-hidden="true"></i> </div> <div> <i data-color="#9bdc28" class="fa fa-address-book-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bath" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-shower" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-thermometer-half" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-balance-scale" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-battery-half" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bell-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bicycle" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bolt" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bullhorn" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-commenting-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-code" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-comments-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-envelope-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-gift" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-glass" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-globe" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-graduation-cap" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-heart-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-hourglass" aria-hidden="true"></i> </div> </div> <div class="row"> <div> <i data-color="#9bdc28" class="fa fa-address-book-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bath" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-shower" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-thermometer-half" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-balance-scale" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-battery-half" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bell-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bicycle" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bolt" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bullhorn" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-commenting-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-code" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-comments-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-envelope-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-gift" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-glass" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-globe" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-graduation-cap" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-heart-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-hourglass" aria-hidden="true"></i> </div> <div> <i data-color="#9bdc28" class="fa fa-address-book-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bath" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-shower" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-thermometer-half" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-balance-scale" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-battery-half" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bell-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bicycle" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bolt" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bullhorn" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-commenting-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-code" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-comments-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-envelope-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-gift" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-glass" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-globe" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-graduation-cap" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-heart-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-hourglass" aria-hidden="true"></i> </div> </div> <div class="row"> <div> <i data-color="#9bdc28" class="fa fa-address-book-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bath" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-shower" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-thermometer-half" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-balance-scale" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-battery-half" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bell-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bicycle" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bolt" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bullhorn" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-commenting-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-code" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-comments-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-envelope-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-gift" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-glass" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-globe" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-graduation-cap" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-heart-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-hourglass" aria-hidden="true"></i> </div> <div> <i data-color="#9bdc28" class="fa fa-address-book-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bath" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-shower" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-thermometer-half" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-balance-scale" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-battery-half" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bell-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bicycle" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bolt" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bullhorn" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-commenting-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-code" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-comments-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-envelope-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-gift" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-glass" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-globe" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-graduation-cap" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-heart-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-hourglass" aria-hidden="true"></i> </div> </div> <div class="row"> <div> <i data-color="#9bdc28" class="fa fa-address-book-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bath" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-shower" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-thermometer-half" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-balance-scale" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-battery-half" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bell-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bicycle" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bolt" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bullhorn" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-commenting-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-code" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-comments-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-envelope-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-gift" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-glass" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-globe" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-graduation-cap" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-heart-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-hourglass" aria-hidden="true"></i> </div> <div> <i data-color="#9bdc28" class="fa fa-address-book-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bath" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-shower" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-thermometer-half" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-balance-scale" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-battery-half" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bell-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bicycle" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bolt" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-bullhorn" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-commenting-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-code" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-comments-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-envelope-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-gift" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-glass" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-globe" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-graduation-cap" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-heart-o" aria-hidden="true"></i> <i data-color="#9bdc28" class="fa fa-hourglass" aria-hidden="true"></i> </div> </div> </section> <!-- ############################################################################################################################## --> <!-- ############################################################################################################################## --> <div class="container"> <div class="card"> <div class="product-pic"> <img src="1.png" class="pop2" /> </div> <div class="contentBx"> <h2>Nike Shoes</h2> <div class="product-size"> <h3>Size :</h3> <span>40</span> <span>41</span> <span>42</span> <span>43</span> </div> <div class="product-colors"> <h3>Color :</h3> <span class="active" data-color="#9bdc28" data-pic="url(1.png)" onclick="imgSlider('1.png');changeBgColor('#9bdc28');"></span> <span data-color="#03a9f4" data-pic="url(2.png)" onclick="imgSlider('2.png');changeBgColor('#03a9f4');"></span> <span data-color="#e91e63" data-pic="url(3.png)" onclick="imgSlider('3.png');changeBgColor('#e91e63');"></span> </div> <a href="#">Buy Now</a> </div> </div> </div> <script> const style = document.querySelector(".card").style; style.setProperty("--background", "#9bdc28"); // add active class in selected spans $(".product-colors span").click(function () { $(".product-colors span").removeClass("active"); $(this).addClass("active"); }); /* $(".act").css("background-color",$(this).attr("data-color")); $(".row div i").css("color",$(this).attr("data-color")); $(".product-pic").css("background-image",$(this).attr("data-pic"));*/ // change the shoes img function imgSlider(anything) { document.querySelector(".pop2").src = anything; }; // change background color function changeBgColor(color) { const style = document.querySelector(".card").style; style.setProperty("--background", color); }; </script> </body> </html>
您正在使用 JS 嘗試設置 CSS 變量的值。 然而,CSS 並不是一種真正的編程語言,一旦 CSS 就像它已經燒毀了變量的值而沒有保持引用。 您必須編寫代碼,以便直接在使用變量的地方設置值。
更簡單的選擇是在不同的變量中設置顏色並將其應用於不同的類(例如綠色、藍色、粉紅色),然后在父容器上設置該類 - 最初將其設置為綠色。
然后,您的 JS 不會嘗試更改變量的值,而是將容器上的類交換為新顏色,然后顏色會發生變化。
下面的工作示例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<title>FontAwesome Background | Animation Effects</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
@import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900&display=swap");
* {
margin: 0;
padding: 0;
font-family: "Poppins", sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
#background
{
position: fixed;
top: 0;
width: 100%;
height: 100vh;
background: #111;
display: flex;
flex-direction: column;
overflow: hidden;
z-index: 0;
}
section .row
{
position: relative;
top: -50%;
width: 100%;
display: flex;
padding: 10px 0;
white-space: nowrap;
font-size: 64px;
transform: rotate(-30deg);
}
i
{
color: rgba(0, 0, 0, 0.5);
transition: 1s;
padding: 0 5px;
user-select: none;
cursor: default;
}
i:hover
{
color: #9bdc28; /* #9bdc28 */
transition: 0s;
text-shadow: 0 0 120px #9bdc28; /* #9bdc28 */
}
.blue i:hover {
color: #03a9f4;
text-shadow: 0 0 120px #03a9f4;
}
.pink i:hover {
color: #e91e63;
text-shadow: 0 0 120px #e91e63;
}
section .row div
{
animation: animate1 80s linear infinite;
animation-delay: -80s;
}
section .row div:nth-child(2)
{
animation: animate2 80s linear infinite;
animation-delay: -40s;
}
@keyframes animate1
{
0%
{
transform: translateX(0%);
}
100%
{
transform: translateX(-200%);
}
}
@keyframes animate2
{
0%
{
transform: translateX(100%);
}
100%
{
transform: translateX(-100%);
}
}
section .row:nth-child(even) div
{
animation: animate3 80s linear infinite;
animation-delay: -80s;
}
section .row:nth-child(even) div:nth-child(2)
{
animation: animate4 80s linear infinite;
animation-delay: -40s;
}
@keyframes animate3
{
0%
{
transform: translateX(-100%);
}
100%
{
transform: translateX(100%);
}
}
@keyframes animate4
{
0%
{
transform: translateX(-200%);
}
100%
{
transform: translateX(0);
}
}
div {
position: relative;
color: white;
background-color: transparent;
z-index: 100;
line-height: 2rem;
color: #fff6;
}
.container
{
position: relative;
background-color: transparent;
}
.container .card {
position: relative;
width: 320px;
height: 450px;
background: #232323;
border-radius: 20px;
overflow: hidden;
}
.container .card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--background);
clip-path: circle(150px at 80% 20%);
transition: 0.5s ease-in-out;
}
.container .card:hover:before {
clip-path: circle(300px at 80% -20%);
}
.container .card:after {
content: "Nike";
position: absolute;
top: 30%;
left: -20%;
font-size: 12em;
font-weight: 800;
font-style: italic;
color: rgba(255, 255, 255, 0.04);
}
.container .card .product-pic {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10000;
width: 100%;
height: 220px;
transition: 0.5s;
}
.container .card:hover .product-pic {
top: 0%;
transform: translateY(0%);
}
.container .card .product-pic img {
position: absolute;
top: 49%;
left: 50%;
transform: translate(-50%, -50%) rotate(-25deg);
width: 270px;
}
.container .card .contentBx {
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
text-align: center;
transition: 1s;
z-index: 10;
}
.container .card:hover .contentBx {
height: 210px;
}
.container .card .contentBx h2 {
position: relative;
font-weight: 600;
letter-spacing: 1px;
color: #fff;
}
.container .card .contentBx .product-size,
.container .card .contentBx .product-colors {
display: flex;
justify-content: center;
align-items: center;
padding: 8px 20px;
transition: 0.5s;
opacity: 0;
visibility: hidden;
}
.container .card:hover .contentBx .product-size {
opacity: 1;
visibility: visible;
transition-delay: 0.57s;
}
.container .card:hover .contentBx .product-colors {
opacity: 1;
visibility: visible;
transition-delay: 0.8s;
}
.container .card .contentBx .product-size h3,
.container .card .contentBx .product-colors h3 {
color: #fff;
font-weight: 300;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 2px;
margin-right: 10px;
}
.container .card .contentBx .product-size span {
width: 26px;
height: 26px;
text-align: center;
line-height: 26px;
font-size: 14px;
display: inline-block;
color: #111;
background: #fff;
margin: 0 5px;
transition: 0.5s;
color: #111;
border-radius: 4px;
cursor: pointer;
}
.container .card .contentBx .product-size span:hover {
background: #9bdc28;
}
.container .card .contentBx .product-colors span {
width: 14px;
height: 14px;
margin: 0 10px;
border-radius: 50%;
cursor: pointer;
position: relative;
}
.container .card .contentBx .product-colors .active::after {
content: "";
width: 22px;
height: 22px;
border: 2px solid #8888;
position: absolute;
border-radius: 50%;
box-sizing: border-box;
left: -4px;
top: -4px;
}
.container .card .contentBx .product-colors span:nth-child(2) {
background: #9bdc28;
}
.container .card .contentBx .product-colors span:nth-child(3) {
background: #03a9f4;
}
.container .card .contentBx .product-colors span:nth-child(4) {
background: #e91e63;
}
.container .card .contentBx a {
display: inline-block;
padding: 10px 20px;
background: #fff;
border-radius: 4px;
margin-top: 10px;
text-decoration: none;
font-weight: 600;
color: #111;
opacity: 0;
transform: translateY(50px);
transition: 0.5s;
}
.container .card:hover .contentBx a {
opacity: 1;
transform: translateY(0px);
transition-delay: 0.88s;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" charset="utf-8"></script>
</head>
<body>
<section id="background">
<div class="row">
<div>
<i data-color="#9bdc28" class="fa fa-address-book-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bath" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-shower" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-thermometer-half" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-balance-scale" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-battery-half" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bell-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bicycle" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bolt" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bullhorn" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-commenting-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-code" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-comments-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-envelope-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-gift" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-glass" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-globe" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-graduation-cap" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-heart-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-hourglass" aria-hidden="true"></i>
</div>
<div>
<i data-color="#9bdc28" class="fa fa-address-book-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bath" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-shower" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-thermometer-half" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-balance-scale" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-battery-half" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bell-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bicycle" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bolt" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bullhorn" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-commenting-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-code" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-comments-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-envelope-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-gift" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-glass" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-globe" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-graduation-cap" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-heart-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-hourglass" aria-hidden="true"></i>
</div>
</div>
<div class="row">
<div>
<i data-color="#9bdc28" class="fa fa-address-book-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bath" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-shower" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-thermometer-half" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-balance-scale" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-battery-half" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bell-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bicycle" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bolt" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bullhorn" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-commenting-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-code" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-comments-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-envelope-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-gift" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-glass" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-globe" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-graduation-cap" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-heart-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-hourglass" aria-hidden="true"></i>
</div>
<div>
<i data-color="#9bdc28" class="fa fa-address-book-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bath" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-shower" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-thermometer-half" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-balance-scale" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-battery-half" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bell-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bicycle" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bolt" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bullhorn" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-commenting-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-code" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-comments-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-envelope-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-gift" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-glass" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-globe" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-graduation-cap" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-heart-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-hourglass" aria-hidden="true"></i>
</div>
</div>
<div class="row">
<div>
<i data-color="#9bdc28" class="fa fa-address-book-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bath" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-shower" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-thermometer-half" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-balance-scale" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-battery-half" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bell-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bicycle" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bolt" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bullhorn" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-commenting-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-code" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-comments-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-envelope-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-gift" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-glass" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-globe" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-graduation-cap" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-heart-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-hourglass" aria-hidden="true"></i>
</div>
<div>
<i data-color="#9bdc28" class="fa fa-address-book-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bath" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-shower" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-thermometer-half" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-balance-scale" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-battery-half" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bell-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bicycle" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bolt" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bullhorn" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-commenting-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-code" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-comments-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-envelope-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-gift" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-glass" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-globe" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-graduation-cap" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-heart-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-hourglass" aria-hidden="true"></i>
</div>
</div>
<div class="row">
<div>
<i data-color="#9bdc28" class="fa fa-address-book-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bath" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-shower" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-thermometer-half" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-balance-scale" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-battery-half" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bell-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bicycle" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bolt" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bullhorn" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-commenting-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-code" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-comments-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-envelope-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-gift" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-glass" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-globe" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-graduation-cap" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-heart-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-hourglass" aria-hidden="true"></i>
</div>
<div>
<i data-color="#9bdc28" class="fa fa-address-book-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bath" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-shower" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-thermometer-half" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-balance-scale" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-battery-half" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bell-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bicycle" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bolt" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-bullhorn" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-commenting-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-code" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-comments-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-envelope-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-gift" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-glass" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-globe" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-graduation-cap" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-heart-o" aria-hidden="true"></i>
<i data-color="#9bdc28" class="fa fa-hourglass" aria-hidden="true"></i>
</div>
</div>
</section>
<!-- ############################################################################################################################## -->
<!-- ############################################################################################################################## -->
<div class="container">
<div class="card">
<div class="product-pic">
<img src="1.png" class="pop2" />
</div>
<div class="contentBx">
<h2>Nike Shoes</h2>
<div class="product-size">
<h3>Size :</h3>
<span>40</span>
<span>41</span>
<span>42</span>
<span>43</span>
</div>
<div class="product-colors">
<h3>Color :</h3>
<span class="active" data-color="#9bdc28" data-pic="url(1.png)" onclick="imgSlider('1.png');changeBgColor('#9bdc28');"></span>
<span data-color="#03a9f4" data-pic="url(2.png)" onclick="imgSlider('2.png');changeBgColor('#03a9f4');"></span>
<span data-color="#e91e63" data-pic="url(3.png)" onclick="imgSlider('3.png');changeBgColor('#e91e63');"></span>
</div>
<a href="#">Buy Now</a>
</div>
</div>
</div>
<script>
const style = document.querySelector(".card").style;
style.setProperty("--background", "#9bdc28");
// add active class in selected spans
$(".product-colors span").click(function () {
$(".product-colors span").removeClass("active");
$(this).addClass("active");
});
/* $(".act").css("background-color",$(this).attr("data-color"));
$(".row div i").css("color",$(this).attr("data-color"));
$(".product-pic").css("background-image",$(this).attr("data-pic"));*/
// change the shoes img
function imgSlider(anything) {
document.querySelector(".pop2").src = anything;
};
// change background color
function changeBgColor(color) {
let class_color = '';
if ( color == '#03a9f4' ) {
class_color = 'blue';
} else if ( color == '#e91e63' ) {
class_color = 'pink';
} else {
class_color = 'green';
}
document.querySelector("#background").className = class_color;
};
</script>
</body>
</html>
由於您使用的是 jQuery,您可以只使用.css()方法來設置顏色樣式。
請注意, .getAttribute()是 jQuery .attr()的原生 JavaScript 版本。 在這種情況下,打字更容易,效率也更高。
此外,我將腳本移到<body>
的底部,這樣它們只在加載正文時運行。 這可以防止嘗試訪問未加載的元素或需要將所有內容包裝在$(document).ready()
函數中。
@import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900&display=swap"); * { margin: 0; padding: 0; font-family: "Poppins", sans-serif; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; } #background { position: fixed; top: 0; width: 100%; height: 100vh; background: #111; display: flex; flex-direction: column; overflow: hidden; z-index: 0; } section .row { position: relative; top: -50%; width: 100%; display: flex; padding: 10px 0; white-space: nowrap; font-size: 64px; transform: rotate(-30deg); } i { color: rgba(0, 0, 0, 0.5); transition: 1s; padding: 0 5px; user-select: none; cursor: default; } i:hover { color: #9bdc28; /* #9bdc28 */ transition: 0s; text-shadow: 0 0 120px #9bdc28; /* #9bdc28 */ } section .row div { animation: animate1 80s linear infinite; animation-delay: -80s; } section .row div:nth-child(2) { animation: animate2 80s linear infinite; animation-delay: -40s; } @keyframes animate1 { 0% { transform: translateX(0%); } 100% { transform: translateX(-200%); } } @keyframes animate2 { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } } section .row:nth-child(even) div { animation: animate3 80s linear infinite; animation-delay: -80s; } section .row:nth-child(even) div:nth-child(2) { animation: animate4 80s linear infinite; animation-delay: -40s; } @keyframes animate3 { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } @keyframes animate4 { 0% { transform: translateX(-200%); } 100% { transform: translateX(0); } } div { position: relative; color: white; background-color: transparent; z-index: 100; line-height: 2rem; color: #fff6; } .container { position: relative; background-color: transparent; } .container .card { position: relative; width: 320px; height: 450px; background: #232323; border-radius: 20px; overflow: hidden; } .container .card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; clip-path: circle(150px at 80% 20%); transition: 0.5s ease-in-out; } .container .card:hover:before { clip-path: circle(300px at 80% -20%); } .container .card:after { content: "Nike"; position: absolute; top: 30%; left: -20%; font-size: 12em; font-weight: 800; font-style: italic; color: rgba(255, 255, 255, 0.04); } .container .card .product-pic { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10000; width: 100%; height: 220px; transition: 0.5s; } .container .card:hover .product-pic { top: 0%; transform: translateY(0%); } .container .card .product-pic img { position: absolute; top: 49%; left: 50%; transform: translate(-50%, -50%) rotate(-25deg); width: 270px; } .container .card .contentBx { position: absolute; bottom: 0; width: 100%; height: 100px; text-align: center; transition: 1s; z-index: 10; } .container .card:hover .contentBx { height: 210px; } .container .card .contentBx h2 { position: relative; font-weight: 600; letter-spacing: 1px; color: #fff; } .container .card .contentBx .product-size, .container .card .contentBx .product-colors { display: flex; justify-content: center; align-items: center; padding: 8px 20px; transition: 0.5s; opacity: 0; visibility: hidden; } .container .card:hover .contentBx .product-size { opacity: 1; visibility: visible; transition-delay: 0.57s; } .container .card:hover .contentBx .product-colors { opacity: 1; visibility: visible; transition-delay: 0.8s; } .container .card .contentBx .product-size h3, .container .card .contentBx .product-colors h3 { color: #fff; font-weight: 300; font-size: 14px; text-transform: uppercase; letter-spacing: 2px; margin-right: 10px; } .container .card .contentBx .product-size span { width: 26px; height: 26px; text-align: center; line-height: 26px; font-size: 14px; display: inline-block; color: #111; background: #fff; margin: 0 5px; transition: 0.5s; color: #111; border-radius: 4px; cursor: pointer; } .container .card .contentBx .product-size span:hover { background: #9bdc28; } .container .card .contentBx .product-colors span { width: 14px; height: 14px; margin: 0 10px; border-radius: 50%; cursor: pointer; position: relative; } .container .card .contentBx .product-colors .active::after { content: ""; width: 22px; height: 22px; border: 2px solid #8888; position: absolute; border-radius: 50%; box-sizing: border-box; left: -4px; top: -4px; } .container .card .contentBx .product-colors span:nth-child(2) { background: #9bdc28; } .container .card .contentBx .product-colors span:nth-child(3) { background: #03a9f4; } .container .card .contentBx .product-colors span:nth-child(4) { background: #e91e63; } .container .card .contentBx a { display: inline-block; padding: 10px 20px; background: #fff; border-radius: 4px; margin-top: 10px; text-decoration: none; font-weight: 600; color: #111; opacity: 0; transform: translateY(50px); transition: 0.5s; } .container .card:hover .contentBx a { opacity: 1; transform: translateY(0px); transition-delay: 0.88s; }
<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta charset="UTF-8"> <title>FontAwesome Background | Animation Effects</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="style2.css"> </head> <body> <section id="background"> <div class="row"> <div> <i class="fa fa-address-book-o" aria-hidden="true"></i> <i class="fa fa-bath" aria-hidden="true"></i> <i class="fa fa-shower" aria-hidden="true"></i> <i class="fa fa-thermometer-half" aria-hidden="true"></i> <i class="fa fa-balance-scale" aria-hidden="true"></i> <i class="fa fa-battery-half" aria-hidden="true"></i> <i class="fa fa-bell-o" aria-hidden="true"></i> <i class="fa fa-bicycle" aria-hidden="true"></i> <i class="fa fa-bolt" aria-hidden="true"></i> <i class="fa fa-bullhorn" aria-hidden="true"></i> <i class="fa fa-commenting-o" aria-hidden="true"></i> <i class="fa fa-code" aria-hidden="true"></i> <i class="fa fa-comments-o" aria-hidden="true"></i> <i class="fa fa-envelope-o" aria-hidden="true"></i> <i class="fa fa-gift" aria-hidden="true"></i> <i class="fa fa-glass" aria-hidden="true"></i> <i class="fa fa-globe" aria-hidden="true"></i> <i class="fa fa-graduation-cap" aria-hidden="true"></i> <i class="fa fa-heart-o" aria-hidden="true"></i> <i class="fa fa-hourglass" aria-hidden="true"></i> </div> <div> <i class="fa fa-address-book-o" aria-hidden="true"></i> <i class="fa fa-bath" aria-hidden="true"></i> <i class="fa fa-shower" aria-hidden="true"></i> <i class="fa fa-thermometer-half" aria-hidden="true"></i> <i class="fa fa-balance-scale" aria-hidden="true"></i> <i class="fa fa-battery-half" aria-hidden="true"></i> <i class="fa fa-bell-o" aria-hidden="true"></i> <i class="fa fa-bicycle" aria-hidden="true"></i> <i class="fa fa-bolt" aria-hidden="true"></i> <i class="fa fa-bullhorn" aria-hidden="true"></i> <i class="fa fa-commenting-o" aria-hidden="true"></i> <i class="fa fa-code" aria-hidden="true"></i> <i class="fa fa-comments-o" aria-hidden="true"></i> <i class="fa fa-envelope-o" aria-hidden="true"></i> <i class="fa fa-gift" aria-hidden="true"></i> <i class="fa fa-glass" aria-hidden="true"></i> <i class="fa fa-globe" aria-hidden="true"></i> <i class="fa fa-graduation-cap" aria-hidden="true"></i> <i class="fa fa-heart-o" aria-hidden="true"></i> <i class="fa fa-hourglass" aria-hidden="true"></i> </div> </div> <div class="row"> <div> <i class="fa fa-address-book-o" aria-hidden="true"></i> <i class="fa fa-bath" aria-hidden="true"></i> <i class="fa fa-shower" aria-hidden="true"></i> <i class="fa fa-thermometer-half" aria-hidden="true"></i> <i class="fa fa-balance-scale" aria-hidden="true"></i> <i class="fa fa-battery-half" aria-hidden="true"></i> <i class="fa fa-bell-o" aria-hidden="true"></i> <i class="fa fa-bicycle" aria-hidden="true"></i> <i class="fa fa-bolt" aria-hidden="true"></i> <i class="fa fa-bullhorn" aria-hidden="true"></i> <i class="fa fa-commenting-o" aria-hidden="true"></i> <i class="fa fa-code" aria-hidden="true"></i> <i class="fa fa-comments-o" aria-hidden="true"></i> <i class="fa fa-envelope-o" aria-hidden="true"></i> <i class="fa fa-gift" aria-hidden="true"></i> <i class="fa fa-glass" aria-hidden="true"></i> <i class="fa fa-globe" aria-hidden="true"></i> <i class="fa fa-graduation-cap" aria-hidden="true"></i> <i class="fa fa-heart-o" aria-hidden="true"></i> <i class="fa fa-hourglass" aria-hidden="true"></i> </div> <div> <i class="fa fa-address-book-o" aria-hidden="true"></i> <i class="fa fa-bath" aria-hidden="true"></i> <i class="fa fa-shower" aria-hidden="true"></i> <i class="fa fa-thermometer-half" aria-hidden="true"></i> <i class="fa fa-balance-scale" aria-hidden="true"></i> <i class="fa fa-battery-half" aria-hidden="true"></i> <i class="fa fa-bell-o" aria-hidden="true"></i> <i class="fa fa-bicycle" aria-hidden="true"></i> <i class="fa fa-bolt" aria-hidden="true"></i> <i class="fa fa-bullhorn" aria-hidden="true"></i> <i class="fa fa-commenting-o" aria-hidden="true"></i> <i class="fa fa-code" aria-hidden="true"></i> <i class="fa fa-comments-o" aria-hidden="true"></i> <i class="fa fa-envelope-o" aria-hidden="true"></i> <i class="fa fa-gift" aria-hidden="true"></i> <i class="fa fa-glass" aria-hidden="true"></i> <i class="fa fa-globe" aria-hidden="true"></i> <i class="fa fa-graduation-cap" aria-hidden="true"></i> <i class="fa fa-heart-o" aria-hidden="true"></i> <i class="fa fa-hourglass" aria-hidden="true"></i> </div> </div> <div class="row"> <div> <i class="fa fa-address-book-o" aria-hidden="true"></i> <i class="fa fa-bath" aria-hidden="true"></i> <i class="fa fa-shower" aria-hidden="true"></i> <i class="fa fa-thermometer-half" aria-hidden="true"></i> <i class="fa fa-balance-scale" aria-hidden="true"></i> <i class="fa fa-battery-half" aria-hidden="true"></i> <i class="fa fa-bell-o" aria-hidden="true"></i> <i class="fa fa-bicycle" aria-hidden="true"></i> <i class="fa fa-bolt" aria-hidden="true"></i> <i class="fa fa-bullhorn" aria-hidden="true"></i> <i class="fa fa-commenting-o" aria-hidden="true"></i> <i class="fa fa-code" aria-hidden="true"></i> <i class="fa fa-comments-o" aria-hidden="true"></i> <i class="fa fa-envelope-o" aria-hidden="true"></i> <i class="fa fa-gift" aria-hidden="true"></i> <i class="fa fa-glass" aria-hidden="true"></i> <i class="fa fa-globe" aria-hidden="true"></i> <i class="fa fa-graduation-cap" aria-hidden="true"></i> <i class="fa fa-heart-o" aria-hidden="true"></i> <i class="fa fa-hourglass" aria-hidden="true"></i> </div> <div> <i class="fa fa-address-book-o" aria-hidden="true"></i> <i class="fa fa-bath" aria-hidden="true"></i> <i class="fa fa-shower" aria-hidden="true"></i> <i class="fa fa-thermometer-half" aria-hidden="true"></i> <i class="fa fa-balance-scale" aria-hidden="true"></i> <i class="fa fa-battery-half" aria-hidden="true"></i> <i class="fa fa-bell-o" aria-hidden="true"></i> <i class="fa fa-bicycle" aria-hidden="true"></i> <i class="fa fa-bolt" aria-hidden="true"></i> <i class="fa fa-bullhorn" aria-hidden="true"></i> <i class="fa fa-commenting-o" aria-hidden="true"></i> <i class="fa fa-code" aria-hidden="true"></i> <i class="fa fa-comments-o" aria-hidden="true"></i> <i class="fa fa-envelope-o" aria-hidden="true"></i> <i class="fa fa-gift" aria-hidden="true"></i> <i class="fa fa-glass" aria-hidden="true"></i> <i class="fa fa-globe" aria-hidden="true"></i> <i class="fa fa-graduation-cap" aria-hidden="true"></i> <i class="fa fa-heart-o" aria-hidden="true"></i> <i class="fa fa-hourglass" aria-hidden="true"></i> </div> </div> <div class="row"> <div> <i class="fa fa-address-book-o" aria-hidden="true"></i> <i class="fa fa-bath" aria-hidden="true"></i> <i class="fa fa-shower" aria-hidden="true"></i> <i class="fa fa-thermometer-half" aria-hidden="true"></i> <i class="fa fa-balance-scale" aria-hidden="true"></i> <i class="fa fa-battery-half" aria-hidden="true"></i> <i class="fa fa-bell-o" aria-hidden="true"></i> <i class="fa fa-bicycle" aria-hidden="true"></i> <i class="fa fa-bolt" aria-hidden="true"></i> <i class="fa fa-bullhorn" aria-hidden="true"></i> <i class="fa fa-commenting-o" aria-hidden="true"></i> <i class="fa fa-code" aria-hidden="true"></i> <i class="fa fa-comments-o" aria-hidden="true"></i> <i class="fa fa-envelope-o" aria-hidden="true"></i> <i class="fa fa-gift" aria-hidden="true"></i> <i class="fa fa-glass" aria-hidden="true"></i> <i class="fa fa-globe" aria-hidden="true"></i> <i class="fa fa-graduation-cap" aria-hidden="true"></i> <i class="fa fa-heart-o" aria-hidden="true"></i> <i class="fa fa-hourglass" aria-hidden="true"></i> </div> <div> <i class="fa fa-address-book-o" aria-hidden="true"></i> <i class="fa fa-bath" aria-hidden="true"></i> <i class="fa fa-shower" aria-hidden="true"></i> <i class="fa fa-thermometer-half" aria-hidden="true"></i> <i class="fa fa-balance-scale" aria-hidden="true"></i> <i class="fa fa-battery-half" aria-hidden="true"></i> <i class="fa fa-bell-o" aria-hidden="true"></i> <i class="fa fa-bicycle" aria-hidden="true"></i> <i class="fa fa-bolt" aria-hidden="true"></i> <i class="fa fa-bullhorn" aria-hidden="true"></i> <i class="fa fa-commenting-o" aria-hidden="true"></i> <i class="fa fa-code" aria-hidden="true"></i> <i class="fa fa-comments-o" aria-hidden="true"></i> <i class="fa fa-envelope-o" aria-hidden="true"></i> <i class="fa fa-gift" aria-hidden="true"></i> <i class="fa fa-glass" aria-hidden="true"></i> <i class="fa fa-globe" aria-hidden="true"></i> <i class="fa fa-graduation-cap" aria-hidden="true"></i> <i class="fa fa-heart-o" aria-hidden="true"></i> <i class="fa fa-hourglass" aria-hidden="true"></i> </div> </div> </section> <!-- ############################################################################################################################## --> <!-- ############################################################################################################################## --> <div class="container"> <div class="card"> <div class="product-pic"> <img src="1.png" class="pop2" /> </div> <div class="contentBx"> <h2>Nike Shoes</h2> <div class="product-size"> <h3>Size :</h3> <span>40</span> <span>41</span> <span>42</span> <span>43</span> </div> <div class="product-colors"> <h3>Color :</h3> <span data-color="#9bdc28" data-pic="url(1.png)"></span> <span data-color="#03a9f4" data-pic="url(2.png)"></span> <span data-color="#e91e63" data-pic="url(3.png)"></span> </div> <a href="#">Buy Now</a> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" charset="utf-8"></script> <script> $('.product-colors span').click(function () { $('.product-colors span').removeClass('active'); $(this).addClass('active'); $('#background i').css('color', this.getAttribute('data-color')); $('.card').css('background-color', this.getAttribute('data-color')) $('.pop2').attr('src', this.getAttribute('data-pic')) }).first().click(); //initialize </script> </body> </html>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.