洛丽糖
洛丽糖（luolt.cn），致力于互联网资源的共享， 分享各类技术教程，typecho主题模板，zblog主题模板，网站源码等各种资源。
avatar
1282 文章 1477 评论 4 分类 8 页面
一个新拟态css生成器源码
寻梦xunm| 19| 网络收集
7小时前

演示截图什么的自己复制代码运行一下就知道了，保证你吃不了亏，上不了当。网页采用自适应。Screenshot_2025_1103_180010.jpg

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新拟态 CSS 生成器</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Roboto, sans-serif;
        }
        body {
            background: #e0e5ec;
            min-height: 100vh;
            padding: 2rem 1rem;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2rem;
        }
        @media (max-width: 768px) {
            .container {
                grid-template-columns: 1fr;
            }
        }
        .card {
            background: #e0e5ec;
            border-radius: 16px;
            padding: 2rem;
            box-shadow: 
                8px 8px 16px #c8ccd4,
                -8px -8px 16px #ffffff;
        }
        h1 {
            text-align: center;
            color: #4a6fa5;
            margin-bottom: 2rem;
            font-size: 2rem;
        }
        .preview-title {
            color: #555;
            margin-bottom: 1.5rem;
            font-size: 1.2rem;
        }
        .preview-box {
            width: 100%;
            height: 200px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 12px;
            margin-bottom: 1.5rem;
            transition: all 0.3s ease;
            /* 初始新拟态样式 */
            background: #e0e5ec;
            box-shadow: 
                8px 8px 16px #c8ccd4,
                -8px -8px 16px #ffffff;
        }
        .preview-text {
            color: #4a6fa5;
            font-size: 1.1rem;
        }
        .control-group {
            margin-bottom: 1.5rem;
        }
        label {
            display: block;
            margin-bottom: 0.5rem;
            color: #666;
            font-weight: 500;
        }
        input[type="range"] {
            width: 100%;
            height: 8px;
            -webkit-appearance: none;
            appearance: none;
            background: #e0e5ec;
            border-radius: 4px;
            box-shadow: inset 3px 3px 6px #c8ccd4, inset -3px -3px 6px #ffffff;
            outline: none;
        }
        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #e0e5ec;
            box-shadow: 3px 3px 6px #c8ccd4, -3px -3px 6px #ffffff;
            cursor: pointer;
            transition: all 0.2s;
        }
        input[type="range"]::-webkit-slider-thumb:hover {
            box-shadow: 4px 4px 8px #c8ccd4, -4px -4px 8px #ffffff;
            transform: scale(1.1);
        }
        .color-group {
            display: flex;
            gap: 1rem;
            margin-top: 0.5rem;
        }
        input[type="color"] {
            width: 50px;
            height: 50px;
            border: none;
            border-radius: 8px;
            background: transparent;
            cursor: pointer;
            box-shadow: 3px 3px 6px #c8ccd4, -3px -3px 6px #ffffff;
        }
        input[type="color"]::-webkit-color-swatch-wrapper {
            padding: 0;
        }
        input[type="color"]::-webkit-color-swatch {
            border: none;
            border-radius: 4px;
        }
        .btn-group {
            display: flex;
            gap: 1rem;
            margin-top: 0.5rem;
        }
        .btn {
            flex: 1;
            padding: 0.8rem 1.5rem;
            background: #e0e5ec;
            border: none;
            border-radius: 8px;
            color: #4a6fa5;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 4px 4px 8px #c8ccd4, -4px -4px 8px #ffffff;
        }
        .btn:hover {
            box-shadow: 6px 6px 12px #c8ccd4, -6px -6px 12px #ffffff;
        }
        .btn:active {
            box-shadow: inset 3px 3px 6px #c8ccd4, inset -3px -3px 6px #ffffff;
        }
        .btn-reset {
            color: #e74c3c;
        }
        .code-box {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 1.5rem;
            margin-top: 1rem;
            position: relative;
            overflow-x: auto;
        }
        pre {
            font-family: 'Fira Code', monospace;
            font-size: 0.9rem;
            color: #333;
            line-height: 1.6;
        }
        .copy-tip {
            position: absolute;
            top: 1rem;
            right: 1rem;
            color: #666;
            font-size: 0.8rem;
            opacity: 0;
            transition: opacity 0.3s;
        }
        .copy-tip.show {
            opacity: 1;
        }
        .switch-group {
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        .switch {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 24px;
        }
        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: #e0e5ec;
            border-radius: 24px;
            box-shadow: inset 2px 2px 4px #c8ccd4, inset -2px -2px 4px #ffffff;
            transition: .4s;
        }
        .slider:before {
            position: absolute;
            content: "";
            height: 18px;
            width: 18px;
            left: 3px;
            bottom: 3px;
            background: white;
            border-radius: 50%;
            box-shadow: 1px 1px 3px #c8ccd4;
            transition: .4s;
        }
        input:checked + .slider {
            background: #4a6fa5;
        }
        input:checked + .slider:before {
            transform: translateX(26px);
        }
    </style>
