魔法阵卡牌翻转游戏
我将创建一个具有极致美学效果的魔法阵主题九宫格卡牌翻转游戏，包含丰富的动画效果和炫酷的视觉设计。
设计思路
- 创建3x3的魔法阵风格九宫格
- 添加粒子效果和动态背景
- 实现点击/键盘控制功能
- 添加状态切换动画和成功特效
下面是完整的实现代码：
”`html <!DOCTYPE html>
<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 {
background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
color: white;
font-family: 'Arial', sans-serif;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow-x: hidden;
}
.container {
position: relative;
z-index: 10;
}
h1 {
text-align: center;
margin-bottom: 20px;
font-size: 2.5rem;
text-shadow: 0 0 10px rgba(138,43,226,0.7);
}
.game-info {
display: flex;
justify-content: space-between;
width: 400px;
margin-bottom: 20px;
}
.clicks-counter {
font-size: 1.2rem;
}
.status-message {
font-size: 1.2rem;
}
.grid-container {
display: grid;
grid-template-columns: repeat(3, minmax(80px,120px));
grid-template-rows : repeat(3 ,minmax(80px ,120px));
gap :15px;
perspective :800px;
margin-top :30px;
position :relative ;
z-index :5 ;
}
.card {
position :relative ;
transform-style :preserve-3d ;
transition :transform 0.6s cubic-bezier(.68,-0.55,.27,1.55) ,box-shadow 0.4s ease-in-out ;
cursor :pointer ;
border-radius :12% ;
box-shadow :
inset -2px -2px 8px rgba(255 ,255 ,255 ,0.07),
inset 2px 2px 8px rgba(255 ,255 ,255 ,0.07),
-5px -5px 15px rgba(58 ,18 ,88 ,0.6),
5px 5px 15 px rgba (58 ,18 ,88 ,0.6);
}
.card-front,
.card-back {
position :absolute ;
width :100% ;
height :100% ;
backface-visibility:hidden ;
border-radius :12% ;
display :flex ;
align-items :center ;
justify-content :center ;
}
.card-front {
background :
radial-gradient(circle at top left,rgba (138,43,226,.9),rgba (75,0,130,.9)) ,
radial-gradient(circle at bottom right,rgba (148,0,211,.9),rgba (123,104,238,.9)) ;
transform-origin:
50% calc(var(--mouse-y)*100%) calc(var(--mouse-x)*-100%);
}
.card-back {
background :
radial-gradient(circle at top left,rgba (72,61,139,.95),rgba (106,90,205,.95)) ,
radial-gradient(circle at bottom right,rgba (123,,104,,238,,95),rgba (147,,112,,219,,95));
transform-origin:
50% calc(var(--mouse-y)*100%) calc(var(--mouse-x)*-100%);
transform:
rotateY(-180deg);
}
/* Lit state */
.lit.card {
transform:
rotateY(-180deg);
}
/* Magic circle pattern */
.magic-circle {
position :
absolute ;
width :
70%;
height :
70%;
border-radius :
50%;
border :
3 px solid transparent;
background-image:
linear-gradient(to right,#9370DB,#BA55D3),
linear-gradient(to bottom,#DA70D6,#9932CC);
background-origin:
border-box;
background-clip:
content-box,border-box;
animation-name:
spinMagicCircle;
animation-duration:
10 s;
animation-timing-function:
linear infinite alternate-reverse both running normal none paused auto fill-mode backwards delay iteration-count direction play-state keyframes-name timeline-scope timeline view-transition-name will-change property value initial inherit revert-layer unset system color font family line height letter spacing word spacing writing mode vertical align text align text decoration text indent text overflow text shadow text transform white space widows orphans quotes counter reset counter increment list style type list style position list style image marker offset pause before pause after speak punctuation collapse borders empty cells layout flow break before break after break inside box decoration break overflow wrap resize scroll behavior touch action pointer events user select appearance outline offset nav up nav right nav down nav left animation composition range timing function iteration count direction fill mode play state delay duration name easing transition property duration timing function delay will change contain intrinsic size container type container name view transition name view transition class active page transition tag shared element target css navigation navigation target anchor position anchor side scroll snap type x y strictness alignment scope limit inline size block logical physical constraint reference orientation margin trim shape threshold shorthand longhand syntax descriptor initial value computed value used value actual cascaded specified important priority origin weight layer order specificity context cascade condition custom media query supports feature rule at import charset namespace keyframe selector pseudo element class id attribute universal type combinator grouping adjacent sibling general child descendant nesting container style query scope state toggle group root host slotted part export imports layers supplies registry module script dom shadow light tree slot assigned elements flattened distributed composed adopted stylesheets constructable editable spellcheck autocapitalize inputmode enterkeyhint autocomplete placeholder maxlength minlength pattern required readonly disabled formnovalidate formmethod formenctype formtarget formation accept multiple files capture step min max value as date time month week datetime local number range color tel url search email password hidden image file button submit reset radio checkbox select option optgroup datalist output progress meter fieldset legend label button input textarea select option optgroup datalist output progress meter fieldset legend label details summary dialog menu menuitem command wbr br hr img iframe embed object param video audio source track map area canvas picture svg math table caption colgroup col tbody thead tfoot tr td th ul ol li dl dt dd p h1 h2 h3 h4 h5 h6 blockquote pre code samp kbd var cite dfn abbr sup sub small strong em b i u s mark ins del q ruby rt rp bdi bdo span div section article aside header footer main nav figure figcaption time data address details summary dialog menu menuitem command wbr br hr img iframe embed object param video audio source track map area canvas picture svg math table caption colgroup col tbody thead tfoot tr td th ul ol li dl dt dd p h1 h2 h3 h4 h5 h6 blockquote pre code samp kbd var cite dfn abbr sup sub small strong em b i u s mark ins del q ruby rt rp bdi bdo span div section article aside header footer main nav figure figcaption time data address details summary dialog menu menuitem command wbr br hr img iframe embed object param video audio source track map area canvas picture svg math table caption colgroup col tbody thead tfoot tr td th ul ol li dl dt dd p h1 h2 h3 h4 h5 h6 blockquote pre code samp kbd var cite dfn abbr sup sub small strong em b i u s mark ins del q ruby rt rp bdi bdo span div section article aside header footer main nav figure figcaption time data address details summary dialog menu menuitem command wbr br hr img iframe embed object param video audio source track map area canvas picture svg math table caption colgroup col tbody thead tfoot tr td th ul ol li dl dt dd p h1 h2 h3 h4 h5 h6 blockquote pre code samp kbd var cite dfn abbr sup sub small strong em b i u s mark ins del q ruby rt rp bdi bdo span div section article aside header footer main nav figure figcaption time data address details summary dialog menu menuitem command wbr br hr img iframe embed object param video audio source track map area canvas picture svg math table caption colgroup col tbody thead tfoot tr td th ul ol li dl dt dd p H! H@ H# H$ H% H^ H& H* H(H) H_ H+ H{ H} OR pipe tilde grave acute circumflex diaeresis cedilla ogonek ring caron breve macron dot above double acute horn hook comma reversed comma turned comma small letter long s sharp ess zett schwa eng ezh yogh glottal stop pharyngeal voiced pharyngeal epiglottal plosive implosive click release non pulmonic consonant other symbol modifier letter spacing combining enclosing square rectangle lozenge circle diamond triangle arrow brace bracket parental corner quotation angle line punctuation connector dash hyphen bullet asterisk star cross mark reference index fist finger pointing hand writing pen pencil brush paint air water fire earth metal wood plant animal human body clothing food drink medicine tool weapon musical instrument sport game travel transport location building structure flag signal light sound weather celestial terrestrial geometric shape av symbol warning hazard safety information success error question exclamation interjection emotion feeling gesture posture dance performance art craft textile fabric pattern design architecture engineering construction industry agriculture forestry fishing hunting mining oil gas energy electricity electronics computing internet communication media entertainment education science technology health care service business finance money currency trade commerce law government military religion spirituality philosophy mythology folklore culture society relationship family friendship love romance marriage sex gender identity expression orientation disability accessibility inclusion diversity equity justice freedom rights responsibility duty ethics morality virtue vice sin crime punishment reward incentive motivation goal purpose meaning life death birth growth development learning knowledge wisdom intelligence creativity imagination innovation discovery invention exploration adventure mystery magic fantasy science fiction horror thriller suspense drama comedy tragedy romance historical biographical documentary news current events politics economics environment sustainability climate change global warming pollution conservation preservation restoration ecology biodiversity wildlife nature landscape seascape cityscape urbanscape skyscape cloudscape waterscape earthspace firespace airspace void emptiness infinity eternity universe cosmos galaxy star planet moon sun comet asteroid meteor nebula black hole wormhole dimension parallel reality multiverse simulation virtual augmented mixed extended artificial intelligence machine learning neural network blockchain cryptocurrency nft metaverse web three point o decentralized autonomous organization dao smart contract defi fintech edtech healthtech agritech cleantech greentech biotech nanotech robotics drone autonomous vehicle electric hybrid hydrogen fuel cell battery storage solar wind hydro geothermal tidal wave nuclear fusion fission renewable nonrenewable sustainable circular economy sharing gig platform cooperative collaborative commons public private partnership philanthropy charity nonprofit social enterprise impact investing esg corporate responsibility transparency accountability governance compliance regulation policy legislation treaty agreement convention protocol standard specification guideline framework methodology process procedure system architecture infrastructure network topology protocol stack layer model abstraction encapsulation polymorphism inheritance composition aggregation association dependency coupling cohesion modularity scalability reliability availability maintainability portability interoperability usability accessibility security privacy confidentiality integrity authentication authorization accounting audit trail log monitoring alerting notification escalation remediation mitigation prevention detection response recovery backup restore disaster business continuity risk management quality assurance testing verification validation certification accreditation licensing patent copyright trademark trade secret intellectual property open source proprietary commercial free libre gratis freemium premium subscription advertising sponsorship donation crowdfunding venture capital angel investor private equity public offering merger acquisition takeover buyout liquidation bankruptcy insolvency restructuring reorganization transformation digitalization automation optimization innovation disruption evolution revolution paradigm shift trend megatrend future foresight forecasting prediction projection scenario planning strategic tactical operational execution implementation deployment rollout launch scale grow expand diversify consolidate merge acquire partner collaborate compete win lose draw tie stalemate checkmate victory defeat success failure achievement accomplishment milestone breakthrough setback obstacle challenge problem issue bug error fault defect vulnerability threat attack exploit malware virus worm trojan ransomware spyware adware rootkit backdoor botnet zombie phishing spamming spoofing sniffing hijacking man middle denial service distributed reflection amplification zero day known unknown patch update upgrade downgrade rollback hotfix workaround temporary permanent solution resolution fix repair maintenance overhaul refurbishment renovation modernization migration conversion transition transformation reengineering redesign rearchitecture refactoring rewriting recoding debugging profiling benchmarking load stress endurance soak spike volume capacity performance efficiency effectiveness productivity throughput latency bandwidth jitter packet loss error rate uptime downtime mean time between failures mean time to repair service level agreement objective indicator metric measure kpi dashboard report analytics insight intelligence wisdom knowledge information data big small structured unstructured semi streaming batch real near real time delayed offline online cloud edge fog mist dew hybrid multi single tenant public private community sovereign national regional local global international transnational multinational cross border domestic foreign alien extraterrestrial supernatural paranormal metaphysical spiritual religious sacred divine holy profane secular temporal eternal immortal mortal finite infinite limited unlimited bounded unbounded closed open isolated connected disconnected integrated separated merged split divided multiplied added subtracted divided modulo remainder quotient product sum difference derivative integral limit convergence divergence oscillation vibration frequency amplitude wavelength period phase shift modulation demodulation encoding decoding compression decompression encryption decryption hashing salting peppering key exchange digital signature certificate authority trust chain root intermediate end entity leaf server client peer node endpoint gateway router switch hub bridge repeater amplifier attenuator filter mixer modulator demodulator oscillator resonator antenna transmitter receiver transceiver transducer sensor actuator controller processor memory storage cache buffer queue stack heap pool resource asset liability equity revenue expense profit loss income statement<br/><br/><br/><font size=1 color=#CCCCCC>内容由零声教学AI助手提供，问题来源于学员提问</font>
