原文:https://www.cnblogs.com/wenruo/p/9732704.html
先上效果
基本是用CSS实现的,没有用图片,加一丢丢JS。不过没有考虑太多兼容性。
首先画一个转盘
<html lang="en"><head> <meta charset="UTF-8"> <title>幸运大转盘title> <style> /* 重置默认样式 */ * {
margin: 0; padding: 0; border: none; outline: none; } .wrapper {
position: relative; height: 200px; width: 200px; padding: 20px; margin: 20px; background-color: #c0381f; box-shadow: #000000 0px 0px 10px; border-radius: 50%; } .panel {
position: relative; height: 200px; width: 200px; background-color: #b7b7b7; border-radius: 100px; } .pointer {
position: absolute; left: 79px; top: 79px; z-index: 10; height: 30px; width: 30px; padding: 6px; color: #fff899; line-height: 15px; font-size: 12px; text-align: center; background-color: #dc5b5b; border-radius: 50%; border: 1px solid #c0381f; }style>head><body> <div class="wrapper"> <div class="panel"> <div class="pointer">开始抽奖div> div> div>body>html>
效果如下,配色什么的不要在意,可能比较丑。。。
然后写抽奖指针的小箭头,用CSS画三角形是一个比较常见的问题,通过设置width和height为0,然后用border实现。
如图,矩形是由四个三角形边框组成的,只要设置其它边颜色为透明,就可以获得单独的三角形。
这里通过伪元素after实现三角形,并通过绝对定位将三角形定位到中间小圆的顶端。
.pointer::after {
content: ''; position: absolute; left: 14px; top: -24px; border-width: 12px 6px; border-style: solid; border-color: transparent; border-bottom-color: #c0381f;}
现在才像一个指针了。
哦 接下来是实现转盘背景,不同的扇区对应不同的奖品,这样就有一个需求:实现任意角度扇形。
可能会想当然的认为和三角形一样,不过是加一个border-radius而已,高度是圆半径,宽度是tan(θ/2),但是实现出来的效果和想象并不一样……(可能需要做一些其他操作以达到效果,但是我没想到。
最后还是求助了搜索引擎。不得不承认dalao们实在是太nb了,qaq……通过 linear-gradient 实现想法是真的棒。不过还有好多复杂的实现看的不是很懂= =
How to draw a circle sector in CSS?
Segments in a circle using CSS3
3种纯CSS实现中间镂空的12色彩虹渐变圆环方法
实现就是通过两个正方形取相交区域。
我觉图画的还是挺好的:D
没有用伪元素实现,因为我还要加文字,至于文字的位置,我真的是瞎调的,反正正经写代码也不会这么写= =
<html lang="en"><head> <meta charset="UTF-8"> <title>Docu