vb翻牌广告代码代码问题

来源：蜘蛛抓取(WebSpider) 时间：2011-10-20 18:41 标签： vb6.0代码
纯CSS实现3D翻牌效果 - 博客频道 - CSDN.NET
爱前端，乐分享，前端痴王海庆的博客！
分类：案例研究less&sasscss3技术总结
CSS3演武场继续CSS案例研究，今天来看一个纯CSS实现的3D翻牌效果。
简易效果请大家狠戳这里，或。
改进效果请大家戳这里，或。
html部分我们用flip类做翻转的盒子，x和y两个类分别代表垂直翻转和水平翻转。front和back两个div做翻转图像的正面和反面。
&div class=&container&&
&div class=&flip X&&
&div class=&front& data-text=&Gongfu panda&&&/div&
&div class=&back& data-text=&Toy story&&&/div&
&div class=&flip Y&&
&div class=&front& data-text=&Gongfu panda&&&/div&
&div class=&back& data-text=&Toy story&&&/div&
&/div&嗯，接下来看看CSS，首先我们需要布局好元素
/* 顶部的盒子 */
.container{
width:1320
/* 翻转类样式 */
height: 320
/* 前后两个类的共同样式 */
.flip div{
width: 100%;
height: 100%;
box-shadow: 2px 2px 20px rgba(0,0,0,.5);
/* 提示文本利用：before伪对象到位 */
.flip div:before{
content:attr(data-text);
width:100%;
line-height:30
text-align:
background-color:rgba(0,0,0,.3);
/* 分别设置前后两个类的背景图像，垂直位置 */
.flip div.front{
background: url(/uploads/media/3yiC6Yq.jpg);
z-index: 1;
.flip div.back{
background: url(/uploads/media/40Ly3VB.jpg);
z-index: 2;
}然后我们需要让flip响应hover事件，添加transform和transition/* 翻转类样式 */
/*其他代码略*/
/* 设置景深 */
perspective: 1000
/* 前后两个类的共同样式 */
.flip div{
/*其他代码略*/
transition: all 1
transform-style: preserve-3d;
backface-visibility:
/* hover之后的垂直位置 */
.flip:hover div.front{ z-index: 2;;}
.flip:hover div.back{ z-index: 1;;}/
* rotateY的响应 */
.Y div.back{ transform:rotateY(180deg);}
.Y:hover div.front{ transform:rotateY(180deg);}
.Y:hover div.back{ transform:rotateY(0deg);}
/* rotateX的响应 */
.X div.back{ transform:rotateX(180deg);}
.X:hover div.front{ transform:rotateX(180deg);}
.X:hover div.back{ transform:rotateX(0deg);}
好的，简易效果完工！接下来我们实现slider，单击播放下一个图像，到这里看。这个效果用了input单选框来实现单击事件。&div class=&gallery&&
&input type=&radio& name=&images& id=&p1& checked=&checked& /&
&input type=&radio& name=&images& id=&p2& /&
&input type=&radio& name=&images& id=&p3& /&
&input type=&radio& name=&images& id=&p4& /&
&input type=&radio& name=&images& id=&p5& /&
&div class=&container&&
&div class=&front&&&/div&
&div class=&back&&&/div&
&label for=&p1&&&/label&
&label for=&p2&&&/label&
&label for=&p3&&&/label&
&label for=&p4&&&/label&
&label for=&p5&&&/label&
&/div&CSS部分也要改进下。
.gallery {
.gallery input {
.container {
height:640
transition: 1.5s ease-in-
.container div {
height:320
transition: 1.5s ease-in-
border:1px solid #888;
backface-visibility:
-webkit-perspective: 1200
.container div.front {
transform: rotateY(180deg);
.container div.back {
transform: rotateY(0deg);
.container label {
height:320
input:nth-of-type(2n):checked ~ .container div.front {
transform: rotateY(0deg);
input:nth-of-type(2n+1):checked ~ .container div.front {
transform: rotateY(180deg);
input:nth-of-type(2n):checked ~ .container div.back {
transform: rotateY(-179.9deg);
input:nth-of-type(2n+1):checked ~ .container div.back {
transform: rotateY(0deg);
#p1:checked ~ .container label:nth-of-type(2) {
#p1:checked ~ .container div.front {
background:url(/uploads/media/8k3N3EL.jpg);
#p1:checked ~ .container div.back {
background:url(/uploads/media/3yiC6Yq.jpg);
#p2:checked ~ .container label:nth-of-type(3) {
#p2:checked ~ .container div.front {
background:url(/uploads/media/40Ly3VB.jpg);
#p2:checked ~ .container div.back {
background:url(/uploads/media/8k3N3EL.jpg);
#p3:checked ~ .container label:nth-of-type(4) {
#p3:checked ~ .container div.front {
background:url(/uploads/media/40Ly3VB.jpg);
#p3:checked ~ .container div.back {
background:url(/uploads/media/00kih8g.jpg);
#p4:checked ~ .container label:nth-of-type(5) {
#p4:checked ~ .container div.front {
background:url(/uploads/media/2rT2vdx.jpg);
#p4:checked ~ .container div.back {
background:url(/uploads/media/00kih8g.jpg);
#p5:checked ~ .container label:nth-of-type(1) {
#p5:checked ~ .container div.front {
background:url(/uploads/media/2rT2vdx.jpg);
#p5:checked ~ .container div.back {
background:url(/uploads/media/8k3N3EL.jpg);
---------------------------------------------------------------
，关注web前端开发技术，分享网页相关资源。
---------------------------------------------------------------
排名：第1071名
微信：whqzptc
（20）（79）（31）（37）（9）（18）（42）（59）（28）（12）（10）（66）（12）（21）（52）（7）（3）（4）（10）翻牌_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
上传于||暂无简介
阅读已结束，如果下载本文需要使用0下载券
想免费下载更多文档？
定制HR最喜欢的简历
你可能喜欢增值电信业务经营许可证:苏B2-CopyRight ©
All Rights reserved.传智播客旗下品牌：& & | && | &
改变中国IT教育，我们正在行动 &&&&全国咨询热线：400-618-4000
全国校区 
传智播客官方微信
黑马程序员官方微信
400-618-4000

我要回帖

更多关于 vb6.0代码 的文章

 

随机推荐