《前端实战总结》之使用纯css实现网站换肤和焦点图切换动画

时间 2019-12-28

标签前端实战总结使用 css 实现网站焦点切换动画栏目 CSS 繁體版

原文原文链接

今天咱们来继续复盘一些工做中经常使用的css技巧和知识,以便咱们能够更加优雅的用css实现富有动感的网站.javascript

你将收获

网站换肤设计方案介绍
:target伪类介绍和用法以及如何使用css实现网站换肤
transition动画以及如何用纯css实现焦点图动画

效果展现

1.网站换肤 css

2.焦点图动画

实现思路

1.网站换肤

一般咱们实现网站换肤都基于以下方式实现:html

方案一: 使用OOCSS模式,经过js动态切换公共类名来达到换肤效果
方案二: 点击不一样的按钮切换不一样的样式表,以下:
- theme-green.css
- theme-red.css
- theme-black.css
方案三: localStorage存储主题,js动态获取本地存储换肤
方案四: element和antd的动态换肤,须要实时编译style样式表

以上几个方案均可以实现必定程度上的换肤效果,可是若是是一些基础性的换肤,好比网站的背景样式,某个按钮的样式,某块内容区域的样式等等这种局部的换肤,咱们能不能直接用css来实现呢?答案是能够的,接下来咱们就来看纯看css如何实现网站换肤.前端

在实现换肤以前,咱们须要了解一个知识点,那就是a标签的:target伪类.vue

:target伪类

为了辅助标识那些指向文档特定部分连接的目标, CSS3 选择器引入了 :target 伪类. :target 伪类用来指定那些包含片断标识符的 URI 的目标元素样式。java

例如, http://xuxi#home , 这个 URI 包含了 #home 片断标识符。在HTML中, 标识符是元素的id或者name属性,。因为这二者位于相同的命名空间，所以，这个示例 URI 指向的是文档顶层的 "home" 。node

假设你想修改 URI 指向的任何 div 元素，可是又不想把样式应用到任何其它同类型的元素，那么咱们能够这么写：jquery

<style> div:target { background: #06c; } </style>
<a href="#home" >蓝</a>
<div id="bg1"></div>
复制代码

此时当咱们点击a标签时,会命中:target的元素,这个时候会将div的背景色设置为蓝色,即#06c.webpack

了解这个伪类以后,咱们的网站换肤就很容易实现了,好比说咱们要实现网站背景色的换肤,咱们能够预先准备几个背景色的容器, 而后用a标签的href锚点分别对应相应的背景元素id,而后当点击背景色的时候调整背景容器的层级,这样就能够实现换肤了,实际效果能够看文章开头的效果展现. 具体代码以下:css3

<style> .bg { position: absolute; left: 0; top: 0; bottom: 0; right: 0; } .bg1 { z-index: 10; background-color: #000; } .bg2 { background-color: #06c; } .bg3 { background-color: #f0c; } .skin-btn-wrap { position: absolute; padding: 4px 10px; border-radius: 20px; line-height: 20px; background-color: #fff; z-index: 11; right: 20px; top: 20px; } .skin-btn-wrap a { display: inline-block; width: 20px; height: 20px; border-radius: 10px; } #one { background-color: #000; } #two { background-color: #06c; } #three { background-color: #f0c; } .bg:target { z-index: 10; } .bg:not(:target) { z-index: 0; } </style>

  <!-- css背景换肤 -->
  <div class="bg1 bg" id="bg1"></div>
  <div class="bg2 bg" id="bg2"></div>
  <div class="bg3 bg" id="bg3"></div>
  <div class="skin-btn-wrap">
    <a href="#bg1" id="one"></a>
    <a href="#bg2" id="two"></a>
    <a href="#bg3" id="three"></a>
  </div>
复制代码

2.焦点图动画

焦点图动画主要来自咱们司空见惯的轮播图,咱们点击轮播图的某个指示点时,能够切换会对应的图片,焦点轮播图经常使用的方案主要是用javascript和css共同实现,方案有大体如下几种:

bootstrap的轮播图插件
jquery市场的丰富的轮播图插件
swiper.js(丰富而强大,小程序也内置了swiper组件)
antd/element内置轮播图组件
slick
unslider 最简单的轮播图组件
fancyBox 能够为页面上的图片、html 内容和多媒体添加缩放功能
sly 导航式、可单向滚动
Sequence 能够建立响应式幻灯片、演示、旗帜广告和以步骤为基础的CSS 动画框架
PhotoSwipe 适用于移动设备和桌面电脑,基于原生JavaScript的模块组件

以上介绍的方案都很成熟,咱们能够直接拿来使用,可是为了追求简洁和代码量最低,咱们有办法用纯css实现一个简单的焦点图切换动画吗?

实现思路也很简单,咱们也会基于上面讲的:target伪类来实现,这里为了实现动画效果,咱们使用了transiton动画,关于transtion和伪元素的更多介绍和使用,能够参考:

实现思路以下:

创建焦点图和控制点的对应关系
初始化页面时只让第一个焦点图有宽度,其余宽度都设置为零,当控制点激活时,然控制点对应的目标对象的宽度设置为正常值,其余的非目标对象都设置为零
给焦点图添加transition过渡动画
优化焦点图和控制点样式

具体代码以下:

<style> .swiper { position: relative; margin: 0 auto; display: flex; width:80vw; height: 250px; padding: 18px; border-radius: 8px; background: #fff; box-shadow: 0 0 20px rgba(0,0,0, .2); } .swiper .img { height: 250px; width: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; transition: width .6s; background-color: #06c; color: #fff; } .swiper .img:first-child { width: 100%; } .swiperControl { position: absolute; left: 50%; transform: translateX(-50%); bottom: 30px; padding: 3px 10px; border-radius: 20px; font-size: 0; background-color: rgba(0,0,0, .3); } .swiperControl .dot { display: inline-block; margin: 0 6px; width: 8px; height: 8px; border-radius: 6px; background-color: rgba(255,255,255, .6); } .swiperControl .dot:hover { background-color: rgba(255,255,255, 1); } .swiper .img:target { width: 100%; } .swiper .img:not(:target) { width: 0; } </style>
  <div class="swiper">
    <div class="img" id="img1" style='background: #06c'>我</div>
    <div class="img" id="img2" style='background: #f0c'>爱</div>
    <div class="img" id="img3" style='background: #000'>你</div>

    <div class="swiperControl">
        <a class="dot" href="#img1"></a>
        <a class="dot" href="#img2"></a>
        <a class="dot" href="#img3"></a>
      </div>
  </div>
复制代码

总结

经过上面介绍的纯css实现网站换肤以及焦点图切换动画,是否是对css有更多的新奇的想法了呢?后面我会继续介绍更多纯css3实现的难以想象的动画,好比3D掷色子,VR图等,敬请期待吧~

最后

若是想了解更多webpack，node，gulp，css3，javascript，nodeJS，canvas等前端知识和实战，欢迎在公众号《趣谈前端》加入咱们一块儿学习讨论，共同探索前端的边界。

《前端实战总结》之使用纯css实现网站换肤和焦点图切换动画

你将收获

效果展现

实现思路

1.网站换肤

:target伪类

2.焦点图动画

总结

最后

更多推荐