图片做提交按钮,动手练一练,用 CSS Checkbox Hack 技术制作一个响应式图片幻灯..."/>
s1html用图片做提交按钮,动手练一练,用 CSS Checkbox Hack 技术制作一个响应式图片幻灯...
大家好,今天我们将一起学习下如何从零开始创建一个具有缩略图功能的响应式图片幻灯。这个案例我们无需编写任何 JavaScript 代码,这里主要运用了 CSS checkbox hack 的技术进行实现。这个案例除了运用 CSS checkbox hack 技术之外,还运用了复杂的CSS选择器、以及 flex box 和 Grid 布局的相关特性。一、 首先看看幻灯的效果展示
如视频所示,一个功能还算完备的漂亮图片幻灯组件。
二、创建 HTML 结构
1、首先我们准备3张图片素材。
2、接下来我们新建3个radio按钮,通过name属性进行关联分组。input type id name checked
input type id name
input type id name
3、然后我们创建 .featured-wrapper 和 .thumb-list 两个容器,放置内容元素。3.1、.featured-wrapper 元素包含3个列表:1、一个大图列表,一次只能显示一个图片2、一组箭头列表,用于大图切换3、一组圆圈列表,用于大图切换这里我们使用label标签技巧与radio表单进行对应代替JS点击事件,同一个 radio 可以关联多个与之对应的 label 标签。
3.2、.thumb-list 容器包含一组图片缩略图,与大图对应,用于切换大图。
总而言之,我们说了这么多,我们可以通过箭头、圈圈、缩略图进行幻灯大图的切换,整体的 HTML 结构如下图所示:
基于上图所示,最终完成的 HTML 代码结构如下:div
div
ul
li
figure
img src alt
figure
li
other two list items here
ul
ul
li
label label
li
li
label label
li
li
label label
li
ul
ul
li
label label
li
li
label label
li
li
label label
li
ul
div
ul
li
label
img src alt
span
span span
span
label
li
other two list items here
ul
div三、定义样式
1、将 radio 按钮移除至屏幕外,示例代码如下:inputtype
position absolute
bottom
left 9999px这里你会注意到,我使用了bottom: 0,主要为了防止每次点击标签时,浏览器跳至页面顶部。虽然不是最佳实践,但是这个方法对本案例有效,还有一个更好的做法,我们可以设置display: none,但是不符合键盘可访问性(accessibility)的标准,这里还是推荐 bottom: 0;
2、定义最外层 container 容器的样式,设置最大宽度以及让其水平居中container
maxwidth 450px
padding 20px
margin auto
3、定义大图列表样式为了只显示一张大图,其他图片将会被盖住并且隐藏,你可能最先想到的是改变文档正常流,使用position属性进行定位的方法进行隐藏,这里你需要注意图片的宽高比,通常使用固定高度的解决方案,在这个案例中,我们使用CSS的Grid新布局,将图片放置在1行1列的单元网格中,示例如下图所示:
与上图对应的CSS代码如下:featuredwrapper featuredlist
display grid
featuredwrapper featuredlist li
gridcolumn
gridrow
opacity
transition opacity 25s
4、定义小圆圈样式
我们需要将小圆圈定位在 .featured-wrapper 容器底部,点击相应圆圈进行切换大图:
相应的CSS代码如下所示:featuredwrapper
position relative
featuredwrapper dots
position absolute
bottom 10px
left
transform
display flex
featuredwrapper dots lilastchild
marginright 8px
featuredwrapper dots label
display inlineblock
width 12px
height 12px
borderradius
border 1px solid white
transition background 25s
featuredwrapper dots labelhover
background currentColor
5、定义箭头样式接下来我们继续定义箭头切换的样式,我们将其放置在.featured-wrapper容器,如下图所示:
这里需要注意的是,这些箭头与 radio 按钮一一对应关联,这里我们用到了::before 和 ::after伪元素创建圆形元素,示例代码如下:featuredwrapper arrows labelbefore
featuredwrapper arrows labelafter
position absolute
top
transform
width 40px
height 40px
borderradius
color black
backgroundposition center
backgroundrepeat norepeat
backgroundsize 24px 24px
backgroundcolor white
opacity
transition opacity 25s
featuredwrapper arrows labelbefore
left 10px
featuredwrapper arrows labelafter
right 10px
6、定义缩略图元素样式每个缩略图占据父容器的三分之一,如下图所示:
在这里,为了将图片标题放置在图片之上,我们用的不是传统的CSS定位,这里我们应用了CSS Grid技巧。
我们将每个缩略图变成单一网格(一行一列),并使用grid水平垂直居中的技巧place-items: center让文本垂直居中,相关代码如下所示:thumblist
display grid
gridtemplatecolumns 1fr
gridcolumngap 20px
margintop 20px
thumblist label
display grid
thumblist img
thumblist outer
gridcolumn
gridrow
thumblist outer
display grid
placeitems center
transition background 25s
thumblist inner
fontsize 18px
opacity
transform 20px
transition all 25s四、使用 Checkbox Hack 切换图片
接下来是本案例的核心,也是最有趣的地方,我们使用 checkbox hack 的技术模拟JS的点击事件。每次点击缩略图,相应的箭头和圆圈都会处于活动状态:相应的幻灯片大图可见
对应的圆圈背景变成白色
缩略图对应的文字标题将会显示
箭头导航将会更新对应相关 上个图片/ 下个图片 的链接
基于以上需求最终完成的CSS代码如下:idchecked container featuredlist linth
idchecked container featuredlist linth
idchecked container featuredlist linth
idchecked container arrows hoverbefore
idchecked container arrows hoverafter
opacity
idchecked container arrows before
idchecked container arrows before
idchecked container arrows before
content ’’
backgroundimage arrowprevslideshowsvg
idchecked container arrows after
idchecked container arrows after
idchecked container arrows after
content ’’
backgroundimage arrownextslideshowsvg
idchecked container dots
idchecked container dots
idchecked container dots
background currentColor
idchecked container outer
idchecked container outer
idchecked container outer
background overlay
idchecked container inner
idchecked container inner
idchecked container inner
opacity
transform none五、源码及效果展示
最终的效果体验,大家可以点击原文链接进行体验,由于文章篇幅有限,完整的源码大家可以点击下方链接进行获取。
链接:
密码:u28s小节
到此我们完成了本案例,通过本案例,我相信你对 CSS checkbox hack 技术有了更清楚的认识,希望你能够适应这项技术,并将其运用到自己的项目中。
更多推荐
s1html用图片做提交按钮,动手练一练,用 CSS Checkbox Hack 技术制作一个响应式图片幻灯...
发布评论