查看: 5375|回复: 6

峭岐自提送银渐层

[复制链接]

世离

九品

Rank: 2 Rank: 2

UID: 1002591
积分: 300
经验: 164 点
金币: 1355 枚
注册时间: 2018-5-25
最后登录: 2026-3-20

发消息

电梯直达

1^#

发表于 2026-3-18 20:38 |只看该作者 |正序浏览来自：江苏省无锡市联通

1岁多公，免费送，猫贩子，滚蛋

来自安卓APP客户端

收藏0

回复/引用

使用道具举报

迷途羔羊

七品

Rank: 4

UID: 48043
积分: 2243
经验: 1580 点
金币: 6634 枚
注册时间: 2006-9-27
最后登录: 2026-5-7

发消息

7^#

发表于 2026-4-1 15:23 |只看该作者来自：江苏省无锡市电信

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自适应圆形图片旋转</title>
<style>
      /* 重置样式 */
      * {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
      }

      /* 页面基础样式 */
      body {
         width: 100vw;
         height: 100vh;
         background: linear-gradient(135deg, #141e30 0%, #243b55 100%);
         overflow: hidden;
         font-family: 'Arial', sans-serif;
      }

      /* 标题样式 */
      .title {
         position: fixed;
         top: 20px;
         left: 0;
         width: 100%;
         text-align: center;
         color: white;
         font-size: 2.2em;
         text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
         background: linear-gradient(45deg, #f093fb, #f5576c);
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
         background-clip: text;
         z-index: 1000;
         padding: 0 20px;
      }

      /* 屏幕信息显示 */
      .screen-info {
         position: fixed;
         top: 10px;
         right: 10px;
         background: rgba(0, 0, 0, 0.7);
         color: white;
         padding: 8px 12px;
         border-radius: 6px;
         font-size: 12px;
         font-family: monospace;
         z-index: 1000;
         border: 1px solid rgba(255, 255, 255, 0.2);
      }

      /* 布局信息显示 */
      .layout-info {
         position: fixed;
         bottom: 20px;
         left: 0;
         width: 100%;
         text-align: center;
         color: rgba(255, 255, 255, 0.8);
         font-size: 1.1em;
         z-index: 1000;
         padding: 0 20px;
      }

      /* 竖屏样式 */
      @Media (orientation: portrait) {
         .image-container {
            /* 直径 = 屏幕宽度的5分之4 */
            width: 80vw;
            height: 80vw;
            /* 从上方起往下7分之3的正中位置 */
            top: calc(100vh * 3 / 7);
            left: 50%;
            transform: translate(-50%, -50%);
         }

         .mode-indicator {
            color: #4ecdc4;
         }
      }

      /* 横屏样式 */
      @media (orientation: landscape) {
         .image-container {
            /* 直径 = 屏幕高度的一半 */
            width: 50vh;
            height: 50vh;
            /* 左半边的正中间 */
            top: 50%;
            left: 25%;
            transform: translate(-50%, -50%);
         }

         .mode-indicator {
            color: #ff6b6b;
         }
      }

      /* 图片容器 - 基础样式 */
      .image-container {
         position: absolute;
         border-radius: 50%;
         overflow: hidden;
         box-shadow: 0 0 40px rgba(240, 147, 251, 0.7),
                     0 0 60px rgba(245, 87, 108, 0.5),
                     0 0 100px rgba(0, 0, 0, 0.3);
      }

      /* 图片样式 */
      .rotating-image {
         width: 100%;
         height: 100%;
         object-fit: cover;
         animation: rotate 12s linear infinite;
      }

      /* 旋转动画 */
      @keyframes rotate {
         from {
            transform: rotate(0deg);
         }
         to {
            transform: rotate(360deg);
         }
      }

      /* 圆形遮罩 - 确保图片显示为圆形 */
      .circle-mask {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         border-radius: 50%;
         overflow: hidden;
      }

      /* 发光效果 */
      .glow {
         position: absolute;
         top: -20px;
         left: -20px;
         right: -20px;
         bottom: -20px;
         border-radius: 50%;
         background: radial-gradient(circle,
            rgba(240, 147, 251, 0.2) 0%,
            rgba(245, 87, 108, 0.1) 40%,
            transparent 70%);
         filter: blur(20px);
         animation: glowPulse 4s ease-in-out infinite;
      }

      /* 发光脉动动画 */
      @keyframes glowPulse {
         0%, 100% {
            opacity: 0.3;
            transform: scale(1);
         }
         50% {
            opacity: 0.6;
            transform: scale(1.05);
         }
      }

      /* 圆形边框 */
      .circle-border {
         position: absolute;
         top: -8px;
         left: -8px;
         right: -8px;
         bottom: -8px;
         border: 4px solid transparent;
         border-radius: 50%;
         background: linear-gradient(45deg,
            #f093fb,
            #f5576c,
            #4ecdc4,
            #ff6b6b) border-box;
         -webkit-mask: linear-gradient(#fff 0 0) padding-box,
                        linear-gradient(#fff 0 0);
         -webkit-mask-composite: xor;
         mask-composite: exclude;
         animation: borderRotate 8s linear infinite;
      }

      /* 边框旋转动画 */
      @keyframes borderRotate {
         from {
            transform: rotate(0deg);
         }
         to {
            transform: rotate(-360deg);
         }
      }

      /* 圆形验证器 - 确保为完美圆形 */
      .circle-validator {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         border-radius: 50%;
         border: 1px solid transparent;
      }

      /* 响应式调整 */
      @media (max-width: 768px) {
         .title {
            font-size: 1.8em;
         }
      }

      @media (max-width: 480px) {
         .title {
            font-size: 1.5em;
         }

         .layout-info {
            font-size: 0.9em;
         }
      }
</style>
</head>
<body>
<h1 class="title">自适应圆形图片旋转</h1>
<div class="screen-info" id="screenInfo">加载中...</div>

<div class="image-container" id="imageContainer">
      <div class="glow"></div>
      <div class="circle-mask">
         
         <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=800&h=800&fit=crop&crop=center"
               alt="旋转的圆形图片"
               class="rotating-image"
               id="rotatingImage">
      </div>
      <div class="circle-border"></div>
      <div class="circle-validator"></div>
</div>

<div class="layout-info" id="layoutInfo">初始化布局中...</div>

<script>
      (function() {
         'use strict';

         const imageContainer = document.getElementById('imageContainer');
         const rotatingImage = document.getElementById('rotatingImage');
         const screenInfo = document.getElementById('screenInfo');
         const layoutInfo = document.getElementById('layoutInfo');

         // 备用图片（SVG格式，确保始终有图片显示）
         const fallbackImage = 'data:image/svg+xml,' + encodeURIComponent(`
            <svg xmlns="http://www.w3.org/2000/svg" width="800" height="800" viewBox="0 0 800 800">
                  <defs>
                     <radialGradient id="grad1" cx="30%" cy="30%">
                        <stop offset="0%" style="stop-color:#f093fb;stop-opacity:1" />
                        <stop offset="50%" style="stop-color:#f5576c;stop-opacity:1" />
                        <stop offset="100%" style="stop-color:#4ecdc4;stop-opacity:1" />
                     </radialGradient>
                  </defs>
                  <circle cx="400" cy="400" r="350" fill="url(#grad1)"/>
                  <circle cx="400" cy="400" r="150" fill="white" opacity="0.2"/>
                  <text x="400" y="400" text-anchor="middle" dy=".3em" font-family="Arial" font-size="70" fill="white" font-weight="bold">圆形图片</text>
            </svg>
         `);

         // 更新布局信息显示
         function updateLayoutInfo() {
            const width = window.innerWidth;
            const height = window.innerHeight;
            const orientation = width > height ? '横屏' : '竖屏';
            const containerRect = imageContainer.getBoundingClientRect();
            const containerWidth = Math.round(containerRect.width);
            const containerHeight = Math.round(containerRect.height);

            // 更新屏幕信息
            screenInfo.textContent = `${width}×${height} (${orientation})`;

            // 更新布局信息
            let infoText = '';
            if (orientation === '横屏') {
                  infoText = `横屏模式: 直径${containerWidth}px (屏幕高度${height}px的一半)，位置: 左半边正中间`;
            } else {
                  infoText = `竖屏模式: 直径${containerWidth}px (屏幕宽度${width}px的5分之4)，位置: 从上往下3/7处正中间`;
            }

            layoutInfo.textContent = infoText;
         }

         // 验证并强制保持完美圆形
         function validateAndForceCircle() {
            const computedStyle = window.getComputedStyle(imageContainer);
            const currentWidth = parseFloat(computedStyle.width);
            const currentHeight = parseFloat(computedStyle.height);

            // 验证是否为正方形（圆形的基础）
            if (Math.abs(currentWidth - currentHeight) > 1) {
                  const newSize = Math.min(currentWidth, currentHeight);
                  imageContainer.style.width = `${newSize}px`;
                  imageContainer.style.height = `${newSize}px`;
            }

            // 获取实际渲染后的尺寸
            const rect = imageContainer.getBoundingClientRect();
            const actualWidth = rect.width;
            const actualHeight = rect.height;

            // 如果实际尺寸不相等，强制调整
            if (Math.abs(actualWidth - actualHeight) > 1) {
                  const finalSize = Math.min(actualWidth, actualHeight);
                  imageContainer.style.width = `${finalSize}px`;
                  imageContainer.style.height = `${finalSize}px`;
            }

            // 验证border-radius是否为50%
            const borderRadius = computedStyle.borderRadius;
            if (borderRadius !== '50%') {
                  imageContainer.style.borderRadius = '50%';
            }
         }

         // 图片加载处理
         rotatingImage.onload = function() {
            // 确保图片完全覆盖圆形区域
            rotatingImage.style.objectFit = 'cover';

            // 更新布局信息
            updateLayoutInfo();

            // 验证并强制保持圆形
            validateAndForceCircle();
         };

         rotatingImage.onerror = function() {
            // 图片加载失败时使用备用图片
            rotatingImage.src = fallbackImage;
         };

         // 窗口大小变化处理
         function handleResize() {
            updateLayoutInfo();
            validateAndForceCircle();
         }

         // 屏幕方向变化处理
         function handleOrientationChange() {
            // 延迟执行以确保方向变化完成
            setTimeout(function() {
                  updateLayoutInfo();
                  validateAndForceCircle();
            }, 100);
         }

         // 页面加载完成处理
         function handleLoad() {
            setTimeout(function() {
                  updateLayoutInfo();
                  validateAndForceCircle();
            }, 500);
         }

         // 添加事件监听
         window.addEventListener('resize', handleResize);
         window.addEventListener('orientationchange', handleOrientationChange);
         window.addEventListener('load', handleLoad);

         // 初始执行
         updateLayoutInfo();
         validateAndForceCircle();

         // 定期验证圆形状态
         setInterval(validateAndForceCircle, 2000);

         // 添加键盘快捷键（R键重置动画）
         document.addEventListener('keydown', function(e) {
            if (e.key === 'r' || e.key === 'R') {
                  // 重置旋转动画
                  rotatingImage.style.animation = 'none';
                  void rotatingImage.offsetWidth; // 触发重绘
                  rotatingImage.style.animation = 'rotate 12s linear infinite';
            }
         });

      })();
</script>
</body>
</html>