纸牌扑克牌随机翻转显示效果代码
代码语言:html
所属分类:动画
代码描述:纸牌扑克牌随机翻转显示效果代码
下面为部分代码预览,完整代码请点击下载或在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)
);
.........完整代码请登录后点击上方下载按钮下载查看
网友评论0