div+css实现太极八卦阴阳盘旋转动画效果代码

代码语言:html

所属分类:动画

代码描述:div+css实现太极八卦阴阳盘旋转动画效果代码

代码标签: div css 太极 八卦 阴阳盘 旋转 动画

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

<!DOCTYPE html>
<html lang="en" >
<head>
 
<meta charset="UTF-8">
<style>
    :root {
        --left-color:#084C61;
        --right-color:#DB3A34;
        --bg-color:#FFC857;
       
        --rotate-duration:5s;
}

body {
        margin:0;
        height:100vh;
        display:flex;
        justify-content:center;
        align-items:center;
        background:var(--bg-color);
}

#yinyang {
        display:table;
        font-size:0;
        animation-name:rotate;
        animation-duration:var(--rotate-duration);
        animation-iteration-count:infinite;
        animation-timing-function:ease;
        border-radius:100%;
        box-shadow:0px 0px 100px black;
}

@keyframes rotate {
        0% {transform:rotateZ(0);}
        50% {transform:rotateZ(180deg);}
        100% {transform:rotate.........完整代码请登录后点击上方下载按钮下载查看

网友评论0