css实现全套扑克牌悬浮动画效果代码
代码语言:html
所属分类:布局界面
代码描述:css实现全套扑克牌悬浮动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @charset "UTF-8"; body { background-image:url("//repo.bfw.wiki/bfwrepo/image/5e4350528640e.png"); font:100% "Arial Narrow" } .header { height:25px; background:#222; color:#eee; text-align:center; font:12px/25px Helvetica,Verdana,Sans-Serif } .header>A { color:#999 } #hand { width:150px; height:225px } #hand>LI { position:absolute; -moz-transition:top .5s ease .1s,left .5s ease .2s,-moz-transform .5s ease .2s; -o-transition:top .5s ease .1s,left .5s ease .2s,-o-transform .5s ease .2s; -webkit-transition:top .5s ease,left .5s ease,-webkit-transform .5s ease; -webkit-transition-delay:.1s,0.2s,0.2s; transition:top .5s ease .1s,left .5s ease .2s,transform .5s ease .2s } #hand>LI:nth-child(1) { -moz-transform:rotate(-3deg); -ms-transform:rotate(-3deg); -webkit-transform:rotate(-3deg); transform:rotate(-3deg) } #hand>LI:nth-child(2) { -moz-transform:rotate(0deg); -ms-transform:rotate(0deg); -webkit-transform:rotate(0deg); transform:rotate(0deg) } #hand>LI:nth-child(3) { -moz-transform:rotate(3deg); -ms-transform:rotate(3deg); -webkit-transform:rotate(3deg); transform:rotate(3deg) } #hand>LI:nth-child(4) { -moz-transform:rotate(6deg); -ms-transform:rotate(6deg); -webkit-transform:rotate(6deg); transform:rotate(6deg) } #hand>LI:hover { left:0; top:-30px; cursor:pointer; -moz-box-shadow:inset 0 0 80px rgba(150,100,50,0.3),0 0 30px rgba(255,255,200,0.8); -webkit-box-shadow:inset 0 0 80px rgba(150,100,50,0.3),0 0 30px rgba(255,255,200,0.8); box-shadow:inset 0 0 80px rgba(150,100,50,0.3),0 0 30px rgba(255,255,200,0.8) } #hand:hover>LI:nth-child(1) { -moz-transform:rotate(-10deg); -ms-transform:rotate(-10deg); -webkit-transform:rotate(-10deg); transform:rotate(-10deg); left:0 } #hand:hover>LI:nth-child(2) { -moz-transform:rotate(0deg); -ms-transform:rotate(0deg); -webkit-transform:rotate(0deg); transform:rotate(0deg); left:30px } #hand:hover>LI:nth-child(3) { -moz-transform:rotate(10deg); -ms-transform:rotate(10deg); -webkit-transform:rotate(10deg); transform:rotate(10deg); left:60px } #hand:hover>LI:nth-child(4) { -moz-transform:rotate(20deg); -ms-transform:rotate(20deg); -webkit-transform:rotate(20deg); transform:rotate(20deg); left:90px } #spread { width:450px; height:250px } #spread>LI { position:absolute; -moz-transition:top .5s ease .1s; -o-transition:top .5s ease .1s; -webkit-transition:top .5s ease; -webkit-transition-delay:.1s; transition:top .5s ease .1s } #spread>LI:nth-child(1) { -moz-transform:translate(0em,16px) rotate(-40deg); -ms-transform:translate(0em,16px) rotate(-40deg); -webkit-transform:translate(0em,16px) rotate(-40deg); transform:translate(0em,16px) rotate(-40deg) } #spread>LI:nth-child(2) { -moz-transform:translate(1.6em,11px) rotate(-34deg); -ms-transform:translate(1.6em,11px) rotate(-34deg); -webkit-transform:translate(1.6em,11px) rotate(-34deg); transform:translate(1.6em,11px) rotate(-34deg) } #spread>LI:nth-child(3) { -moz-transform:translate(3.2em,7px) rotate(-28deg); -ms-transform:translate(3.2em,7px) rotate(-28deg); -webkit-transform:translate(3.2em,7px) rotate(-28deg); transform:translate(3.2em,7px) rotate(-28deg) } #spread>LI:nth-child(4) { -moz-transform:translate(4.8em,4px) rotate(-22deg); -ms-transform:translate(4.8em,4px) rotate(-22deg); -webkit-transform:translate(4.8em,4px) rotate(-22deg); transform:translate(4.8em,4px) rotate(-22deg) } #spread>LI:nth-child(5) { -moz-transform:translate(6.4em,2px) rotate(-16deg); -ms-transform:translate(6.4em,2px) rotate(-16deg); -webkit-transform:translate(6.4em,2px) rotate(-16deg); transform:translate(6.4em,2px) rotate(-16deg) } #spread>LI:nth-child(6) { -moz-transform:translate(8em,1px) rotate(-10deg); -ms-transform:translate(8em,1px) rotate(-10deg); -webkit-transform:translate(8em,1px) rotate(-10deg); transform:translate(8em,1px) rotate(-10deg) } #spread>LI:nth-child(7) { -moz-transform:translate(9.6em,1px) rotate(-4deg); -ms-transform:translate(9.6em,1px) rotate(-4deg); -webkit-transform:translate(9.6em,1px) rotate(-4deg); transform:translate(9.6em,1px) rotate(-4deg) } #spread>LI:nth-child(8) { -moz-transform:translate(11.2em,2px) rotate(2deg); -ms-transform:translate(11.2em,2px) rotate(2deg); -webkit-transform:translate(11.2em,2px) rotate(2deg); transform:translate(11.2em,2px) rotate(2deg) } #spread>LI:nth-child(9) { -moz-transform:translate(12.8em,4px) rotate(8deg); -ms-transform:translate(12.8em,4px) rotate(8deg); -webkit-transform:translate(12.8em,4px) rotate(8deg); transform:translate(12.8em,4px) rotate(8deg) } #spread>LI:nth-child(10) { -moz-transform:translate(14.4em,7px) rotate(14deg); -ms-transform:translate(14.4em,7px) rotate(14deg); -webkit-transform:translate(14.4em,7px) rotate(14deg); transform:translate(14.4em,7px) rotate(14deg) } #spread>LI:nth-child(11) { -moz-transform:translate(16em,11px) rotate(20deg); -ms-transform:translate(16em,11px) rotate(20deg); -webkit-transform:translate(16em,11px) rotate(20deg); transform:translate(16em,11px) rotate(20deg) } #spread>LI:nth-child(12) { -moz-transform:translate(17.6em,16px) rotate(26deg); -ms-transform:translate(17.6em,16px) rotate(26deg); -webkit-transform:translate(17.6em,16px) rotate(26deg); transform:translate(17.6em,16px) rotate(26deg) } #spread>LI:nth-child(13) { -moz-transform:translate(19.2em,22px) rotate(32deg); -ms-transform:translate(19.2em,22px) rotate(32deg); -webkit-transform:translate(19.2em,22px) rotate(32deg); transform:translate(19.2em,22px) rotate(32deg) } #spread>LI:hover { left:0; top:-40px; cursor:pointer; -moz-box-shadow:inset 0 0 80px rgba(150,100,50,0.3),0 0 30px rgba(255,255,200,0.8); -webkit-box-shadow:inset 0 0 80px rgba(150,100,50,0.3),0 0 30px rgba(255,255,200,0.8); box-shadow:inset 0 0 80px rgba(150,100,50,0.3),0 0 30px rgba(255,255,200,0.8) } #grid { width:800px } #grid>LI { position:relative; float:left; margin:5px -46px 5px 0; -moz-transition:top .5s ease .1s,left .5s ease .1s; -o-transition:top .5s ease .1s,left .5s ease .1s; -webkit-transition:top .5s ease,left .5s ease; -webkit-transition-delay:.1s,0.1s; transition:top .5s ease .1s,left .5s ease .1s } #grid>LI:hover { left:-40px; top:-10px; cursor:pointer; -moz-box-shadow:inset 0 0 80px rgba(150,100,50,0.3),0 0 30px rgba(255,255,200,0.8); -webkit-box-shadow:inset 0 0 80px rgba(150,100,50,0.3),0 0 30px rgba(255,255,200,0.8); box-shadow:inset 0 0 80px rgba(150,100,50,0.3),0 0 30px rgba(255,255,200,0.8) } #hand:before,#spread:before,#grid:before,#hand:after,#spread:after,#grid:after { content:""; display:table } #hand:after,#spread:after,#grid:after { clear:both } #hand,#spread,#grid { border:7px solid #030; -moz-border-radius:20px; -webkit-border-radius:20px; border-radius:20px } #hand,#spread,#grid { position:relative; margin:5% auto 10% } #hand>LI,#spread>LI,#grid>LI { top:0; left:0; list-style:none; width:12rem; height:16.8rem; background-color:#fff; background-image:url("//repo.bfw.wiki/bfwrepo/image/60fcb21c49d36.png"); -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; -moz-box-shadow:inset 0 0 80px rgba(150,100,50,0.5),0 0 3px #966432; -webkit-box-shadow:inset 0 0 80px rgba(150,100,50,0.5),0 0 3px #966432; box-shadow:inset 0 0 80px rgba(150,100,50,0.5),0 0 3px #966432; -moz-transform-style:preserve-3d; -webkit-transform-style:preserve-3d; transform-style:preserve-3d; -moz-backface-visibility:hidden; -webkit-backface-visibility:hidden; backface-visibility:hidden; -moz-perspective:1000; -webkit-perspective:1000; perspective:1000; -moz-transform:translateZ(0deg); -webkit-transform:translateZ(0deg); transform:translateZ(0deg) } #hand>LI[data-value],#spread>LI[data-value],#grid>LI[data-value] { overflow:hidden } #hand>LI[data-value*='♣'][data-value],#spread>LI[data-value*='♣'][data-value],#grid>LI[data-value*='♣'][data-value],#hand>LI[data-value*='♠'][data-value],#spread>LI[data-value*='♠'][data-value],#grid>LI[data-value*='♠'][data-value] { color:#222 } #hand>LI[data-value*='♦'][data-value],#spread>LI[data-value*='♦'][data-value],#grid>LI[data-value*='♦'][data-value],#hand>LI[data-value*='♥'][data-value],#spread>LI[data-value*='♥'][data-value],#grid>LI[data-value*='♥'][data-value] { color:#a00 } #hand>LI[data-value]:before,#spread>LI[data-value]:before,#grid>LI[data-value]:before,#hand>LI[data-value]:after,#spread>LI[data-value]:after,#grid>LI[data-value]:after { content:attr(data-value); text-align:center; width:1em; position:absolute; font-size:1.8em; line-height:.85em; margin-top:4%; margin-left:0 } #hand>LI[data-value]:after,#spread>LI[data-value]:after,#grid>LI[data-value]:after { right:0; bottom:4%; -moz-transform:rotate(180deg); -ms-transform:rotate(180deg); -webkit-transform:rotate(180deg); transform:rotate(180deg) } #hand>LI[data-value]>P,#spread>LI[data-value]>P,#grid>LI[data-value]>P { display:block; width:100%; height:100%; font-size:4rem } #hand>LI[data-value]>P>SPAN:first-child,#spread>LI[data-value]>P>SPAN:first-child,#grid>LI[data-value]>P>SPAN:first-child { display:none } #hand>LI[data-value^='A'][data-value]>P,#spread>LI[data-value^='A'][data-value]>P,#grid>LI[data-value^='A'][data-value]>P { width:.65em; height:.65em; line-height:.5em; text-align:center; margin:auto; margin-top:120px } #hand>LI[data-value^='A'][data-value]>P:after,#spread>LI[data-value^='A'][data-value]>P:after,#grid>LI[data-value^='A'][data-value]>P:after { content:"" } #hand>LI[data-value='A ♠'][data-value]>P,#spread>LI[data-value='A ♠'][data-value]>P,#grid>LI[data-value='A ♠'][data-value]>P { margin-top:80px; font-size:10em; text-shadow:-1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff,1px 1px 0 #fff,0 -3px 0 #000,-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000,2px 2px 0 #000 } #hand>LI[data-value^='2'][data-value]>P,#spread>LI[data-value^='2'][data-value]>P,#grid>LI[data-value^='2'][data-value]>P { line-height:.5em; width:.65em; height:.65em; margin-top:30px; margin-left:80px } #hand>LI[data-value^='2'][data-value]>P:after,#spread>LI[data-value^='2'][data-value]>P:after,#grid>LI[data-value^='2'][data-value]>P:after { content:attr(data-suit); display:inline-block; -moz-transform:rotate(180deg); -ms-transform:rotate(180deg); -webkit-transform:rotate(180deg); transform:rotate(180deg); padding-bottom:140px } #hand>LI[data-value^='3'][data-value]>P,#spread>LI[data-value^='3'][data-value]>P,#grid>LI[data-value^='3'][data-value]>P { line-height:.5em; width:.65em; height:.65em; margin-top:30px; margin-left:80px; text-shadow:0 80px 0 } #hand>LI[data-value^='3'][data-value]>P:after,#spread>LI[data-value^='3'][data-value]>P:after,#grid>LI[data-value^='3'][data-value]>P:after { content:attr(data-suit); display:inline-block; -moz-transform:rotate(180deg); -ms-transform:rotate(180deg); -webkit-transform:rotate(180deg); transform:rotate(180deg); padding-bottom:140px; text-shadow:0 80px 0 transparent } #hand>LI[data-value^='4'][data-value]>P,#spread>LI[data-value^='4'][data-value]>P,#grid>LI[data-value^='4'][data-value]>P { line-height:.5em; width:.65em; height:.65em; margin-top:30px; margin-left.........完整代码请登录后点击上方下载按钮下载查看
网友评论0