css实现立体交互式罗盘转盘效果代码-html代码-BFW代码库

css实现立体交互式罗盘转盘效果代码

代码语言：html

所属分类：三维

代码描述：css实现立体交互式罗盘转盘效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<style>
 html{height:100%}body{background:#222;background:linear-gradient(#222,#4e6e79);overflow:hidden}.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}i{height:15px;width:1px;background:#98bdcd;position:absolute;left:50%;margin-left:-10px;transform-origin:1000% 1005%}i:nth-child(1){transform:rotate(-5deg)}i:nth-child(2){transform:rotate(5deg)}i:nth-child(3){transform:rotate(15deg)}i:nth-child(4){transform:rotate(25deg)}i:nth-child(5){transform:rotate(35deg)}i:nth-child(6){transform:rotate(45deg)}i:nth-child(7){transform:rotate(55deg)}i:nth-child(8){transform:rotate(65deg)}i:nth-child(9){transform:rotate(75deg)}i:nth-child(10){transform:rotate(85deg)}i:nth-child(11){transform:rotate(95deg)}i:nth-child(12){transform.........完整代码请登录后点击上方下载按钮下载查看