css画横线箭头_用CSS实现一个抽奖转盘(附详细代码+思路)-CSDN博客

本文链接：https://blog.csdn.net/weixin_29042035/article/details/112526786

本文介绍了如何使用CSS来创建一个抽奖转盘，包括绘制指针小箭头和扇形区域，同时探讨了如何通过linear-gradient实现任意角度的扇形。还涉及到CSS动画在点亮转盘周围灯光效果中的应用，以及简单的JS实现点击旋转动画。文章适合有一定CSS基础的学习者。

摘要由CSDN通过智能技术生成

点击上方“ 前端印象 ”，选择“ 设为星标 ” 第一时间关注技术干货！

效果

基本是用CSS实现的，没有用图片，加一丢丢JS。完全没有考虑兼容性。

首先画一个转盘

html><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 实现想法是真的棒。不过还有好多复杂的实现看的不是很懂= =

ow to draw a circle sector in CSS?

Segments in a circle using CSS3

3种纯CSS实现中间镂空的12色彩虹渐变圆环方法

实现就是通过两个正方形取相交区域。

我觉图画的还是挺好的:D

没有用伪元素实现，因为我还要加文字，至于文字的位置，我真的是瞎调的，反正正经写代码也不会这么写= =

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <style>.sector {
    position: absolute;width: 100px;height: 200px;margin: 100px;border-radius: 0px 100px 100px 0;overflow: hidden;transform: rotate(-18deg);
        }.sector-inner {
    text