</head>
<body>
    <h1>✨ 新拟态 CSS 生成器</h1>
    <div class="container">
        <!-- 左侧：参数控制区 -->
        <div class="card">
            <h2 class="preview-title">参数调节</h2>
            
            <!-- 阴影强度控制 -->
            <div class="control-group">
                <label for="shadow-strength">阴影强度: <span id="shadow-strength-value">8</span>px</label>
                <input type="range" id="shadow-strength" min="2" max="20" value="8">
            </div>

            <!-- 圆角控制 -->
            <div class="control-group">
                <label for="border-radius">圆角大小: <span id="border-radius-value">12</span>px</label>
                <input type="range" id="border-radius" min="0" max="30" value="12">
            </div>

            <!-- 颜色控制 -->
            <div class="control-group">
                <label>颜色配置</label>
                <div class="color-group">
                    <input type="color" id="bg-color" value="#e0e5ec">
                    <input type="color" id="shadow-dark" value="#c8ccd4">
                    <input type="color" id="shadow-light" value="#ffffff">
                </div>
            </div>

            <!-- 按压效果切换 -->
            <div class="control-group">
                <label class="switch-group">
                    按压效果
                    <label class="switch">
                        <input type="checkbox" id="press-effect">
                        <span class="slider"></span>
                    </label>
                </label>
            </div>

            <!-- 按钮组（复制+重置） -->
            <div class="btn-group">
                <button class="btn" id="copy-btn">复制 CSS 代码</button>
                <button class="btn btn-reset" id="reset-btn">重置默认值</button>
            </div>
            <div class="copy-tip" id="copy-tip">复制成功！</div>
        </div>

        <!-- 右侧：预览和代码区 -->
        <div class="card">
            <h2 class="preview-title">效果预览</h2>
            <div class="preview-box" id="preview-box">
                <span class="preview-text">新拟态效果</span>
            </div>

            <h2 class="preview-title">生成的 CSS 代码</h2>
            <div class="code-box">
                <pre id="css-code">
