您好,欢迎来到jQuery吧!QQ群:193687763(钱端开发)

jQuery吧-Write Less, Do More | 注重前端开发

首页 > CSS > CSS3效果 > 正文

CSS3选项动画切换效果

2015-10-08 10:10:54 作者:天外飞仙 人气:105 Views

CSS3选项动画切换效果
20150913104444
HTML代码

<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> A </em> &#9824; </span> <strong> &#9824; </strong> <em> A </em> &#9824; </label> <input id="cancel1" type="reset" name="spade" value="cancel" checked="checked" /> <label class="close" for="cancel1"> Spades </label> </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> A </em> &#9829; </span> <strong> &#9829; </strong> <em> A </em> &#9829; </label> <input id="cancel2" type="reset" name="heart" value="cancel" checked="checked" /> <label class="close" for="cancel2"> Hearts </label> </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> A </em> &#9827; </span> <strong> &#9827; </strong> <em> A </em> &#9827; </label> <input id="cancel3" type="reset" name="club" value="cancel" checked="checked" /> <label class="close" for="cancel3"> Clubs </label> </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> A </em> &#9830; </span> <strong> &#9830; </strong> <em> A </em> &#9830; </label> <input id="cancel4" type="reset" name="diamond" value="cancel" checked="checked" /> <label class="close" for="cancel4"> Diamonds </label> </fieldset></form>

部分css3代码

#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; } }

下载地址
预览地址

链接:http://www.jqueryba.com/5697.html(转载时请注明本文出处及文章链接)
分类:CSS3效果

jQuery吧-Write Less, Do More | 注重前端开发

jQuery吧-Write Less, Do More | 注重前端开发

Copyright © 2013 jqueryba.com, All Rights Reserved.奔跑在阿里云

免责声明:本站所有内容来源于互联网。如果本站部分内容侵犯您的权益,请您告知,站长会立即处理 苏ICP备12059471号

站内所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!