375 lines
19 KiB
HTML
375 lines
19 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>bg-pattern-3 展示页面</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
|
|
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: '#3B82F6',
|
|
secondary: '#8B5CF6',
|
|
dark: '#1E293B',
|
|
light: '#F8FAFC'
|
|
},
|
|
fontFamily: {
|
|
sans: ['Inter', 'system-ui', 'sans-serif'],
|
|
},
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style type="text/tailwindcss">
|
|
@layer utilities {
|
|
.bg-pattern-3 {
|
|
background-image: conic-gradient(
|
|
from 0deg,
|
|
rgba(255, 255, 255, 0.1),
|
|
transparent 30%,
|
|
rgba(255, 255, 255, 0.1)
|
|
);
|
|
}
|
|
.content-auto {
|
|
content-visibility: auto;
|
|
}
|
|
.pattern-container {
|
|
@apply relative overflow-hidden transition-all duration-500 ease-in-out;
|
|
}
|
|
.pattern-card {
|
|
@apply rounded-xl shadow-lg p-6 transition-all duration-300 hover:shadow-xl;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-900 text-light font-sans min-h-screen">
|
|
<!-- 导航栏 -->
|
|
<nav class="bg-dark/80 backdrop-blur-md sticky top-0 z-50 border-b border-gray-800">
|
|
<div class="container mx-auto px-4 py-4 flex justify-between items-center">
|
|
<div class="flex items-center space-x-2">
|
|
<i class="fa fa-paint-brush text-primary text-2xl"></i>
|
|
<h1 class="text-xl font-bold">Pattern Viewer</h1>
|
|
</div>
|
|
<div class="hidden md:flex space-x-6">
|
|
<a href="#overview" class="hover:text-primary transition-colors">概览</a>
|
|
<a href="#examples" class="hover:text-primary transition-colors">示例</a>
|
|
<a href="#code" class="hover:text-primary transition-colors">代码</a>
|
|
</div>
|
|
<button class="md:hidden text-2xl">
|
|
<i class="fa fa-bars"></i>
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- 主内容区 -->
|
|
<main class="container mx-auto px-4 py-12">
|
|
<!-- 概览部分 -->
|
|
<section id="overview" class="mb-20">
|
|
<div class="text-center max-w-3xl mx-auto mb-12">
|
|
<h2 class="text-[clamp(2rem,5vw,3.5rem)] font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-primary to-secondary">
|
|
.bg-pattern-3
|
|
</h2>
|
|
<p class="text-gray-400 text-lg">
|
|
这个样式使用圆锥渐变(conic-gradient)创建了一个精致的放射状图案，非常适合作为背景元素增添视觉层次感。
|
|
</p>
|
|
</div>
|
|
|
|
<!-- 主展示区 -->
|
|
<div class="pattern-container bg-primary/20 bg-pattern-3 rounded-2xl h-80 md:h-96 flex items-center justify-center">
|
|
<div class="text-center p-6 bg-dark/50 backdrop-blur-sm rounded-xl max-w-md">
|
|
<h3 class="text-2xl font-semibold mb-4">圆锥渐变背景</h3>
|
|
<p class="text-gray-300">
|
|
这个背景使用了conic-gradient函数，从0度开始创建渐变效果，形成了独特的放射状图案。
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 示例部分 -->
|
|
<section id="examples" class="mb-20">
|
|
<h2 class="text-3xl font-bold mb-10 text-center">应用示例</h2>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
<!-- 示例1：深色背景 -->
|
|
<div class="pattern-card bg-dark pattern-container bg-pattern-3">
|
|
<div class="flex items-center mb-4">
|
|
<div class="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center mr-3">
|
|
<i class="fa fa-moon-o text-primary"></i>
|
|
</div>
|
|
<h3 class="text-xl font-semibold">深色主题</h3>
|
|
</div>
|
|
<p class="text-gray-400">
|
|
在深色背景上，这个图案创造出微妙的光线效果，增添深度而不显得突兀。
|
|
</p>
|
|
</div>
|
|
|
|
<!-- 示例2：紫色背景 -->
|
|
<div class="pattern-card bg-secondary/20 pattern-container bg-pattern-3">
|
|
<div class="flex items-center mb-4">
|
|
<div class="w-10 h-10 rounded-full bg-secondary/30 flex items-center justify-center mr-3">
|
|
<i class="fa fa-purple text-secondary"></i>
|
|
</div>
|
|
<h3 class="text-xl font-semibold">紫色基调</h3>
|
|
</div>
|
|
<p class="text-gray-300">
|
|
与紫色背景搭配，这个图案形成了和谐的色彩过渡，适合创意类网站。
|
|
</p>
|
|
</div>
|
|
|
|
<!-- 示例3：卡片元素 -->
|
|
<div class="pattern-card bg-dark/60 pattern-container bg-pattern-3">
|
|
<div class="flex items-center mb-4">
|
|
<div class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center mr-3">
|
|
<i class="fa fa-credit-card text-gray-300"></i>
|
|
</div>
|
|
<h3 class="text-xl font-semibold">卡片设计</h3>
|
|
</div>
|
|
<p class="text-gray-300">
|
|
作为卡片背景，这个图案能有效提升视觉吸引力，同时保持内容的可读性。
|
|
</p>
|
|
</div>
|
|
|
|
<!-- 示例4：按钮效果 -->
|
|
<div class="pattern-card bg-dark flex flex-col items-center justify-center p-8">
|
|
<h3 class="text-xl font-semibold mb-6">按钮应用</h3>
|
|
<button class="px-8 py-3 rounded-full bg-primary pattern-container bg-pattern-3 text-white font-medium hover:bg-primary/80 transition-all">
|
|
点击按钮
|
|
</button>
|
|
</div>
|
|
|
|
<!-- 示例5：圆形元素 -->
|
|
<div class="pattern-card bg-dark flex flex-col items-center justify-center p-8">
|
|
<h3 class="text-xl font-semibold mb-6">圆形元素</h3>
|
|
<div class="w-32 h-32 rounded-full bg-secondary pattern-container bg-pattern-3 flex items-center justify-center">
|
|
<i class="fa fa-circle-o text-4xl text-white/70"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 示例6：带内容的区域 -->
|
|
<div class="pattern-card bg-dark pattern-container bg-pattern-3">
|
|
<h3 class="text-xl font-semibold mb-4">内容区块</h3>
|
|
<div class="space-y-3">
|
|
<div class="h-2 bg-gray-700 rounded-full w-full"></div>
|
|
<div class="h-2 bg-gray-700 rounded-full w-3/4"></div>
|
|
<div class="h-2 bg-gray-700 rounded-full w-1/2"></div>
|
|
<div class="mt-6 grid grid-cols-2 gap-3">
|
|
<div class="h-8 bg-gray-700 rounded"></div>
|
|
<div class="h-8 bg-gray-700 rounded"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 代码部分 -->
|
|
<section id="code" class="mb-16">
|
|
<h2 class="text-3xl font-bold mb-10 text-center">代码实现</h2>
|
|
|
|
<div class="bg-dark rounded-xl p-6 shadow-xl max-w-3xl mx-auto">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div class="flex space-x-2">
|
|
<div class="w-3 h-3 rounded-full bg-red-500"></div>
|
|
<div class="w-3 h-3 rounded-full bg-yellow-500"></div>
|
|
<div class="w-3 h-3 rounded-full bg-green-500"></div>
|
|
</div>
|
|
<span class="text-gray-400 text-sm">CSS</span>
|
|
</div>
|
|
<pre class="text-gray-300 overflow-x-auto text-sm md:text-base"><code>.bg-pattern-3 {
|
|
background-image: conic-gradient(
|
|
from 0deg,
|
|
rgba(255, 255, 255, 0.1),
|
|
transparent 30%,
|
|
rgba(255, 255, 255, 0.1)
|
|
);
|
|
}</code></pre>
|
|
</div>
|
|
|
|
<div class="mt-8 bg-gray-800/50 rounded-xl p-6 max-w-3xl mx-auto">
|
|
<h3 class="text-xl font-semibold mb-4">代码解析</h3>
|
|
<ul class="space-y-3 text-gray-300">
|
|
<li class="flex items-start">
|
|
<i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
|
|
<span><code>conic-gradient</code> 创建一个圆锥渐变，颜色围绕一个中心点旋转</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
|
|
<span><code>from 0deg</code> 指定渐变从0度(右侧)开始</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
|
|
<span>第一个颜色点: <code>rgba(255, 255, 255, 0.1)</code> 是轻微透明的白色</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
|
|
<span>第二个颜色点: <code>transparent 30%</code> 在30%位置变为完全透明</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<i class="fa fa-check-circle text-primary mt-1 mr-3"></i>
|
|
<span>第三个颜色点: 回到轻微透明的白色，形成循环图案</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 交互演示 -->
|
|
<section class="mb-16">
|
|
<h2 class="text-3xl font-bold mb-10 text-center">交互演示</h2>
|
|
|
|
<div class="max-w-3xl mx-auto bg-dark rounded-xl overflow-hidden shadow-xl">
|
|
<div class="p-6 border-b border-gray-800">
|
|
<h3 class="text-xl font-semibold">调整参数</h3>
|
|
<p class="text-gray-400 mt-1">尝试修改以下参数，查看图案变化</p>
|
|
</div>
|
|
|
|
<div class="p-6">
|
|
<div class="space-y-6">
|
|
<div>
|
|
<label class="block text-gray-300 mb-2">起始角度 (0deg)</label>
|
|
<input type="range" min="0" max="360" value="0" class="w-full accent-primary" id="angleRange">
|
|
<div class="flex justify-between text-sm text-gray-500 mt-1">
|
|
<span>0deg</span>
|
|
<span id="angleValue">0deg</span>
|
|
<span>360deg</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-gray-300 mb-2">透明点位置 (30%)</label>
|
|
<input type="range" min="0" max="100" value="30" class="w-full accent-primary" id="transparentRange">
|
|
<div class="flex justify-between text-sm text-gray-500 mt-1">
|
|
<span>0%</span>
|
|
<span id="transparentValue">30%</span>
|
|
<span>100%</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-gray-300 mb-2">透明度 (0.1)</label>
|
|
<input type="range" min="0" max="1" step="0.05" value="0.1" class="w-full accent-primary" id="opacityRange">
|
|
<div class="flex justify-between text-sm text-gray-500 mt-1">
|
|
<span>0</span>
|
|
<span id="opacityValue">0.1</span>
|
|
<span>1</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-gray-300 mb-2">背景颜色</label>
|
|
<div class="grid grid-cols-5 gap-3 mt-2">
|
|
<div class="w-full aspect-square rounded-full bg-primary/20 cursor-pointer border-2 border-transparent hover:border-white transition-colors" data-color="bg-primary/20"></div>
|
|
<div class="w-full aspect-square rounded-full bg-secondary/20 cursor-pointer border-2 border-transparent hover:border-white transition-colors" data-color="bg-secondary/20"></div>
|
|
<div class="w-full aspect-square rounded-full bg-blue-900/50 cursor-pointer border-2 border-transparent hover:border-white transition-colors" data-color="bg-blue-900/50"></div>
|
|
<div class="w-full aspect-square rounded-full bg-gray-800 cursor-pointer border-2 border-transparent hover:border-white transition-colors" data-color="bg-gray-800"></div>
|
|
<div class="w-full aspect-square rounded-full bg-pink-900/30 cursor-pointer border-2 border-transparent hover:border-white transition-colors" data-color="bg-pink-900/30"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="previewContainer" class="mt-10 h-64 rounded-lg pattern-container bg-primary/20 bg-pattern-3 flex items-center justify-center">
|
|
<span class="text-white/80 font-medium">实时预览</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<!-- 页脚 -->
|
|
<footer class="bg-dark border-t border-gray-800 py-8">
|
|
<div class="container mx-auto px-4 text-center text-gray-400">
|
|
<p>© 2023 Pattern Viewer | 展示圆锥渐变背景效果</p>
|
|
<div class="flex justify-center space-x-4 mt-4">
|
|
<a href="#" class="hover:text-primary transition-colors"><i class="fa fa-github text-xl"></i></a>
|
|
<a href="#" class="hover:text-primary transition-colors"><i class="fa fa-twitter text-xl"></i></a>
|
|
<a href="#" class="hover:text-primary transition-colors"><i class="fa fa-codepen text-xl"></i></a>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// 获取DOM元素
|
|
const angleRange = document.getElementById('angleRange');
|
|
const angleValue = document.getElementById('angleValue');
|
|
const transparentRange = document.getElementById('transparentRange');
|
|
const transparentValue = document.getElementById('transparentValue');
|
|
const opacityRange = document.getElementById('opacityRange');
|
|
const opacityValue = document.getElementById('opacityValue');
|
|
const previewContainer = document.getElementById('previewContainer');
|
|
const colorOptions = document.querySelectorAll('[data-color]');
|
|
|
|
// 更新预览的函数
|
|
function updatePreview() {
|
|
const angle = angleRange.value;
|
|
const transparentPos = transparentRange.value;
|
|
const opacity = opacityRange.value;
|
|
|
|
// 更新显示的值
|
|
angleValue.textContent = `${angle}deg`;
|
|
transparentValue.textContent = `${transparentPos}%`;
|
|
opacityValue.textContent = opacity;
|
|
|
|
// 应用新的渐变
|
|
previewContainer.style.backgroundImage = `conic-gradient(
|
|
from ${angle}deg,
|
|
rgba(255, 255, 255, ${opacity}),
|
|
transparent ${transparentPos}%,
|
|
rgba(255, 255, 255, ${opacity})
|
|
)`;
|
|
}
|
|
|
|
// 监听滑块变化
|
|
angleRange.addEventListener('input', updatePreview);
|
|
transparentRange.addEventListener('input', updatePreview);
|
|
opacityRange.addEventListener('input', updatePreview);
|
|
|
|
// 监听背景颜色选择
|
|
colorOptions.forEach(option => {
|
|
option.addEventListener('click', () => {
|
|
// 移除所有选中状态
|
|
colorOptions.forEach(opt => opt.classList.remove('border-white'));
|
|
colorOptions.forEach(opt => opt.classList.add('border-transparent'));
|
|
|
|
// 添加当前选中状态
|
|
option.classList.remove('border-transparent');
|
|
option.classList.add('border-white');
|
|
|
|
// 移除所有背景类
|
|
previewContainer.classList.remove(
|
|
'bg-primary/20',
|
|
'bg-secondary/20',
|
|
'bg-blue-900/50',
|
|
'bg-gray-800',
|
|
'bg-pink-900/30'
|
|
);
|
|
|
|
// 添加选中的背景类
|
|
previewContainer.classList.add(option.dataset.color);
|
|
});
|
|
});
|
|
|
|
// 默认选中第一个颜色
|
|
colorOptions[0].classList.remove('border-transparent');
|
|
colorOptions[0].classList.add('border-white');
|
|
|
|
// 平滑滚动
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
|
anchor.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
const targetId = this.getAttribute('href');
|
|
const targetElement = document.querySelector(targetId);
|
|
|
|
if (targetElement) {
|
|
window.scrollTo({
|
|
top: targetElement.offsetTop - 80,
|
|
behavior: 'smooth'
|
|
});
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |