暨阳社区

标题: 峭岐自提送银渐层 [打印本页]
作者: 世离    时间: 2026-3-18 20:38
标题: 峭岐自提送银渐层
1岁多公，免费送，猫贩子，滚蛋
[video=https://magpic.jysq.net/pic/20260318/1773837465990604_613.jpg]https://magpic.jysq.net/video/20260318/1773837463740530_426.mp4[/video]
作者: 在路上吗    时间: 2026-3-18 23:47
猫多大了？疫苗打了吗？
作者: 世离    时间: 2026-3-19 18:01
封贴
作者: 废柴男生    时间: 2026-3-21 09:29
来晚了
作者: 阿拉斯加131    时间: 2026-3-21 17:00
废柴男生 发表于 2026-03-21 09:29
来晚了

我家有只金点要不要
作者: 丫头小小    时间: 2026-4-1 15:04
阿拉斯加131 发表于 2026-03-21 17:00
我家有只金点要不要

有偿还是无偿
作者: 迷途羔羊    时间: 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">
            <!-- 可以替换为您自己的图片URL -->
            <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>



欢迎光临 暨阳社区 (https://bbs.jysq.net/) 暨阳社区 - 江阴论坛 - 网络改变江阴
（打印:@2026-5-8 09:36）