css布局实现pc端简洁风格ai绘画图片编辑生成落地页官网介绍代码
代码语言：html
所属分类：布局界面
代码描述：css布局实现pc端简洁风格ai绘画图片编辑生成落地页官网介绍代码
代码标签： css 布局 pc端 简洁 风格 ai 绘画 图片 编辑 生成 落地页 官网 介绍 代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ArtificialCanvas - AI绘画创作平台</title>
<!-- 引入外部资源 -->
<!-- 引入Tailwind CSS -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.4.16.js"></script>
<!-- 引入Font Awesome -->
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
<!-- 引入Chart.js -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/chart.umd.4.4.1.js"></script>
<!-- Tailwind 配置 -->
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#165DFF',
secondary: '#722ED1',
dark: '#1D2129',
light: '#F2F3F5',
accent: '#FF7D00'
},
fontFamily: {
inter: ['Inter', 'system-ui', 'sans-serif'],
},
},
}
}
</script>
<!-- 自定义样式 -->
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.text-gradient {
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.bg-blur {
backdrop-filter: blur(8px);
}
.animate-float {
animation: float 6s ease-in-out infinite;
}
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
}
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
100% { transform: translateY(0px); }
}
</style>
</head>
<body class="font-inter bg-white text-dark antialiased">
<!-- 导航栏 -->
<header id="navbar" class="fixed w-full top-0 z-50 transition-all duration-300 bg-white/90 bg-blur shadow-sm">
<div class="container mx-auto px-4 md:px-6 lg:px-8">
<div class="flex items-center justify-between h-16 md:h-20">
<!-- Logo -->
<a href="#" class="flex items-center space-x-2">
<div class="w-10 h-10 rounded-lg bg-gradient-to-br from-primary to-secondary flex items-center justify-center">
<i class="fa fa-paint-brush text-white text-xl"></i>
</div>
<span class="text-xl font-bold bg-gradient-to-r from-primary to-secondary text-gradient">ArtificialCanvas</span>
</a>
<!-- 桌面导航 -->
<nav class="hidden md:flex items-center space-x-8">
<a href="#features" class="text-dark/80 hover:text-primary transition-colors">功能</a>
<a href="#gallery" class="text-dark/80 hover:text-primary transition-colors">作品展示</a>
<a href="#pricing" class="text-dark/80 hover:text-primary transition-colors">定价</a>
<a href="#testimonials" class="text-dark/80 hover:text-primary transition-colors">用户评价</a>
</nav>
<!-- 按钮组 -->
<div class="hidden md:flex items-center space-x-4">
<a href="#" class="text-primary hover:text-primary/80 transition-colors">登录</a>
<a href="#" class="px-5 py-2 bg-primary hover:bg-primary/90 text-white rounded-lg transition-all shadow-md hover:shadow-lg">免费试用</a>
</div>
<!-- 移动端菜单按钮 -->
<button id="menu-toggle" class="md:hidden text-dark hover:text-primary transition-colors">
<i class="fa fa-bars text-2xl"></i>
</button>
</div>
</div>
<!-- 移动端导航菜单 -->
<div id="mobile-menu" class="md:hidden hidden bg-white border-t animate-fadeIn">
<div class="container mx-auto px-4 py-3 space-y-3">
<a href="#features" class="block py-2 text-dark/80 hover:text-primary transition-colors">功能</a>
<a href="#gallery" class="block py-2 text-dark/80 hover:text-primary transition-colors">作品展示</a>
<a href="#pricing" class="block py-2 text-dark/80 hover:text-primary transition-colors">定价</a>
<a href="#testimonials" class="block py-2 text-dark/80 hover:text-primary transition-colors">用户评价</a>
<div class="flex space-x-4 pt-2 border-t">
<a href="#" class="text-primary hover:text-primary/80 transition-colors">登录</a>
<a href="#" class="px-5 py-2 bg-primary hover:bg-primary/90 text-white rounded-lg transition-all">免费试用</a>
</div>
</div>
</div>
</header>
<main>
<!-- 英雄区域 -->
<section class="pt-32 pb-20 md:pt-40 md:pb-32 bg-gradient-to-b from-light to-white">
<div class="container mx-auto px-4 md:px-6 lg:px-8">
<div class="flex flex-col lg:flex-row items-center gap-12">
<div class="w-full lg:w-1/2 space-y-6">
<h1 class="text-[clamp(2.5rem,5vw,4rem)] font-bold leading-tight">
用<span class="bg-gradient-to-r from-primary to-secondary text-gradient">AI</span>释放你的<br>艺术创造力
</h1>
<p class="text-lg md:text-xl text-dark/70 max-w-xl">
只需输入文字描述，即可生成专业级艺术作品。无论是插画、概念设计还是抽象艺术，都能一键实现。
</p>
<div class="flex flex-col sm:flex-row gap-4 pt-4">
<a href="#" class="px-8 py-4 bg-primary hover:bg-primary/90 text-white rounded-lg text-center font-medium transition-all shadow-lg hover:shadow-xl hover:shadow-primary/20">
立即开始创作
</a>
<a href="#" class="px-8 py-4 bg-white hover:bg-light text-dark border border-dark/10 rounded-lg text-center font-medium transition-all flex items-center justify-center gap-2">
<i class="fa fa-play-circle-o"></i> 观看演示
</a>
</div>
<div class="flex items-center gap-4 pt-2">
<div class="flex -space-x-2">
<img src="https://picsum.photos/200/200?random=1" alt="用户头像" class="w-10 h-10 rounded-full border-2 border-white">
<img src="https://picsum.photos/200/200?random=2" alt="用户头像" class="w-10 h-10 rounded-full border-2 border-white">
<img src="https://picsum.photos/200/200?random=3" alt="用户头像" class="w-10 h-10 rounded-full border-2 border-white">
<img src="https://picsum.photos/200/200?random=4" alt="用户头像" class="w-10 h-10 rounded-full border-2 border-white">
</div>
<p class="text-dark/70 text-sm">
<span class="font-semibold text-primary">10,000+</span> 创作者正在使用
</p>
</div>
</div>
<div class="w-full lg:w-1/2 relative">
<div class="relative z-10 animate-float">
<img src="https://picsum.photos/800/600?random=10" alt="AI生成艺术作品" class="rounded-xl shadow-2xl">
<div class="absolute -bottom-6 -left-6 bg-white p-3 rounded-lg shadow-lg hidden md:block">
<div class="flex items-center gap-2">
<div class="w-3 h-3 rounded-full bg-green-500"></div>
<p class="text-sm font-medium">实时生成中...</p>
</div>
</div>
<div class="absolute -top-6 -right-6 bg-white p-3 rounded-lg shadow-lg hidden md:block">
<div class="flex items-center gap-2">
<i class="fa fa-lightbulb-o text-accent"></i>
<p class="text-sm font-medium">创意无限</p>
</div>
</div>
</div>
<!-- 装饰元素 -->
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[120%] h-[120%] bg-gradient-to-r from-primary/20 to-secondary/20 rounded-full blur-3xl -z-10"></div>
</div>
</div>
</div>
</section>
<!-- 合作伙伴 -->
<section class="py-12 bg-light">
<div class="container mx-auto px-4 md:px-6 lg:px-8">
<p class="text-center text-dark/50 mb-8 text-sm uppercase tracking-wider">受到行业领先企业的信任</p>
<div class="flex flex-wrap justify-center items-center gap-8 md:gap-16 opacity-70">
<div class="text-dark/40 text-2xl font-bold">Adobe</div>
<div class="text-dark/40 text-2xl font-bold">Figma</div>
<div class="text-dark/40 text-2xl font-bold">Netflix</div>
<div class="text-dark/40 text-2xl font-bo.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0