target伪类实例：模拟抽奖大转盘效果

:target伪类的作用是给锚机链接应用样式。根据这个原理，利用animation-play-state的开关属性，再结合transition过渡触发，就可以做一个模拟抽奖大转盘的效果。主要实现点击按钮后圆盘转动。代码部分如下：

html部分：

<div class="circle" id="c1"></div>
<a href="#c1"><div id="click"></div></a>

css部分:

*{ margin: 20px; }
.circle{ width: 300px;
height: 300px;
background: linear-gradient(#1db0b8,#d0e9ff);
border-radius: 150px;
animation: rotate1 5s ease;
animation-play-state: paused;
transition: animation-play-state; }
@keyframes rotate1{
from{transform: rotate(0deg)}
to{transform: rotate(3600deg)} }
#click{ width: 80px;
height: 80px;
border-radius: 30px;
background: #011935;
position: absolute;
left:150px;
top: 140px; }
#click:before{ width: 0;
height: 0;
content: "";
border-bottom: 50px solid #011935;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
position: absolute;
left: 0px;
top:-20px; }
#c1:target{ animation-play-state: running; }