纯css抽奖旋转效果-html代码-BFW代码库

纯css抽奖旋转效果

代码语言：html

所属分类：电商

代码描述：纯css抽奖旋转效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
*{
	margin: 0;
	margin: 0;
}
.circle{
  border-radius: 50%;
}

.main{
	width: 580px;
	height: 580px;
	background: #c7591a;
	margin: 20px auto;
	padding: 10px;
	position: relative;
	text-align: center;
	vertical-align: middle;
}
.outer{
	width: 520px;
	height: 520px;
	background: #fe6c07;
	padding: 30px;
}
.border{
	width: 500px;
	height: 500px;
	background-color: #fde85b;
    background-image: linear-gradient(transparent 42%,#ffa068 42%, #ffa068 58%, transparent 58%, transparent),
    linear-gradient(-90deg,transparent 42%,#ffa068 42%, #ffa068 58%, transparent 58%, transparent),
    linear-gradient(-45deg,transparent 45%,#ffa068 45%, #ffa068 55%, transparent 55%, transparent),
    linear-gradient(45deg,transparent 45%,#ffa068 45%, #ffa068 55%, transparent 55%, transparent);
    background-image: -webkit-linear-gradient(transparent 42%,#ffa068 42%, #ffa068 58%, transparent 58%, transparent),
    -webkit-linear-gradient(0deg,transparent 42%,#ffa068 42%, #ffa068 58%, transparent 58%, transparent),
    -webkit-linear-gradient(-45deg,transparent 45%,#ffa068 45%, #ffa068 55%, transparent 55%, transparent),
    -webkit-linear-gradient(45deg,transparent 45%,#ffa068 45%, #ffa068 55%, transparent 55%, transparent);

    /*chrome浏览器不支持-90deg,firefox不支持0deg。坑爹吧！*/

	padding: 10px;
	display:table-cell;
	vertical-align:middle;
}
.content{
	width: 498px;
	height: 498px;
	background: #fff1d2;
	border: 1px solid #ccc;
	position: absolute;
	top: 50px;
	left: 50px;
	transition:all 5s ease-in-out;
}
.pointer{
	width: 133px;
	height: 133px;
	background: #fee98c;
	margin: 0 auto;
	border: 1px solid #ccc;
	padding: 25px;
    box-shadow: 0px 0px 2px rgba(255,255,255,0.75) inset;
}
.start-outer{
	width: 93px;
	height: 93px;
	background: #ff6b00;
	position: relative;
	padding: 20px;
	box-shadow: 0 0px 6px rgba(0,0,0,0.4),0px 0px 3px rgba(255,255,255,0.85) inset;
	z-index: 999;
}
.start-outer:after{
	position: absolute;
	content: "";
	border-width:0 20px 80px 20px;
    border-style:solid;
    border-color:transparent transparent #ff6b00;
    width:0;
    top:-75px;
    left: 48px;
}
.........完整代码请登录后点击上方下载按钮下载查看