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:"".........完整代码请登录后点击上方下载按钮下载查看