div+css实现太极阴阳八卦图旋转动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现太极阴阳八卦图旋转动画效果代码
代码标签: div css 太极 阴阳 八卦 图 旋转 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @keyframes spin { 100% { transform: rotate(-1turn); } } * { box-sizing: border-box; } body { margin: 0; background: linear-gradient(to top, #000 40%, #505050 150%); } .body-container { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; } .circle { height: 400px; width: 400px; background: #000; border-radius: 50%; margin: auto; position: relative; transition: transform 1.5s ease-out; box-shadow: 0 5px 10px 1px rgba(0, 0, 0, 0.8); animation: spin 3s linear infinite; } .circle-half { width: 200px; height: 400px; background: #fff; position: absolute; right: 0; border-radius: 0 200px 200px 0; } .white { height: 200px; width: 200px; background: #fff; border-radius: 50%; position: absolute; left: 100px; box-shadow: inset 1px -3px 10px 1px rgba(0, 0, 0, 0.5); /* overflow: hidden; */ } .white-inner { width: 100%; height: 100%; border-radius: 50% 45% 0 50%; background: linear-gradient(-90deg, #fff 50%, transparent 80%); } .........完整代码请登录后点击上方下载按钮下载查看
网友评论0