扑克花色

起个网名好难 发表于 2023-3-14 15:57

本帖最后由起个网名好难于 2023-3-14 15:55 编辑 <br /><br /><style>
.heart_wrapper{
   position: absolute;
   top: 100px;
   left: 100px;
}
.heart{
   width: 50px;
   height: 50px;
   background-color: red;
   position: relative;
   transform: rotate(45deg);
animation: heartbeat .8s infinite alternate;
filter: drop-shadow(0px 0px 10px gray);
}
.heart::before,.heart::after{
   content: "";
   width: 50px;
   height: 50px;
   background-color: red;
   position: absolute;
   border-radius: 50%;
}
.heart::before{
   left: -30px;
}
.heart::after{
   top: -30px;
}

.diamond_wrapper{
   position: absolute;
   top: 165px;
   left:280px;
}
.diamond{
   width: 0;
   height: 0;
   border: 50px solid transparent;
   border-bottom:60px solid red;
   position: relative;
animation: dbeat .85s infinite alternate;
filter: drop-shadow(0px 0px 10px gray);
}

.diamond::after{
   content: "";
   position: absolute;
   left: -50px;
   top: 60px;
   width: 0;
   height: 0;
   border: 50px solid transparent;
   border-top:60px solid red;
}

/* 外层容器 */
.shape_wrapper{
   margin-top:90px;
position:absolute;
left:300px;
top:0px;
}
/* 1先画一个正方形 */
.shape{
   width: 50px;
   height: 50px;
   transform: rotate(135deg);
   background-color: #000;
   display: inline-block;
   margin: 0 10px;
   position: relative;
animation: sbeat .83s infinite alternate;
filter: drop-shadow(0px 0px 10px gray);
}
/* 2 画两个偏移的圆通过伪元素创建 */
.shape:before,.shape:after{
   content:"";
   border-radius: 50%;
   height:50px;
   width: 50px;
   background:black;
   position: absolute;
}
.shape:before{
   top:-25px;
   left:0;
}
.shape:after{
   left:25px;
   top:0;
}
/* 3 画小尾巴通过border创建 */
.tale{
   position:absolute;
   bottom: 46px;
   right: -10px;
   background: transparent;
   width:0;
   height:0;
   border-left: 4px solid transparent;
   border-right: 4px solid transparent;
   border-top: 20px solid black;
   transform: rotate(45deg);
}

/* 外层容器 */
.Club{
   width: 50px;
   height: 50px;
   background: black;
   border-radius: 50px;
   position: absolute;
   left: 63px;
   z-index: 100;
animation: dbeat .86s infinite alternate;
}

.Club:before{
   content: "";
   width: 100%;
   height: 100%;
   background: black;
   border-radius: 50px;
   position: absolute;
   left: -45%;
   top: 70%;
   z-index: 100;
}
.Club:after{
   content: "";
   width: 100%;
   height: 100%;
   background: black;
   border-radius: 50px;
   position: absolute;
   left: 45%;
   top: 70%;
   z-index: 100;
}

