Community Learn Tools Library Leisure

English

Home > Web Front-end > JS Tutorial > Pure CSS to achieve poker effect_Layout and layers

Pure CSS to achieve poker effect_Layout and layers

WBOY

Release： 2016-05-16 18:19:26

Original

1706 people have browsed it

This can also be achieved using CSS! For the convenience of demonstration, JavaScript code is used here to control the switching of playing cards, which is quite good.

<meta http-equiv="content-type" content="text/html; charset=utf-8"> 
<title>Playing Cards with CSS3!</title> 
<style type="text/css"> 
body { background: #DDDDDD; overflow: hidden; } 
body .fire { color: #FF0000; } 
p { 
background: #FFFFFF; border: 1px solid #CCCCCC; 
border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 
box-shadow: 5px 5px 5px #CCCCCC; -webkit-box-shadow: 5px 5px #CCCCCC; -moz-box-shadow: 5px 5px #CCCCCC; 
filter: progid:DXImageTransform.Microsoft.Shadow(color='#CCCCCC', Direction=135, Strength=5); 
font-size: 25px; text-align: center; 
height: 30px; width: 600px; margin: -35px -300px; padding: 10px 15px; position: absolute; bottom: 50px; left: 50%; z-index: 99; 
} 
ul { 
background: #FFFFFF; border: 1px solid #CCCCCC; 
background:-moz-linear-gradient(top, #FFFFFF, #DDDDDD); background:-webkit-gradient(linear,0 0, 0 100%, from(#FFFFFF), to(#DDDDDD)); 
border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 
box-shadow: 5px 5px 5px #CCCCCC; -webkit-box-shadow: 5px 5px #CCCCCC; -moz-box-shadow: 5px 5px #CCCCCC; 
filter: progid:DXImageTransform.Microsoft.Shadow(color='#CCCCCC', Direction=135, Strength=5); 
font-size: 50px; 
margin: 0; padding: 0 15px; position: absolute; right: 20px; top: 15px; z-index: 99; 
} 
ul li { 
display: inline; 
list-style-type: none; 
} 
ul li a { 
color: #000000; 
display: block; float: left; padding: 0 10px; 
text-decoration: none; 
} 
.base { 
background: #FFFFFF; border: 1px solid #CCCCCC; color: #000000; 
background:-moz-linear-gradient(top, #FFFFFF, #DDDDDD); background:-webkit-gradient(linear,0 0, 0 100%, from(#FFFFFF), to(#DDDDDD)); 
border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 
box-shadow: 5px 5px 5px #CCCCCC; -webkit-box-shadow: 5px 5px #CCCCCC; -moz-box-shadow: 5px 5px #CCCCCC; 
filter: progid:DXImageTransform.Microsoft.Shadow(color='#CCCCCC', Direction=135, Strength=5); 
height: 360px; top: 50%; margin-top: -180px; width: 260px; left: 50%; margin-left: -130px; z-index: 9; 
cursor: pointer; font-size: 50px; text-decoration: none; 
padding: 15px 0 0 25px; position: absolute; 
} 
strong { 
font-size: 250px; 
position: absolute; left: 50%; top: 50%; margin-top: -160px; 
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.4)), to(rgba(0,0,0,1))); 
} 
em { 
font-size: 40px; font-style: normal; 
display: block; margin-bottom: -15px; 
} 
label span { 
-webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -o-transform: rotate(-180deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); 
position: absolute; bottom: 15px; right: 25px; 
} 
#spades strong { margin-left: -68px; } #spades em { margin-left: 0; } 
#hearts strong { margin-left: -70px; } #hearts em { margin-left: 1px; } 
#clubs strong { margin-left: -80px; } #clubs em { margin-left: 3px; } 
#diamonds strong { margin-left: -60px; } #diamonds em { margin-left: -2px; } 
fieldset { display: none; } 
fieldset:target { display: block; } 
fieldset:target .card label { -webkit-animation-name: scaler; -webkit-animation-duration: 1.75s; -webkit-animation-iteration-count: 1; } 
fieldset:target .card:checked label { -webkit-animation-name: effectx; -webkit-animation-duration: 3s; -webkit-transform: scale(0); } 
.close { 
background: #DDDDDD; cursor: default; 
left: 0; top: 0; position: absolute; height: 100%; width: 100%; z-index: 1; 
text-indent: -999em; 
} 
@-webkit-keyframes scaler { from { -webkit-transform: scale(0); } to { -webkit-transform: scale(1); } } 
@-webkit-keyframes effectx { 
from { -webkit-transform: rotateX(0deg); } 
to { -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateX(-90deg) translateZ(500px) rotate(180deg); -webkit-animation-duration: 30s; } 
}</style>

<ul>
<li>
<a title="Select Spades" href="#spades"></a>♠</li>
<li>
<a class="fire" title="Select Hearts" href="#hearts"></a>♥</li>
<li>
<a title="Select Clubs" href="#clubs"></a>♣</li>
<li>
<a class="fire" title="Select Diamonds" href="#diamonds"></a>♦</li>
</ul>
<form action="">
<fieldset id="spades">
<input class="card" id="spade" type="radio" name="spade" value="spade"><label class="base" for="spade" title="This is the Ace of Spades!"><span><em></em>A</span>♠<strong></strong>♠<em></em>A</label>♠<input id="cancel1" type="reset" name="spade" value="cancel" checked><label class="close" for="cancel1"></label>Spades</fieldset>
<fieldset id="hearts">
<input class="card" id="heart" type="radio" name="heart" value="heart"><label class="base fire" for="heart" title="This is the Ace of Hearts!"><span><em></em>A</span>♥<strong></strong>♥<em></em>A</label>♥<input id="cancel2" type="reset" name="heart" value="cancel" checked><label class="close" for="cancel2"></label>Hearts</fieldset>
<fieldset id="clubs">
<input class="card" id="club" type="radio" name="club" value="club"><label class="base" for="club" title="This is the Ace of Clubs!"><span><em></em>A</span>♣<strong></strong>♣<em></em>A</label>♣<input id="cancel3" type="reset" name="club" value="cancel" checked><label class="close" for="cancel3"></label>Clubs</fieldset>
<fieldset id="diamonds">
<input class="card" id="diamond" type="radio" name="diamond" value="diamond"><label class="base fire" for="diamond" title="This is the Ace of Diamonds!"><span><em></em>A</span>♦<strong></strong>♦<em></em>A</label>♦<input id="cancel4" type="reset" name="diamond" value="cancel" checked><label class="close" for="cancel4"></label>Diamonds</fieldset>
</form>
<p>
</p>Select an option above to change the suit displayed!

[Ctrl A select all Note: If you need to introduce external Js, you need to refresh to execute

]

Related labels：

css

source：php.cn

Previous article：Set style information through DOM script_javascript skills Next article：Based on jquery imitating Baidu's mouse movement into the picture jitter effect_jquery

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Latest Articles by Author

What is a NullPointerException, and how do I fix it?

2024-10-22 09:46:29
From Novice to Coder: Your Journey Begins with C Fundamentals

2024-10-13 13:53:41
Unlocking Web Development with PHP: A Beginner's Guide

2024-10-12 12:15:51
Demystifying C: A Clear and Simple Path for New Programmers

2024-10-11 22:47:31
Unlock Your Coding Potential: C Programming for Absolute Beginners

2024-10-11 19:36:51
Unleash Your Inner Programmer: C for Absolute Beginners

2024-10-11 15:50:41
Automate Your Life with C: Scripts and Tools for Beginners

2024-10-11 15:07:41
PHP Made Easy: Your First Steps in Web Development

2024-10-11 14:21:21
Build Anything with Python: A Beginner's Guide to Unleashing Your Creativity

2024-10-11 12:59:11
The Key to Coding: Unlocking the Power of Python for Beginners

2024-10-11 12:17:31

Latest Issues

Where is the courseware about CSS mind mapping? Courseware

From 2024-04-16 10:10:18

0

0

1335

The page suddenly cannot pull css or bootstrap So I'm developing a page, I did part of it yesterday and it worked great, and today I cont...

From 2024-04-06 21:58:04

0

1

800

Dynamically modify inline CSS styles in Javafx I'm trying to change the background image of a pane when the application is maximized. My ...

From 2024-04-06 20:57:16

0

1

487

How to make floated elements stack vertically instead of horizontally in CSS? I'm trying to make a webpage with two columns, with main content on one side and additiona...

From 2024-04-06 20:45:26

0

2

386

Is there a way to force the text in the flexbox to be vertically centered, no matter what other CSS code we have? I have the following CSS code that is part of a larger CSS code used in a website I'm deve...

From 2024-04-06 20:41:51

0

1

518

Related Topics

More>

Popular Recommendations

Popular Tutorials

More>

Related Tutorials

Popular Recommendations

Latest courses

Latest Downloads

More>

Web Effects

Website Source Code

Website Materials

Front End Template