发牌与收牌动画效果
代码语言:html
所属分类:动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Card Shuffle Animation</title> <link rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/normalize.min.css" /> <style> body { padding: 10px; overflow: hidden; } .buttons { margin: 20px 0; display: flex; align-items: center; justify-content: center; } .buttons button { border: none; border-radius: 5px; padding: 10px 15px; font-size: 18px; color: #444; background-image: linear-gradient(totop,#d299c2 0%, #fef9d7 100%); cursor: pointer; margin-right: 10px; } .cards { position: relative; max-width: 870px; margin: 0 auto; width: 100%; height: 75vh; } .cards ul { display: flex; flex-wrap: wrap; width: 100%; height: 100%; position: relative; list-style: none; } li.card { width: 150px; height: 150px; background-image: linear-gradient(120deg, #fdfbfb 0%, #ddd 100%); border-radius: 10px; margin: 20px; position: absolute; top: 0px; right: 20px; transition: all 0.9s cubic-bezier(0.68, -0.55, 0.265, 1.5); } li.card.card0 { right: calc(100% - (150px + 40px)); bottom: 0px; background-color: #008000; } li.card.card1 { right: calc(100% - (300px + 60px)); bottom: 0; } li.card.card2 { right: calc(100% - (450px + 80px)); bottom: 0; } li.card.card3 { right: calc(100% - (600px + 100px)); bottom: 0; } li.card.card4 { right: calc(100% - (750px + 120px)); bottom: 0; } li.card.card5 { right: calc(100% - (150px + 40px)); bottom: 0; top: 170px; } .........完整代码请登录后点击上方下载按钮下载查看
网友评论0