个人认为这是一个很不错的css3案例哦!又是用DW写的啦
没办法放效果图哦,就简单放个静态图好了,唉,我也觉得好无奈哦
效果图如下:
代码如下:
xmlns="/1999/xhtml">
http-equiv="Content-Type"
content="text/html; charset=utf-8" />
无标题文档
body{ margin:0; height:600px; background:#FCF;}
ul{ margin:0; padding:0; list-style:none; overflow:hidden;}
img{ /*display:block;*/ vertical-align:top; width:100%; position:absolute; left:0; top:0;}
img#img1{ z-index:2;}
img:target{ z-index:3;}
img:not(:target){ z-index:1;}
.buttons{ widows:800px; height:300px; position:fixed; left:50%; bottom:100px; transform:translate(-50%); z-index:9999;}
.buttons ul{ width:800px; height:300px; display:flex;}
.buttons ul li{ position:relative; margin:auto; width:150px; height:150px; float:left; box-sizing:border-box; padding-top:60px; border:3px #FFFFFF solid; border-radius:15px; font:20px/1.2em "微软雅黑"; color:#FFF;
text-align:center; text-shadow:-1px 0 3px rgba(0,0,0,0.6);}
.buttons ul li:nth-of-type(1){ background-image:linear-gradient(to bottom, #dcc8af, #644f56);}
.buttons ul li:nth-of-type(2){ background-image: linear-gradient(to bottom, #b5c8ce, #8f91aa);}
.buttons ul li:nth-of-type(3){ background-image: linear-gradient(to bottom, #fcf6d8, #ab8b90);}
.buttons ul li:nth-of-type(4){ background-image: linear-gradient(to bottom, #fcf6d8, #ab8b90);}
.buttons ul li a{ display:block; width:110px; height:110px; border-radius:50%; border:3px #FFFFFF solid; box-sizing:border-box; position: absolute;
left:50%; top:-70px; transform:translate(-50%); }
.buttons ul li:nth-of-type(1) a{ background-image:url(../../7.4/pm/images/bg1.jpg); background-repeat:no-repeat; background-size:850px; background-position:center; }
.buttons ul li:nth-of-type(2) a{ background-image:url(../../7.4/pm/images/bg2.jpg); background-repeat:no-repeat; background-size:850px; background-position:center; }
.buttons ul li:nth-of-type(3) a{ background-image:url(../../7.4/pm/images/bg3.jpg); background-repeat:no-repeat; background-size:850px; background-position:center; }
.buttons ul li:nth-of-type(4) a{ background-image:url(../../7.4/pm/images/bg4.jpg); background-repeat:no-repeat; background-size:850px; background-position:center; }
#img1:target{ animation:formLeft 1s;}
#img2{ transform:scale(0) rotate(-360deg); transition:all 1s;}
#img2:target{ transform: scale(1) rotate(0); }
#img3{ transform-origin:center; transform:scale(0) rotateY(90deg); transition:all 1s;}
#img3:target{ transform: scale(1) rotateY(360deg); }
#img4:target{ animation: scaleY 1s; }
@keyframes formLeft{
0%{ transform:translateX(-100%) scale(0);}
100%{ transform:translateX(0) scale(1);}
}
@keyframes scaleY{
0%{transform-origin:left top; transform:scale(0) rotate(360deg);}
100%{ transform: scale(1) rotate(0);}
}
.box{ width:100%;}
.box img{ width:100%;}
src="../../7.4/pm/images/bg1.jpg"alt=""
id="img1">
src="../../7.4/pm/images/bg2.jpg"alt=""
id="img2">
src="../../7.4/pm/images/bg3.jpg"alt=""
id="img3">
src="../../7.4/pm/images/bg4.jpg"alt=""
id="img4">
class="buttons">
class="text">哈哈哈
class="text">哈哈哈
class="text">哈哈哈
class="text">哈哈哈