.neumorphic {
    background: #e0e5ec;
    border-radius: 12px;
    box-shadow: 
        8px 8px 16px #c8ccd4,
        -8px -8px 16px #ffffff;
}</pre>
            </div>
        </div>
    </div>

    <script>
        // 获取DOM元素
        const previewBox = document.getElementById('preview-box');
        const shadowStrength = document.getElementById('shadow-strength');
        const shadowStrengthValue = document.getElementById('shadow-strength-value');
        const borderRadius = document.getElementById('border-radius');
        const borderRadiusValue = document.getElementById('border-radius-value');
        const bgColor = document.getElementById('bg-color');
        const shadowDark = document.getElementById('shadow-dark');
        const shadowLight = document.getElementById('shadow-light');
        const pressEffect = document.getElementById('press-effect');
        const cssCode = document.getElementById('css-code');
        const copyBtn = document.getElementById('copy-btn');
        const resetBtn = document.getElementById('reset-btn');
        const copyTip = document.getElementById('copy-tip');

        // 默认参数配置
        const defaultConfig = {
            shadowStrength: 8,
            borderRadius: 12,
            bgColor: '#e0e5ec',
            shadowDark: '#c8ccd4',
            shadowLight: '#ffffff',
            pressEffect: false
        };

        // 更新预览和代码
        function updateNeumorphism() {
            const strength = shadowStrength.value;
            const radius = borderRadius.value;
            const bg = bgColor.value;
            const dark = shadowDark.value;
            const light = shadowLight.value;
            const isPressed = pressEffect.checked;

            // 更新预览样式
            previewBox.style.background = bg;
            previewBox.style.borderRadius = `${radius}px`;
            
            if (isPressed) {
                // 按压效果（内阴影）
                previewBox.style.boxShadow = `inset ${strength}px ${strength}px ${strength * 2}px ${dark}, inset -${strength}px -${strength}px ${strength * 2}px ${light}`;
            } else {
                // 普通效果（外阴影）
                previewBox.style.boxShadow = `${strength}px ${strength}px ${strength * 2}px ${dark}, -${strength}px -${strength}px ${strength * 2}px ${light}`;
            }

            // 更新代码显示
            const code = `.neumorphic {
    background: ${bg};
    border-radius: ${radius}px;
    box-shadow: 
        ${isPressed ? 'inset ' : ''}${strength}px ${strength}px ${strength * 2}px ${dark},
        ${isPressed ? 'inset ' : ''}-${strength}px -${strength}px ${strength * 2}px ${light};
}`;
            cssCode.textContent = code;

            // 更新数值显示
            shadowStrengthValue.textContent = strength;
            borderRadiusValue.textContent = radius;
        }

        // 重置默认值
        function resetToDefault() {
            // 恢复参数值
            shadowStrength.value = defaultConfig.shadowStrength;
            borderRadius.value = defaultConfig.borderRadius;
            bgColor.value = defaultConfig.bgColor;
            shadowDark.value = defaultConfig.shadowDark;
            shadowLight.value = defaultConfig.shadowLight;
            pressEffect.checked = defaultConfig.pressEffect;

            // 同步更新预览和代码
            updateNeumorphism();

            // 显示重置提示（可选）
            copyTip.textContent = '已重置默认值！';
            copyTip.classList.add('show');
            setTimeout(() => copyTip.classList.remove('show'), 2000);
        }

        // 初始化
        updateNeumorphism();

        // 绑定事件监听
        shadowStrength.addEventListener('input', updateNeumorphism);
        borderRadius.addEventListener('input', updateNeumorphism);
        bgColor.addEventListener('input', updateNeumorphism);
        shadowDark.addEventListener('input', updateNeumorphism);
        shadowLight.addEventListener('input', updateNeumorphism);
        pressEffect.addEventListener('change', updateNeumorphism);

        // 复制代码功能
        copyBtn.addEventListener('click', () => {
            navigator.clipboard.writeText(cssCode.textContent).then(() => {
                copyTip.textContent = '复制成功！';
                copyTip.classList.add('show');
                setTimeout(() => copyTip.classList.remove('show'), 2000);
            });
        });

        // 重置默认值功能
        resetBtn.addEventListener('click', resetToDefault);
    </script>
</body>
</html>
none
本站相关资源来自互联网用户收集发布，仅供用于学习和交流。 如有侵权之处，请联系站长并出示相关证明以便删除，敬请谅解！
0 赞 or 打赏
喜欢就打赏一点
微信 支付宝
上一篇

仿Typecho中的Http请求过滤

下一篇

没有了

博主自己开发的微博客程序博主自己开发的微博客程序
仿Typecho中的Http请求过滤

仿Typecho中的Http请求过滤

74人气1天前
php仿typecho文件缓存类

php仿typecho文件缓存类

74人气1天前
微博客程序使用的垃圾HTTP类（给人都整麻了）

微博客程序使用的垃圾HTTP类（给人都整麻了）

106人气17天前
微博客程序核心框架更新了一坨大的

微博客程序核心框架更新了一坨大的

72人气17天前
网站后台老是登录上就掉线，重复登录

网站后台老是登录上就掉线，重复登录

73人气19天前
php依赖注入容器功能代码教程文档（AI创作）

php依赖注入容器功能代码教程文档（AI创作）

132人气23天前
站内搜索
暂无过往的评论消息
Q Q：1340326824
邮箱：vipshiyi@qq.com
QQ群：422720328
本站没得会员制度，所有资源都有白嫖的方法，且用且珍惜！ 本站相关资源来自互联网用户收集发布，仅供用于学习和交流。 如有侵权之处，请联系站长并出示相关证明以便删除，敬请谅解！

我的音乐