200字范文 > html背景图片动效 css3实现点击切换背景图片并且背景图片实现动画效果

html背景图片动效 css3实现点击切换背景图片并且背景图片实现动画效果

时间：2020-03-12 03:51:25

个人认为这是一个很不错的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);}