纯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;
}
.start{
	display: block;
	width: 90px;
    height: 90px;
    display:table-cell;
	vertical-align:middle;
	text-align: center;
	background-color: #ffbe00;
    box-shadow: 0 0.3em 0.3em rgba(255, 254, 255, 0.6) inset, 0 -0.1em 0.3em rgba(0, 0, 0, 0.15) inset, 0 0.1em 3px #b38600, 0 0.3em 1px #997300, 0 0.5em 5px rgba(0, 0, 0, 0.2);
    color: #990033 !important;
    background-image: radial-gradient(ellipse farthest-corner at center top , rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
    text-decoration: none;
    transition: background 0.2s ease-in-out 0s;
    outline: none;
}
.start:hover{
	background-color: #fad873;
}
.ck:active{
	background-image: 	-webkit-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) ));
	background-image: 	-moz-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) ));
	background-image: 	gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) ));

	-webkit-box-shadow: inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */ 
.........完整代码请登录后点击上方下载按钮下载查看