我尝试使用 CSS 中的动画按钮为社交媒体制作分享按钮。但我想要一些按钮显示在一页中。针对不同的内容。但我发现这对第二个按钮不起作用。如果单击第二个按钮,则第一个按钮而不是第二个按钮动画。我的问题是如何将 CSS 应用于我页面中的每个按钮?
这是 fiddle : https://jsfiddle.net/2s6w4hq7/
这是我的 HTML:
<title>Profill</title>
<br>
<br>
<br>
<br>
<div class="share">
<div class="share-button">
<input class="toggle-input" id="toggle-input" type="checkbox" />
<label for="toggle-input" class="toggle"></label>
<ul class="network-list">
<li class="twitter">
<a href="#">Share on Twitter</a>
</li>
<li class="facebook">
<a href="#">Share on Facebook</a>
</li>
<li class="googleplus">
<a href="#">Share on Google+</a>
</li>
</ul>
</div>
</div>
<br>
<br>
<div class="share">
<div class="share-button">
<input class="toggle-input" id="toggle-input" type="checkbox" />
<label for="toggle-input" class="toggle"></label>
<ul class="network-list">
<li class="twitter">
<a href="#">Share on Twitter</a>
</li>
<li class="facebook">
<a href="#">Share on Facebook</a>
</li>
<li class="googleplus">
<a href="#">Share on Google+</a>
</li>
</ul>
</div>
</div>
这是 CSS :
/*
Using FontAwesome for icons
https://fortawesome.github.io/Font-Awesome/
*/
.share-button {
position: relative;
width: 50px;
margin: 5px;
}
.toggle {
position: relative;
width: 50px;
height: 50px;
z-index: 10;
display: block;
cursor: pointer;
color: #fff;
background-color: #3D3D3D;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border-radius: 50%;
}
.toggle:hover {
background-color: #0a0a0a;
}
.toggle:after {
position: relative;
display: block;
width: 50px;
height: 50px;
font-family: 'FontAwesome';
content: "\f1e0";
line-height: 50px;
font-size: 29px;
text-align: center;
left: -2px;
}
.toggle-input {
display: none;
}
.toggle-input:checked + .toggle:after, .toggle-input:checked + .toggle:before {
background-color: #fff;
content: "";
height: 3px;
width: 30px;
position: absolute;
left: 10px;
top: 23px;
}
.toggle-input:checked + .toggle:after {
-webkit-animation: bar1 0.3s forwards;
animation: bar1 0.3s forwards;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.toggle-input:checked + .toggle:before {
-webkit-animation: bar2 0.3s forwards;
animation: bar2 0.3s forwards;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.network-list li {
position: absolute;
display: block;
width: 50px;
height: 50px;
margin: 0;
padding: 0;
list-style-type: none;
opacity: 0;
}
.network-list .twitter {
left: 50px;
top: -50px;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transform: perspective(500px) rotateX(90deg) rotateY(0deg) rotateZ(0deg);
transform: perspective(500px) rotateX(90deg) rotateY(0deg) rotateZ(0deg);
-webkit-transition: all 0.15s ease;
transition: all 0.15s ease;
}
.network-list .facebook {
left: 50px;
top: 0;
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-webkit-transform: perspective(500px) rotateX(0deg) rotateY(90deg) rotateZ(0deg);
transform: perspective(500px) rotateX(0deg) rotateY(90deg) rotateZ(0deg);
-webkit-transition: all 0.15s ease 0.3s;
transition: all 0.15s ease 0.3s;
}
.network-list .googleplus {
left: 50px;
top: 50px;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: perspective(500px) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
transform: perspective(500px) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
-webkit-transition: all 0.15s ease 0.15s;
transition: all 0.15s ease 0.15s;
}
.network-list a {
color: #fff;
position: relative;
display: block;
width: 50px;
height: 50px;
overflow: hidden;
line-height: 50px;
text-indent: 120%;
text-decoration: none;
}
.network-list a:before {
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute;
width: 50px;
height: 50px;
font-family: 'FontAwesome';
font-size: 26px;
-webkit-font-smoothing: antialiased;
text-align: center;
line-height: 50px;
text-indent: 0;
}
.network-list .twitter a {
background-color: #00C3F3;
border-radius: 50%;
}
.network-list .twitter a:before {
content: "\f099";
}
.network-list .twitter a:hover:before {
box-shadow: inset 0 0 0 2px #00C3F3;
}
.network-list .facebook a {
background-color: #2C609B;
border-radius: 50%;
}
.network-list .facebook a:before {
content: "\f09a";
}
.network-list .facebook a:hover:before {
box-shadow: inset 0 0 0 2px #2C609B;
}
.network-list .googleplus a {
background-color: #EC3F25;
border-radius: 50%;
}
.network-list .googleplus a:before {
content: "\f0d5";
}
.network-list .googleplus a:hover:before {
box-shadow: inset 0 0 0 2px #EC3F25;
}
input:checked ~ .network-list li {
opacity: 1;
top: 0;
}
input:checked ~ .network-list .twitter {
left: 50px;
top: -50px;
-webkit-transform: perspective(500px) rotateX(0) rotateY(0deg) rotateZ(0deg);
transform: perspective(500px) rotateX(0) rotateY(0deg) rotateZ(0deg);
-webkit-transition: all 0.25s ease 0.4s;
transition: all 0.25s ease 0.4s;
}
input:checked ~ .network-list .facebook {
left: 50px;
top: 0;
-webkit-transform: perspective(500px) rotateX(0deg) rotateY(0) rotateZ(0deg);
transform: perspective(500px) rotateX(0deg) rotateY(0) rotateZ(0deg);
-webkit-transition: all 0.25s ease 0.2s;
transition: all 0.25s ease 0.2s;
}
input:checked ~ .network-list .googleplus {
left: 50px;
top: 50px;
-webkit-transform: perspective(500px) rotateX(0) rotateY(0deg) rotateZ(0deg);
transform: perspective(500px) rotateX(0) rotateY(0deg) rotateZ(0deg);
-webkit-transition: all 0.25s ease 0.6s;
transition: all 0.25s ease 0.6s;
}
@-webkit-keyframes bar1 {
0% {
content: "\f1e0";
width: 46px;
height: 50px;
background-color: transparent;
-webkit-transform: scale(1);
transform: scale(1);
top: 0;
left: 0;
opacity: 1;
}
50% {
background-color: transparent;
content: "\f1e0";
width: 46px;
height: 50px;
top: 0;
left: 0;
-webkit-transform: scale(0.2);
transform: scale(0.2);
opacity: 0;
}
50.001% {
background-color: #fff;
left: 10px;
top: 22px;
content: "";
height: 3px;
width: 30px;
-webkit-transform: rotate(45deg), scale(0.2);
transform: rotate(45deg), scale(0.2);
}
100% {
-webkit-transform: rotate(45deg), scale(1);
transform: rotate(45deg), scale(1);
opacity: 1;
}
}
@keyframes bar1 {
0% {
content: "\f1e0";
width: 46px;
height: 50px;
background-color: transparent;
-webkit-transform: scale(1);
transform: scale(1);
top: 0;
left: 0;
opacity: 1;
}
50% {
background-color: transparent;
content: "\f1e0";
width: 46px;
height: 50px;
top: 0;
left: 0;
-webkit-transform: scale(0.2);
transform: scale(0.2);
opacity: 0;
}
50.001% {
background-color: #fff;
left: 10px;
top: 22px;
content: "";
height: 3px;
width: 30px;
-webkit-transform: rotate(45deg), scale(0.2);
transform: rotate(45deg), scale(0.2);
}
100% {
-webkit-transform: rotate(45deg), scale(1);
transform: rotate(45deg), scale(1);
opacity: 1;
}
}
@-webkit-keyframes bar2 {
0% {
background-color: transparent;
-webkit-transform: 0 scale(0.2);
transform: 0 scale(0.2);
opacity: 0;
}
50% {
background-color: transparent;
-webkit-transform: 0 scale(0.2);
transform: 0 scale(0.2);
opacity: 0;
}
50.1% {
background-color: transparent;
-webkit-transform: rotate(-45deg) scale(0.2);
transform: rotate(-45deg) scale(0.2);
opacity: 0;
}
100% {
-webkit-transform: rotate(-45deg) scale(1);
transform: rotate(-45deg) scale(1);
opacity: 1;
}
}
@keyframes bar2 {
0% {
background-color: transparent;
-webkit-transform: 0 scale(0.2);
transform: 0 scale(0.2);
opacity: 0;
}
50% {
background-color: transparent;
-webkit-transform: 0 scale(0.2);
transform: 0 scale(0.2);
opacity: 0;
}
50.1% {
background-color: transparent;
-webkit-transform: rotate(-45deg) scale(0.2);
transform: rotate(-45deg) scale(0.2);
opacity: 0;
}
100% {
-webkit-transform: rotate(-45deg) scale(1);
transform: rotate(-45deg) scale(1);
opacity: 1;
}
}
最佳答案
您需要使用不同的 id
对于每个按钮并匹配 <label>'s
for
属性到同一个 id:
例如:
https://jsfiddle.net/2s6w4hq7/1/
<input class="toggle-input" id="toggle-input-1" type="checkbox" />
<label for="toggle-input-1" class="toggle"></label>
<input class="toggle-input" id="toggle-input-2" type="checkbox" />
<label for="toggle-input-2" class="toggle"></label>
关于javascript - 在一个页面中为多个实例应用 CSS 动画类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42407218/