css实现三维鼠标可交互旋转时钟刻度效果代码-html代码-BFW代码库

css实现三维鼠标可交互旋转时钟刻度效果代码

代码语言：html

所属分类：三维

代码描述：css实现三维鼠标可交互旋转时钟刻度效果代码，鼠标放上去可改变视角。

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />

     <style>
             .c {
	width:240px;
	height:240px;
	border:3px solid #98bdcd;
	border-radius:50%;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate3d(-50%,-50%,-50px);
}
.c:after {
	content:"";
	position:absolute;
	left:-10px;
	top:-10px;
	width:100%;
	height:100%;
	border-radius:50%;
	border:10px solid #98bdcd;
	border-top-color:transparent;
	border-bottom-color:transparent;
	animation:R 10s infinite linear;
}
.c2 {
	width:100%;
	height:100%;
	border:1px solid #7a929c;
	border-radius:50%;
	position:absolute;
	top:0;
	left:0;
	padding:1px;
	animation:L 80s infinite linear;
	box-sizing:border-box;
}
.c3 {
	width:33%;
	height:33%;
	border:2px solid #a05d55;
	border-radius:50%;
	transform:translate3d(-50%,-50%,5px);
	position:absolute;
	top:50%;
	left:50%;
}
.c3:after {
	content:"";
	position:absolute;
	left:-5px;
	top:-5px;
	width:100%;
	height:100%;
	border-radius:50%;
	border:5px solid #a05d55;
	border-top-color:transparent;
	border-bottom-color:transparent;
	animation:L 5s infinite linear;
}
.c4 {
	width:75px;
	height:75px;
	transform:translate3d(-50%,-50%,0px);
	position:absolute;
	left:50%;
	top:50%;
}
.c4:after {
	content:"";
	width:100%;
	height:100%;
	position:absolute;
	left:-3px;
	top:-3px;
	border-radius:50%;
	border:3px solid #98bdcd;
	border-left-color:transparent;
	animation:R 5s infinite linear;
}
.c5 {
	width:77px;
	height:77px;
	transform:translate3d(-50%,-50%,65px);
	position:absolute;
	left:50%;
	top:50%;
	border-radius:50%;
}
.c5:after {
	content:"";
	width:100%;
	height:100%;
	position:absolute;
	left:-1px;
	top:-1px;
	border:1px solid #7a929c;
	border-right-color:transparent;
	border-bottom-color:transparent;
	border-radius:50%;
	animation:L 5s infinite linear;
}
.c6 {
	width:55px;
	height:55px;
	transform:translate3d(-50%,-50%,61px);
	position:absolute;
	left:50%;
	top:50%;
	border-radius:50%;
}
.c6:after {
	content:"";
	width:100%;
	height:100%;
	position:absolute;
	left:-1px;
	top:-1px;
	border:1px solid #7a929c;
	border-right-color:transparent;
	border-top-color:transparent;
	border-radius:50%;
	animation:R 10s infinite linear;
}
     figure i {
	height:15px;
	width:1px;
	background:#98bdcd;
	position:absolute;
	left:50%;
	margin-left:-10px;
	transform-origin:1000% 1005%;
}
figure i:nth-child(1) {
	transform:rotate(-5deg);
}
figure i:nth-child(2) {
	transform:rotate(5deg);
}
figure i:nth-child(3) {
	transform:rotate(15deg);
}
figure i:nth-child(4) {
	transform:rotate(25deg);
}
figure i:nth-child(5) {
	transform:rotate(35deg);
}
figure i:nth-child(6) {
	transform:rotate(45deg);
}
figure i:nth-child(7) {
	transform:rotate(55deg);
}
figure i:nth-child(8) {
	transform:rotate(65deg);
}
figure i:nth-child(9) {
	transform:rotate(75deg);
}
figure i:nth-child(10) {
	transform:rotate(85deg);
}
figure i:nth-child(11) {
	transform:rotate(95deg);
}
figure i:nth-child(12) {
	transform:rotate(105deg);
}
figure i:nth-child(13) {
	transfo.........完整代码请登录后点击上方下载按钮下载查看