基于HTML5+css3技术实现一个八卦阵.zip资源-CSDN文库

共3个文件

png：2个

html：1个

版权申诉

html5

网页

167 浏览量 2024-02-13 22:55:00 上传评论收藏 98KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

基于HTML5 + css3 技术实现一个八卦阵.zip （3个子文件）

hyy-baguaArray-master

index.html 4KB

八卦阵.png 55KB

QQ截图20200601185840.png 55KB

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>太极拳</title> <style> body { background-color: #eee; } * { margin: 0px; padding: 0px; box-sizing: border-box; } @keyframes x { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } #八卦 { width: 400px; height: 400px; border-radius: 50%; position: relative; overflow: hidden; animation: x 10s infinite linear; /*每10s执行一次x动画，无限执行，线性执行*/ box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.75); } @media(max-width: 500px) { #八卦 { width: 200px; height: 200px; } } #black { border: 10px solid black; width: 50%; height: 100%; position: absolute; left: 0px; background-color: black; } @media(max-width: 500px) {} #white { border: 10px solid white; width: 50%; height: 100%; position: absolute; right: 0px; background-color: white; } #black-left { position: absolute; width: 200px; height: 200px; left: 50%; margin-left: -100px; border-radius: 50%; background-color: black; } @media(max-width: 500px) { #black-left { width: 100px; height: 100px; margin-left: -50px; } } #white-right { position: absolute; width: 200px; height: 200px; left: 50%; bottom: 0; margin-left: -100px; border-radius: 50%; background-color: white; } @media(max-width: 500px) { #white-right { width: 100px; height: 100px; margin-left: -50px; } } #white-rot { position: absolute; width: 50px; height: 50px; top: 75px; left: 50%; margin-left: -25px; border-radius: 50%; background-color: white; } @media(max-width: 500px) { #white-rot { width: 25px; height: 25px; top: 37.5px; margin-left: -12.5px; } } #black-rot { position: absolute; width: 50px; height: 50px; bottom: 75px; left: 50%; margin-left: -25px; border-radius: 50%; background-color: black; } @media(max-width: 500px) { #black-rot { width: 25px; height: 25px; bottom: 37.5px; margin-left: -12.5px; } } #八卦-warpper { height: 100vh; /* viewpoint height 用户的可视范围*/ display: flex; justify-content: center; align-items: center; flex-direction: column; } #文字 { margin-top: 1em; } </style> </head> <body> <div id="八卦-warpper"> <div id="八卦"> <div id="black"></div> <div id="white"></div> <div id="black-left"></div> <div id="white-right"></div> <div id="white-rot"></div> <div id="black-rot"></div> </div> <div id="文字"> 道可道，非常道 </div> </div> </body> </html>

评论收藏

内容反馈

版权申诉