Widget:龙文

<style> .circle-bg {

   position: relative;
   width: 700px;
   height:400px;
   margin: 0 auto;
   background-image: url(https://patchwiki.biligame.com/images/cassell/8/8c/7rwn2yrmoy5m2pispf7bge0v9l1rsi5.png);
   background-position: center;
   background-repeat: no-repeat;
   background-size: 120%;
   margin-top:220px;
   margin-bottom:200px
   }

.circle-container {

   position: relative;
   width: 345px;
   height: 345px;
   border-radius:50%;
   transform:rotate(12deg) translate(51%, -4%);
   

}

.circle-item {

   position: absolute;
   top: 50%;  /* 让所有部位以容器中心为基准 */
   left: 50%;
   transform-origin: 0 0; /* 从中心开始旋转 */
   transform: translate(-50%, -50%); /* 使每个部位居中 */

}

.circle-item img:not(.text-box-icon.star) {

   width: 72px; /* 图标大小，可调整 */
   height: 72px;
   border-radius: 50%;
   object-fit: cover;

}

.star img{ width:8px!important; height:auto!important; } .circle-item.longwen img:not(.text-box-icon.star) { width: 56px;

height: 56px;
overflow:visible

}

.dragon-frame {

   position: absolute;
   width: 100%; /* 使框架与图标的大小相同 */
   height: 100%;
   transform-origin: 50% 50%; /* 保证底框从中心旋转 */

}

.center-icon {

   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%); /* 确保中心图标在容器正中心 */

}

.center-icon img {

   width: 80px; /* 中心图标大小，可调整 */
   height: 80px;
   border-radius: 50%;

}

/* 文本框的整体样式 */ .text-box {

   position: absolute;
   padding: 5px 8px;
   background-color: rgba(0, 0, 0, 0.7); /* 半透明黑色背景 */
   color: #ffffff;
   width:240px;
   font-size: 12px;
   border-radius: 6px;
   box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* 轻微阴影效果 */

}

/* 根据每个龙文图标的方向来定位文本框 */ .text-box-1 { /* 1号龙文的文本框 */

   transform: translate(120px, -30px) rotate(-2deg); /* 向外偏移 */

} .text-box-2 { /* 2号龙文的文本框 */

   transform: translate(120px, 0px) rotate(-2deg);

} .text-box-3 { /* 3号龙文的文本框 */

   transform: translate(-340px, -10px) rotate(-5deg);

} .text-box-4 { /* 4号龙文的文本框 */

   transform: translate(-330px, -120px);

} .text-box-5 { /* 光龙文的文本框 */

   transform: translate(-360px, -180px) rotate(1deg);

} .text-box-6 { /* 暗龙文的文本框 */

   transform: translate(120px, -80px) rotate(-1deg);

}

</style>