html旋转代码_用CSS实现一个抽奖转盘(附详细代码+思路)

最新推荐文章于 2024-05-08 15:40:33 发布

weixin_39650745

最新推荐文章于 2024-05-08 15:40:33 发布

阅读量2.6k

点赞数 2

文章标签： html旋转代码 wrapper怎么用如何设置几个循环出来的span其中一个宽度

原文：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>Documen

最低0.47元/天解锁文章

weixin_39650745

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
html旋转代码_用CSS实现一个抽奖转盘(附详细代码+思路)

原文：https://www.cnblogs.com/wenruo/p/9732704.html先上效果基本是用CSS实现的，没有用图片，加一丢丢JS。不过没有考虑太多兼容性。首先画一个转盘<html lang="en"><head> <meta charset="UTF-8"> <title>幸运大转盘title> <s...
复制链接

扫一扫