【笔记】利用css3特性实现扑克效果

来源：互联网发布：易建联发展联盟数据编辑：程序博客网时间：2024/04/30 14:12

效果图

初始状态

鼠标滑到上面时

html文件：

<html><head><title>HTML5 AND CSS3</title><link rel="stylesheet" type="text/css" href="style.css"></head><body ><div class="header">利用CSS3特性实现扑克效果</div><div class="contain"><div class="book book0">8</div><div class="book book1">9</div><div class="book book2">10</div><div class="book book3">J</div><div class="book book4">Q</div><div class="book book5">K</div></div></body></html>

css文件：

.header{width: 800px;height: 100px;padding-top:50px;font-size:25px;margin: auto;text-align: center;}.contain{position: relative;top: 200px;left: 50%;width: 350px;height: 220px;margin-left: -175px;}.book{position: absolute;width: 119px;height: 159px;padding: 5px;border-radius: 5px;box-shadow: 3px 4px 17px #555;transition: all 1s;-webkit-transition: all 1s;}.book0 {left: 0;top: 0;transform: rotate(0deg);-webkit-transform: rotate(0deg);background: #ff4c8e;}.book1 {left: 0;top: 0;transform: rotate(0deg);-webkit-transform: rotate(0deg);background: #f4a60e;}.book2 {left: 0;top: 0;background: #99bc2c;}.book3 {left: 0;top: 0;transform: rotate(0deg);-webkit-transform: rotate(0deg);background: #44c1f1;}.book4 {left: 0;top: 0;transform: rotate(0deg);-webkit-transform: rotate(0deg);background: #8f71ad;}.book5 {left: 0;top: 0;transform: rotate(0deg);-webkit-transform: rotate(0deg);background: #fefefe;}.contain:hover .book0{left: 0;top: 0;transform: rotate(-21deg);-webkit-transform: rotate(-21deg);transition: all 1s;-webkit-transition: all 1s;}.contain:hover .book1{left: 40;top: -10;transform: rotate(-9deg);-webkit-transform: rotate(-9deg);transition: all 1s;-webkit-transition: all 1s;}.contain:hover .book2{left: 80;top: -10;transform: rotate(0deg);-webkit-transform: rotate(0deg);transition: all 1s;-webkit-transition: all 1s;}.contain:hover .book3{left: 120;top: 0;transform: rotate(11deg);-webkit-transform: rotate(11deg);transition: all 1s;-webkit-transition: all 1s;}.contain:hover .book4{left: 160;top: 15;transform: rotate(19deg);-webkit-transform: rotate(19deg);transition: all 1s;-webkit-transition: all 1s;}.contain:hover .book5{left: 186;top: 27;transform: rotate(35deg);-webkit-transform: rotate(35deg);transition: all 1s;-webkit-transition: all 1s;}

参考博客点击访问梁成妹的博客

0 0