label::after{ content: "点击收藏"; } body{ height: 70vh; display: flex; justify-content: center; align-items: center; background: #222222; } label{ /* border: 1px red solid; */ position:relative; } label::before{ content: ""; position:absolute; box-sizing: border-box; width: 100%; height: 100%; border-radius: 50%; border: 30px gold solid; z-index: -1; transform: scale(0); } label::after{ content: "点击收藏"; position: absolute; width: 100%; color: silver; font-size: 36px; text-align: center; } label svg{ fill: silver; } #fav-btn{ display: none; } /* 星星动画 */ @keyframes star{ 0%{ fill: silver; transform: scale(1); } 20%{ fill: gold; transform: scale(0); } 30%{ transform: scale(1.2); } 40%{ transform: scale(1); } 50%{ transform: scale(.8); } 75%{ transform: scale(1); } 90%{ transform: scale(.9); } 100%{ fill: gold; transform: scale(1); } } /* 当input控件被选中状态时(点击),动画才执行 */ #fav-btn:checked + label svg{ animation: star 1.5s forwards ease-in; } @keyframes circle{ from{ transform: scale(0); border-width: 30px; } to{ transform: scale(1.3); border-width: 0px; } } #fav-btn:checked + label::before{ animation: circle .6s; } #fav-btn:checked + label::after{ content: "已收藏"; color: gold; }