css3中实现摘取金币_用css3实现抽奖转盘里的扇形图
生活随笔
收集整理的這篇文章主要介紹了
css3中实现摘取金币_用css3实现抽奖转盘里的扇形图
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
1、html布局
2、css部分
.pie
position relative;
aspect(4.5rem)
border-radius 50%
overflow hidden
.slice
overflow hidden
position absolute
top 0
right 0
width 50%
height 50%
transform-origin 0% 100%
.slice-one
transform rotate(30deg) skewY(-30deg)
background black
.slice-two
transform rotate(-30deg) skewY(-30deg)
background yellow
.slice-three
transform rotate(-90deg) skewY(-30deg)
background black
.slice-four
transform rotate(-150deg) skewY(-30deg)
background yellow
.slice-five
transform rotate(-210deg) skewY(-30deg)
background black
.slice-six
transform rotate(-270deg) skewY(-30deg)
background yellow
3、效果圖
微信截圖_20200908094825.png
總結(jié)
以上是生活随笔為你收集整理的css3中实现摘取金币_用css3实现抽奖转盘里的扇形图的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 废旧光盘手工小制作_佳味家味浓 丨佳人美
- 下一篇： vue 传递多行数据_vue 数据传递的