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

作者: 漆家洲 分类: CSS3,建站知识 发布时间: 2018-05-03 15:04 浏览次数:258

: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; }

 

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!