欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 健康 > 美食 > 做一个有天有地的css及html画的旋转阴阳鱼

做一个有天有地的css及html画的旋转阴阳鱼

2025/3/31 8:27:12 来源:https://blog.csdn.net/hzether/article/details/146458536  浏览:    关键词:做一个有天有地的css及html画的旋转阴阳鱼

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>天地阴阳</title><style>/* 重置默认样式 */* {padding: 0;margin: 0;box-sizing: border-box;}/* 基础布局 */html, body {height: 100%;}.container {height: 100%;display: flex;flex-direction: column;position: relative;}/* 天地背景 */.sky {flex: 1;background: linear-gradient(to bottom, #87CEEB, #E0F6FF);}.earth {height: 50%;background: linear-gradient(to bottom, #90EE90, #228B22);}/* 八卦图主容器 */.box {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);width: 300px;height: 300px;border-radius: 50%;box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);animation: rotate 8s linear infinite;transform-origin: center center;backdrop-filter: blur(5px);/* 移除重复的样式定义和背景色 */}/* 阴阳鱼左右半圆 */.semi-circle {position: absolute;height: 100%;width: 50%;}.left {left: 0;background: #000;border-radius: 150px 0 0 150px;width: 50%;}.right {right: 0;background: #fff;border-radius: 0 150px 150px 0;width: 50%;}/* 在box容器中添加背景色 */.box {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);width: 300px;height: 300px;border-radius: 50%;box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);animation: rotate 8s linear infinite;transform-origin: center center;backdrop-filter: blur(5px);background: rgba(255, 255, 255, 0.8);  /* 添加背景色 */}/* 阴阳鱼大圆 */.circle {position: absolute;left: 25%;width: 50%;height: 50%;border-radius: 50%;display: flex;align-items: center;justify-content: center;}.top-circle {top: 0;background: #000;  /* 改为纯黑色 */}.bottom-circle {bottom: 0;background: #fff;  /* 改为纯白色 */}/* 阴阳眼 */.small-circle {width: 30px;height: 30px;border-radius: 50%;}.white { background: #fff; }  /* 改为纯白色 */.black { background: #000; }  /* 改为纯黑色 *//* 旋转动画 */@keyframes rotate {from { transform: translate(-50%, -50%) rotate(0deg); }to { transform: translate(-50%, -50%) rotate(360deg); }}/* 悬停效果 */.box:hover {animation-play-state: paused;box-shadow: 0 0 40px rgba(0, 0, 0, 0.4);}</style>
</head>
<body><div class="container"><div class="sky"></div><div class="earth"></div><div class="box"><div class="semi-circle left"></div><div class="semi-circle right"></div><div class="circle top-circle"><span class="small-circle white"></span></div><div class="circle bottom-circle"><span class="small-circle black"></span></div></div></div>
</body>
</html>

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词