<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>抽奖</title>
<style>
*{
margin: 0;padding: 0;}
body{
font-family: "Microsoft YaHei";}
.box{
width: 600px;height: 600px;background: #d40;position: relative;padding: 20px;margin: 100px auto;border-radius: 50%;}
.lottery{
width: 600px;height: 600px;margin: 0 auto;position: relative;background: #330000;box-shadow: 0 0 15px #000;border-radius: 50%;overflow: hidden;}
.block{
width: 300px;
height: 300px;
position: absolute;
box-shadow: 0 0 1px #000 inset;
transform-origin:right bottom 0;
-webkit-transform-origin:right bottom 0;
}
.block:nth-of-type(1){
transform: rotate(45deg) skewY(45deg);
background: orange;
}
.block:nth-of-type(2){
transform: rotate(90deg) skewY(45deg);
background: darkorange;
}
.block:nth-of-type(3){
transform: rotate(135deg) skewY(45deg);
background: orange;
}
.block:nth-
CSS3编写抽奖效果
最新推荐文章于 2021-08-03 20:48:58 发布