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