H5+C3实现超炫酷图品切换效果

我们如何使用目前学到的知识做出一张炫酷的图片切换效果惊呆小伙伴呢

注：本文知识本人一些学习心得，适合让入门的小白一起练习和尝试

下面是效果图：

我们在给中间的图片增加我们需要选择切换图片的小图，当我们点击这些小图时，切换我们的背景图片达到我们完成切换图片的目的。

HTML结构：

代码部分：方便大家取用

2.CSS部分

代码部分

*{
           /*清除两边距离*/
margin:0;
padding:0;
}
img{
           /*转化为块元素*/
display: block;
}
li{
list-style: none;
}
html,body{
height:100%;
}
.box{
width:100%;
height:100%;
}
.box img{
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
}
.box > img:first-child{
z-index:1;
}
.btn{
width:950px;
height:170px;
position:fixed;
top:0;
lefT:0;
bottom:0;
right:0;
margin:auto;
z-index:1;
}
.btn li{
width:150px;
height:150px;
border:10px solid #fff;
float:left;
margin:0 10px;
border-radius: 50%;
}
.btn li:nth-child(1){
background:url(images/sbg1.jpg) no-repeat center;
}
.btn li:nth-child(2){
background:url(images/sbg2.jpg) no-repeat center;
}
.btn li:nth-child(3){
background:url(images/sbg3.jpg) no-repeat center;
}
.btn li:nth-child(4){
background:url(images/sbg4.jpg) no-repeat center;
}
.btn li:nth-child(5){
background:url(images/sbg5.jpg) no-repeat center;
}
.btn li a{
display:block;
width:150px;
height:150px;
background:rgba(0,0,0,0.5);
border-radius: 50%;
}
.btn li:hover a{
background:rgba(0,0,0,0);
           transition: all 1s ease;
}
.box > img:target{
z-index:1;
}

通过上述代码就可以实现我们超炫酷的css点击切换图片的效果了，需要的小伙伴可以复制自取。

H5+C3实现超炫酷图品切换效果相关推荐

html翻页特效实现原理,CSS3实现超炫3D翻书效果（二）
上回书,我们已经简单实现如何翻一页.好,现在我们复习一下.翻书效果的基本原理,请看下html布局: 简单再次说明下:box为大盒子,主要提供显示区域的左部分:page为要翻转的页面,其包含正面(fro ...
Planetary.js：帮助你构建超炫的互动球体效果
Planetary.js 是一个 JavaScript 库,用于构建互动球体效果.它使用 D3 和 TopoJSON 解析和渲染地理数据.Planetary.js 采用了基于插件的架构,即使是默认的功 ...
html炫酷在线,小伙伴们都会惊呆的10个超炫的HTML5+CSS3效果作品
在CodePen(CodePen 是一个在线的 HTML.CSS 和 JavaScript 代码编辑器,能够编写代码并即时预览效果)上看到许多非常炫的html+css3效果示例.这些炫酷的技术真是让我 ...
ScrollReveal.js – 帮助你实现超炫的元素运动效果
ScrollReveal.js 用于创建和管理元素进入可视区域时的动画效果,帮助你的网站增加吸引力.只需要给元素增加 data-scrollreveal 属性,当元素进入可视区域的时候会自动被触发设置 ...
简直要逆天！超炫的 HTML5 粒子效果进度条
我喜欢粒子效果作品,特别是那些能够应用于实际的,例如这个由 Jack Rugile 基于 HTML5 Cavnas 编写的进度条效果.看着这么炫的 Loading 效果,即使让我多等一会也无妨:)你呢 ...
赞！超炫的页面切换动画效果【附源码下载】
在下面的示例中罗列了一组动画,可以被应用到页面切换过程中,创造出很有趣的导航效果.虽然有些效果都非常简单,只是简单的滑动动作,但另外的一些则是利用了视角(Perspective)和 3D 转换(3D ...
PPT2019完成炫酷的切换效果
如何用PPT做一个这样的切换效果↓ 是不是看起来很炫酷~首先,需要下载一个PPT2019或者365的,带有平滑效果的才行.接下来看怎么做的. 1 找素材这里我们已经在百度上找个两个素材 2 预处理 ...
纯CSS3实现超酷幻灯片图文切换效果
纯CSS3实现绚丽焦点图切换效果,这是一款纯CSS3实现的焦点图插件,焦点图设计十分清新简单,图片滑动特别流畅,是一款值得一用的CSS3焦点图.切换点通过表单radio来实现,通过radio的chec ...
超炫的html5擦除效果,超炫html5效果代码(需浏览器支持)
64y=(R-r)*S(t)-D*S(q)+(B+(Y-B)*(i/25));? 65i f(a){//d r a w o n c e t w o p o i n t s a r e s e t? 6 ...

H5+C3实现超炫酷图品切换效果

H5+C3实现超炫酷图品切换效果相关推荐

最新文章

热门文章