纯css扑克发牌散牌效果
代码语言:html
所属分类:动画
代码描述:纯css扑克发牌散牌效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> p { text-align: center; font-size: 11px; } ul#fan-out { width: 100%; height: 400px; position: relative; background-color: #555; background-position: top left; background-repeat: no-repeat; margin: 0; padding: 0; list-style: none; } ul#fan-out li { width: 148px; height: 210px; background: url(http://repo.bfw.wiki/bfwrepo/image/5eedcf7ac1626.png); background-position: center; border-radius: 10px; position: absolute; top: 75px; left: 50%; margin: 0 0 0 -60px; -webkit-transform-origin: 50% 300px; -moz-transform-origin: 50% 300px; -ms-transform-origin: 50% 300px; -o-transform-origin: 50% 300px; transform-origin: 50% 300px; /* Safari and Chrome */ box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1); -webkit-transform: rotate(-40deg); -moz-transform: rotate(-40deg); -ms-transform: rotate(-40deg); -o-transform: rotate(-40deg); transform: rotate(-40deg); -webkit-transition: 0.5s all ease-in-out; -moz-transition: 0.5s all ease-in-out; transition: 0.5s all ease-in-out; } ul#fan-out li:last-of-type { cursor: pointer; } ul#fan-out.active li { box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.5); } ul#fan-out.active li:nth-of-type(2) { -webkit-transform: rotate(-30deg); -ms-transform: rotate(-30deg); transform: rotate(-30deg); } ul#fan-out.active li:nth-of-type(3) { -webkit-transform: rotate(-20deg); -ms-transform: rotate(-20deg); trans.........完整代码请登录后点击上方下载按钮下载查看
网友评论0