css实现扑克牌点击三维翻转动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现扑克牌点击三维翻转动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { background-color: #ececec; transform-style: preserve-3d; perspective: 2000px; display: flex; justify-content: center; } label .cardWrapper { position: relative; height: 40vmin; width: calc(40vmin / 1.4); background-color: royalblue; background-image: repeating-linear-gradient( 120deg, rgba(255, 0, 0, 0.5), rgba(255, 0, 0, 0.5) 1px, transparent 1px, transparent 60px ), repeating-linear-gradient( 60deg, rgba(255, 0, 0, 0.5), rgba(255, 0, 0, 0.5) 1px, transparent 1px, transparent 60px ), linear-gradient( 60deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1) ), linear-gradient( 120deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1) ); background-size: 70px 120px; margin: calc(40vmin / 10); border-radius: calc(40vmin / 20); box-shadow: 0 calc(40vmin / 40) calc(40vmin / 10) 0 rgba(0, 0, 0, 0.2); overflow: hidden; float: left; transition: transform 200ms linear, box-shadow 100ms linear; transform: rotateY(0deg); } input:checked + label .cardWrapper { transform: rotateY(180deg); } .cardRandom { width: 100%; height: 100%; background-color: white; opacity: 1; cursor: pointer; transition: opacity 1ms linear 100ms; } .cardWrapper:hover.........完整代码请登录后点击上方下载按钮下载查看
网友评论0