七乐彩图表走势图表
    Html
    Css
    Js


body {
	width:100%;
	height:100%;
	position:absolute;
	top:0px;
	left:0px;
	background:rgb(39,40,59);
	overflow:hidden;
}
* {
	margin:0;
	padding:0;
	box-sizing:border-box;
}
.box {
	cursor:pointer;
	width:300px;
	height:300px;
	position:relative;
	top:50%;
	left:50%;
	transform:translateX(-50%) translateY(-50%);
}
.box .out {
	position:absolute;
	top:0;
	left:0;
	width:0;
	border:150px solid;
	border-radius:50%;
	border-color:transparent transparent #d72928 #db3e3d;
	transform:rotate(45deg);
	transform-origin:150px 150px;
	transition:all 0.5s;
}
.box .head {
	position:absolute;
	top:50%;
	right:25px;
	width:0;
	border:125px solid;
	border-radius:50%;
	border-color:rgb(255,255,255) rgb(248,210,69) transparent rgb(242,242,242);
	transform:translateY(-50%) rotate(-45deg);
	transform-origin:50% 50%;
	transition:all 0.5s;
}
.box .mouse {
	position:absolute;
	top:28%;
	right:85px;
	width:0;
	border:65px solid;
	border-radius:50%;
	border-color:transparent rgb(247,167,3) transparent transparent;
	transform:rotate(45deg);
	transform-origin:50% 50%;
	transition:all 0.5s;
}
.box .mouse .eye {
	position:absolute;
	top:-15px;
	left:-50px;
	width:25px;
	height:25px;
	border-radius:50%;
	transition:all 0.5s;
	background:#000;
}
.box:hover .out {
	transform:rotate(225deg);
	border-color:transparent transparent rgb(31,232,182) rgb(22,215,167);
}
.box:hover .head {
	border-color:rgb(242,242,242) transparent rgb(248,210,69) rgb(255,255,255);
	transform:translateY(-50%) rotate(-225deg);
}
.box:hover .mouse {
	transform:rotate(135deg);
}

↑上面代碼改變,會自動顯示代碼結果 jQuery調用版本:1.11.3
 立即下載

CSS3特效鳥

更新時間:2019-10-10 00:12:16

0
七乐彩图表走势图表 什么都不赚钱 北京地区股票融资 17175捕鱼害死人 竞彩比分中奖新闻 重庆时时开奖号码 3d最近500期 今日竞彩比分推荐 街机捕鱼提现 极速快3开奖 天天棋牌官方网站下载 时时彩玩法技巧之稳赚 广西快乐10分五星走势 福彩快三能玩吗 时时彩双面盘势页面 排列五官网 捷报比分手机版下载