使用php对emoji表情进行编码和解码源码教程
2个月前 > 本篇文章主要用于不修改数据库编码，可以支持emoji 表情显示支持。例如...
演示截图什么的自己复制代码运行一下就知道了，保证你吃不了亏，上不了当。网页采用自适应。
<!DOCTYPE html><br />
<html lang="zh-CN"><br />
<head><br />
<meta charset="UTF-8"><br />
<meta name="viewport" content="width=device-width, initial-scale=1.0"><br />
<title>新拟态 CSS 生成器</title><br />
<style><br />
* {<br />
margin: 0;<br />
padding: 0;<br />
box-sizing: border-box;<br />
font-family: 'Segoe UI', Roboto, sans-serif;<br />
}<br />
body {<br />
background: #e0e5ec;<br />
min-height: 100vh;<br />
padding: 2rem 1rem;<br />
}<br />
.container {<br />
max-width: 1200px;<br />
margin: 0 auto;<br />
display: grid;<br />
grid-template-columns: 1fr 1fr;<br />
gap: 2rem;<br />
}<br />
@media (max-width: 768px) {<br />
.container {<br />
grid-template-columns: 1fr;<br />
}<br />
}<br />
.card {<br />
background: #e0e5ec;<br />
border-radius: 16px;<br />
padding: 2rem;<br />
box-shadow: <br />
8px 8px 16px #c8ccd4,<br />
-8px -8px 16px #ffffff;<br />
}<br />
h1 {<br />
text-align: center;<br />
color: #4a6fa5;<br />
margin-bottom: 2rem;<br />
font-size: 2rem;<br />
}<br />
.preview-title {<br />
color: #555;<br />
margin-bottom: 1.5rem;<br />
font-size: 1.2rem;<br />
}<br />
.preview-box {<br />
width: 100%;<br />
height: 200px;<br />
display: flex;<br />
justify-content: center;<br />
align-items: center;<br />
border-radius: 12px;<br />
margin-bottom: 1.5rem;<br />
transition: all 0.3s ease;<br />
/* 初始新拟态样式 */<br />
background: #e0e5ec;<br />
box-shadow: <br />
8px 8px 16px #c8ccd4,<br />
-8px -8px 16px #ffffff;<br />
}<br />
.preview-text {<br />
color: #4a6fa5;<br />
font-size: 1.1rem;<br />
}<br />
.control-group {<br />
margin-bottom: 1.5rem;<br />
}<br />
label {<br />
display: block;<br />
margin-bottom: 0.5rem;<br />
color: #666;<br />
font-weight: 500;<br />
}<br />
input[type="range"] {<br />
width: 100%;<br />
height: 8px;<br />
-webkit-appearance: none;<br />
appearance: none;<br />
background: #e0e5ec;<br />
border-radius: 4px;<br />
box-shadow: inset 3px 3px 6px #c8ccd4, inset -3px -3px 6px #ffffff;<br />
outline: none;<br />
}<br />
input[type="range"]::-webkit-slider-thumb {<br />
-webkit-appearance: none;<br />
appearance: none;<br />
width: 20px;<br />
height: 20px;<br />
border-radius: 50%;<br />
background: #e0e5ec;<br />
box-shadow: 3px 3px 6px #c8ccd4, -3px -3px 6px #ffffff;<br />
cursor: pointer;<br />
transition: all 0.2s;<br />
}<br />
input[type="range"]::-webkit-slider-thumb:hover {<br />
box-shadow: 4px 4px 8px #c8ccd4, -4px -4px 8px #ffffff;<br />
transform: scale(1.1);<br />
}<br />
.color-group {<br />
display: flex;<br />
gap: 1rem;<br />
margin-top: 0.5rem;<br />
}<br />
input[type="color"] {<br />
width: 50px;<br />
height: 50px;<br />
border: none;<br />
border-radius: 8px;<br />
background: transparent;<br />
cursor: pointer;<br />
box-shadow: 3px 3px 6px #c8ccd4, -3px -3px 6px #ffffff;<br />
}<br />
input[type="color"]::-webkit-color-swatch-wrapper {<br />
padding: 0;<br />
}<br />
input[type="color"]::-webkit-color-swatch {<br />
border: none;<br />
border-radius: 4px;<br />
}<br />
.btn-group {<br />
display: flex;<br />
gap: 1rem;<br />
margin-top: 0.5rem;<br />
}<br />
.btn {<br />
flex: 1;<br />
padding: 0.8rem 1.5rem;<br />
background: #e0e5ec;<br />
border: none;<br />
border-radius: 8px;<br />
color: #4a6fa5;<br />
font-weight: 600;<br />
cursor: pointer;<br />
transition: all 0.3s;<br />
box-shadow: 4px 4px 8px #c8ccd4, -4px -4px 8px #ffffff;<br />
}<br />
.btn:hover {<br />
box-shadow: 6px 6px 12px #c8ccd4, -6px -6px 12px #ffffff;<br />
}<br />
.btn:active {<br />
box-shadow: inset 3px 3px 6px #c8ccd4, inset -3px -3px 6px #ffffff;<br />
}<br />
.btn-reset {<br />
color: #e74c3c;<br />
}<br />
.code-box {<br />
background: #f8f9fa;<br />
border-radius: 8px;<br />
padding: 1.5rem;<br />
margin-top: 1rem;<br />
position: relative;<br />
overflow-x: auto;<br />
}<br />
pre {<br />
font-family: 'Fira Code', monospace;<br />
font-size: 0.9rem;<br />
color: #333;<br />
line-height: 1.6;<br />
}<br />
.copy-tip {<br />
position: absolute;<br />
top: 1rem;<br />
right: 1rem;<br />
color: #666;<br />
font-size: 0.8rem;<br />
opacity: 0;<br />
transition: opacity 0.3s;<br />
}<br />
.copy-tip.show {<br />
opacity: 1;<br />
}<br />
.switch-group {<br />
display: flex;<br />
align-items: center;<br />
gap: 1rem;<br />
}<br />
.switch {<br />
position: relative;<br />
display: inline-block;<br />
width: 50px;<br />
height: 24px;<br />
}<br />
.switch input {<br />
opacity: 0;<br />
width: 0;<br />
height: 0;<br />
}<br />
.slider {<br />
position: absolute;<br />
cursor: pointer;<br />
top: 0;<br />
left: 0;<br />
right: 0;<br />
bottom: 0;<br />
background: #e0e5ec;<br />
border-radius: 24px;<br />
box-shadow: inset 2px 2px 4px #c8ccd4, inset -2px -2px 4px #ffffff;<br />
transition: .4s;<br />
}<br />
.slider:before {<br />
position: absolute;<br />
content: "";<br />
height: 18px;<br />
width: 18px;<br />
left: 3px;<br />
bottom: 3px;<br />
background: white;<br />
border-radius: 50%;<br />
box-shadow: 1px 1px 3px #c8ccd4;<br />
transition: .4s;<br />
}<br />
input:checked + .slider {<br />
background: #4a6fa5;<br />
}<br />
input:checked + .slider:before {<br />
transform: translateX(26px);<br />
}<br />
</style><br />
</head><br />
<body><br />
<h1>✨ 新拟态 CSS 生成器</h1><br />
<div class="container"><br />
<!-- 左侧：参数控制区 --><br />
<div class="card"><br />
<h2 class="preview-title">参数调节</h2><br />
<br />
<!-- 阴影强度控制 --><br />
<div class="control-group"><br />
<label for="shadow-strength">阴影强度: <span id="shadow-strength-value">8</span>px</label><br />
<input type="range" id="shadow-strength" min="2" max="20" value="8"><br />
</div><br />
<br />
<!-- 圆角控制 --><br />
<div class="control-group"><br />
<label for="border-radius">圆角大小: <span id="border-radius-value">12</span>px</label><br />
<input type="range" id="border-radius" min="0" max="30" value="12"><br />
</div><br />
<br />
<!-- 颜色控制 --><br />
<div class="control-group"><br />
<label>颜色配置</label><br />
<div class="color-group"><br />
<input type="color" id="bg-color" value="#e0e5ec"><br />
<input type="color" id="shadow-dark" value="#c8ccd4"><br />
<input type="color" id="shadow-light" value="#ffffff"><br />
</div><br />
</div><br />
<br />
<!-- 按压效果切换 --><br />
<div class="control-group"><br />
<label class="switch-group"><br />
按压效果<br />
<label class="switch"><br />
<input type="checkbox" id="press-effect"><br />
<span class="slider"></span><br />
</label><br />
</label><br />
</div><br />
<br />
<!-- 按钮组（复制+重置） --><br />
<div class="btn-group"><br />
<button class="btn" id="copy-btn">复制 CSS 代码</button><br />
<button class="btn btn-reset" id="reset-btn">重置默认值</button><br />
</div><br />
<div class="copy-tip" id="copy-tip">复制成功！</div><br />
</div><br />
<br />
<!-- 右侧：预览和代码区 --><br />
<div class="card"><br />
<h2 class="preview-title">效果预览</h2><br />
<div class="preview-box" id="preview-box"><br />
<span class="preview-text">新拟态效果</span><br />
</div><br />
<br />
<h2 class="preview-title">生成的 CSS 代码</h2><br />
<div class="code-box"><br />
<pre id="css-code"><br />
.neumorphic {<br />
background: #e0e5ec;<br />
border-radius: 12px;<br />
box-shadow: <br />
8px 8px 16px #c8ccd4,<br />
-8px -8px 16px #ffffff;<br />
}</pre><br />
</div><br />
</div><br />
</div><br />
<br />
<script><br />
// 获取DOM元素<br />
const previewBox = document.getElementById('preview-box');<br />
const shadowStrength = document.getElementById('shadow-strength');<br />
const shadowStrengthValue = document.getElementById('shadow-strength-value');<br />
const borderRadius = document.getElementById('border-radius');<br />
const borderRadiusValue = document.getElementById('border-radius-value');<br />
const bgColor = document.getElementById('bg-color');<br />
const shadowDark = document.getElementById('shadow-dark');<br />
const shadowLight = document.getElementById('shadow-light');<br />
const pressEffect = document.getElementById('press-effect');<br />
const cssCode = document.getElementById('css-code');<br />
const copyBtn = document.getElementById('copy-btn');<br />
const resetBtn = document.getElementById('reset-btn');<br />
const copyTip = document.getElementById('copy-tip');<br />
<br />
// 默认参数配置<br />
const defaultConfig = {<br />
shadowStrength: 8,<br />
borderRadius: 12,<br />
bgColor: '#e0e5ec',<br />
shadowDark: '#c8ccd4',<br />
shadowLight: '#ffffff',<br />
pressEffect: false<br />
};<br />
<br />
// 更新预览和代码<br />
function updateNeumorphism() {<br />
const strength = shadowStrength.value;<br />
const radius = borderRadius.value;<br />
const bg = bgColor.value;<br />
const dark = shadowDark.value;<br />
const light = shadowLight.value;<br />
const isPressed = pressEffect.checked;<br />
<br />
// 更新预览样式<br />
previewBox.style.background = bg;<br />
previewBox.style.borderRadius = `${radius}px`;<br />
<br />
if (isPressed) {<br />
// 按压效果（内阴影）<br />
previewBox.style.boxShadow = `inset ${strength}px ${strength}px ${strength * 2}px ${dark}, inset -${strength}px -${strength}px ${strength * 2}px ${light}`;<br />
} else {<br />
// 普通效果（外阴影）<br />
previewBox.style.boxShadow = `${strength}px ${strength}px ${strength * 2}px ${dark}, -${strength}px -${strength}px ${strength * 2}px ${light}`;<br />
}<br />
<br />
// 更新代码显示<br />
const code = `.neumorphic {<br />
background: ${bg};<br />
border-radius: ${radius}px;<br />
box-shadow: <br />
${isPressed ? 'inset ' : ''}${strength}px ${strength}px ${strength * 2}px ${dark},<br />
${isPressed ? 'inset ' : ''}-${strength}px -${strength}px ${strength * 2}px ${light};<br />
}`;<br />
cssCode.textContent = code;<br />
<br />
// 更新数值显示<br />
shadowStrengthValue.textContent = strength;<br />
borderRadiusValue.textContent = radius;<br />
}<br />
<br />
// 重置默认值<br />
function resetToDefault() {<br />
// 恢复参数值<br />
shadowStrength.value = defaultConfig.shadowStrength;<br />
borderRadius.value = defaultConfig.borderRadius;<br />
bgColor.value = defaultConfig.bgColor;<br />
shadowDark.value = defaultConfig.shadowDark;<br />
shadowLight.value = defaultConfig.shadowLight;<br />
pressEffect.checked = defaultConfig.pressEffect;<br />
<br />
// 同步更新预览和代码<br />
updateNeumorphism();<br />
<br />
// 显示重置提示（可选）<br />
copyTip.textContent = '已重置默认值！';<br />
copyTip.classList.add('show');<br />
setTimeout(() => copyTip.classList.remove('show'), 2000);<br />
}<br />
<br />
// 初始化<br />
updateNeumorphism();<br />
<br />
// 绑定事件监听<br />
shadowStrength.addEventListener('input', updateNeumorphism);<br />
borderRadius.addEventListener('input', updateNeumorphism);<br />
bgColor.addEventListener('input', updateNeumorphism);<br />
shadowDark.addEventListener('input', updateNeumorphism);<br />
shadowLight.addEventListener('input', updateNeumorphism);<br />
pressEffect.addEventListener('change', updateNeumorphism);<br />
<br />
// 复制代码功能<br />
copyBtn.addEventListener('click', () => {<br />
navigator.clipboard.writeText(cssCode.textContent).then(() => {<br />
copyTip.textContent = '复制成功！';<br />
copyTip.classList.add('show');<br />
setTimeout(() => copyTip.classList.remove('show'), 2000);<br />
});<br />
});<br />
<br />
// 重置默认值功能<br />
resetBtn.addEventListener('click', resetToDefault);<br />
</script><br />
</body><br />
</html><br />
<br />
```<br />#免责声明#
本文为转载 或 原创内容，未经授权禁止转载、摘编、复制及镜像使用、转载请注明作者、出处及原文链接、违者将依法追究责任。
2个月前 > 本篇文章主要用于不修改数据库编码，可以支持emoji 表情显示支持。例如...
6天前 Moebius (Jean Giraud)风格，极繁主义，极致表现力，浪漫感，细节完美，大师...
1年前 赚钱的方式多种多样，关键在于结合自身资源、技能和兴趣，选择适合自...
3个月前 # 坚果云WebDAV操作类开发文档 ## 一、文档概述 本文档详细介绍了`Jianguoyun...
3个月前 一款实用的磨砂透明背景封面生成工具：轻松搞定高颜值封面设计 **封面...
4个月前 实现 Cookie 隐私权限弹窗的核心是「底部固定显示 + 权限选择逻辑 + Cookie 状...