.base{
   background: none repeat scroll 0 0 black;
   height: 40px;
   width: 80px;

   position: absolute;
   left:-47px;
   top: 55px;
   z-index: 0;
}
.base::before{
   width: 0px;
   height: 10px;
   position: absolute;
   left: 0;
   content: "";
   border-left: 35px solid white;
   border-right: 35px solid white;
   border-top: 15px solid white;
   border-bottom: 35px solid white;
   border-top-left-radius: 0px;
   border-top-right-radius: 0px;
   border-bottom-left-radius: 0px;
   border-bottom-right-radius: 35px;
}
.base::after{
   width: 0px;
   height: 10px;
   position: absolute;
   left: 75px;
   content: "";
   border-left: 35px solid white;
   border-right: 35px solid white;
   border-top: 15px solid white;
   border-bottom: 35px solid white;
   border-top-left-radius: 0px;
   border-top-right-radius: 0px;
   border-bottom-left-radius: 35px;
   border-bottom-right-radius: 0px;
}
.club_wrapper {
position:absolute;
width:100px;
height:100px;
left:37px;
top:240px;
}
@keyframes heartbeat { to { transform: rotate(45deg) scale(0.9); } }
@keyframes dbeat { to { transform: scale(0.9); } }
@keyframes sbeat { to { transform: rotate(135deg) scale(0.9); } }
</style>
<div style="position:relative;background-color:white;width:450px;height:400px;margin:24px auto;">
<div class="heart_wrapper">
<div class="heart"></div>
</div>
<div class="diamond_wrapper">
<div class="diamond"></div>
</div>
<div class="shape_wrapper">
<span class="shape">
<span class="tale"></span>
</span>
</div>
<div class="club_wrapper">
<span class="Club">
<span class="base"></span>
</span>
</div>
</div>

红影发表于 2023-3-14 16:34

用代码画出的扑克牌花色，有意思{:4_187:}

起个网名好难 发表于 2023-3-14 17:34

红影发表于 2023-3-14 16:34
用代码画出的扑克牌花色，有意思

做着玩，也算练习了

马黑黑 发表于 2023-3-14 17:40

玩个桥牌

醉美水芙蓉 发表于 2023-3-14 17:57

起个网名好难 发表于 2023-3-14 18:25

马黑黑发表于 2023-3-14 17:40
玩个桥牌

洋的可玩，土的也可玩{:5_106:}

起个网名好难 发表于 2023-3-14 18:26

醉美水芙蓉发表于 2023-3-14 17:57
很不错的扑克牌!

谢谢支持与鼓励

就是做个练习

红影发表于 2023-3-14 18:48

起个网名好难发表于 2023-3-14 17:34
做着玩，也算练习了

每个都是不一样的画法，不容易{:4_204:}

马黑黑 发表于 2023-3-14 18:56

起个网名好难发表于 2023-3-14 18:25
洋的可玩，土的也可玩

土洋结合吧，斗地主打桥牌

起个网名好难 发表于 2023-3-14 21:39

红影发表于 2023-3-14 18:48
每个都是不一样的画法，不容易

各有各的玩法{:5_117:}

起个网名好难 发表于 2023-3-14 21:40

马黑黑发表于 2023-3-14 18:56
土洋结合吧，斗地主打桥牌

是的是的，玩法多样{:5_117:}

马黑黑 发表于 2023-3-14 21:44

起个网名好难发表于 2023-3-14 21:40
是的是的，玩法多样

{:4_181:}

亦是金 发表于 2023-3-14 21:44

用代码画出的扑克牌花色，欣赏学习中！{:4_191:}

起个网名好难 发表于 2023-3-14 21:58

亦是金发表于 2023-3-14 21:44
用代码画出的扑克牌花色，欣赏学习中！

谢谢支持与欣赏！

起个网名好难 发表于 2023-3-14 22:00

马黑黑发表于 2023-3-14 21:44

http://img.adoutu.com/picture/1538497966591.gif

马黑黑 发表于 2023-3-14 22:04

起个网名好难发表于 2023-3-14 22:00

88

庶民发表于 2023-3-15 06:46

感谢你带给我们的欢乐！
好思维，有创意！

起个网名好难 发表于 2023-3-15 08:00

马黑黑发表于 2023-3-14 22:04
88

https://img95.699pic.com/element/40096/0102.png_860.png

起个网名好难 发表于 2023-3-15 08:00

庶民发表于 2023-3-15 06:46
感谢你带给我们的欢乐！
好思维，有创意！

https://img95.699pic.com/element/40096/0102.png_860.png

马黑黑 发表于 2023-3-15 08:09

起个网名好难发表于 2023-3-15 08:00

早啊

页: [1] 2

花潮论坛's Archiver

扑克花色