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

徐小夕 等级 922 0 0

今天我们来继续复盘一些工作中常用的css技巧和知识,以便我们可以更加优雅的用css实现富有动感的网站.

你将收获

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

效果展示

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

实现思路

1.网站换肤

通常我们实现网站换肤都基于如下方式实现:

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

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

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

:target伪类

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

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

假设你想修改 URI 指向的任何 div 元素,但是又不想把样式应用到任何其它同类型的元素,那么我们可以这么写:

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

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

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

<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和伪元素的更多介绍和使用,可以参考:

实现思路如下:

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

具体代码如下:

 <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实现网站换肤和焦点图切换动画

更多推荐

收藏
评论区

相关推荐

前端开发中79条不可忽视的知识点汇总
过往一些不足的地方,通过博客,好好总结一下。 1.css禁用鼠标事件 css .disabled { pointerevents: none; cursor: default; opacity: 0.6; } 2.get/post的理解和他们之间的区别 http 超文本传输协议(HTTP)的设计目的是保证客户机
《前端实战总结》之使用纯css实现网站换肤和焦点图切换动画
今天我们来继续复盘一些工作中常用的css技巧和知识,以便我们可以更加优雅的用css实现富有动感的网站. 你将收获 网站换肤设计方案介绍 :target伪类介绍和用法以及如何使用css实现网站换肤 transition动画以及如何用纯css实现焦点图动画 效果展示 1.网站换肤 (https://imghelloworld.ossc
CSS Modules 解决 react 项目 css 样式互相影响的问题
CSS Modules 解决 react 项目 css 样式互相影响的问题 CSS Modules 解决 react 项目 css 样式互相影响的问题 (http
原来CSS的background还可以这么玩
身为一个前端开发者,背景是开发中的常客。大到整个网站的主题背景,小到一个按钮的背景。CSS 的 background 属性基本上每天开发都会遇到,绝大多数情况下我们都只会使用到了纯色背景或者图片背景。如果你想让你开发的内容看起来更加生动有趣,通过本文让你用纯CSS也可以开发出炫酷的背景。 开始之前在开始之前,先请你回答下面的问题,如果你能全部回答
只听说过CSS in JS,怎么还有JS in CSS?
CSS in JS是一种解决css问题想法的集合,而不是一个指定的库。从CSS in JS的字面意思可以看出,它是将css样式写在JavaScript文件中,而不需要独立出.css、.less之类的文件。将css放在js中使我们更方便的使用js的变量、模块化、treeshaking。还解决了css中的一些问题,譬如:更方便解决基于状态的样式,更容易追溯依赖关
如何提高CSS性能
结合现代网站的复杂性和浏览器处理 CSS 的方式,即使是适量的CSS也会成为设备受限、网络延迟、带宽或数据限制的瓶颈。因为性能是用户体验的一个至关重要的部分,所以必须确保在各种形状和尺寸的设备上提供一致的高质量体验,这也需要优化你的CSS。本篇文章将涵盖CSS会导致哪些性能问题,以及如何制作不妨碍人们使用的CSS的最佳实践。 目录 CSS是如何工作的?
C++标准库和标准模板库
<div id="article\_content" class="article\_content clearfix csdn-tracking-statistics" data-pid="blog" data-mod="popu\_307" data-dsm="post"> <link rel="stylesheet" href="https://csd
CSS基本用法介绍
CSS介绍 ===== css定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). CSS语法 ===== ### css实列 每个CSS样式由两个组成部分:选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。 ### css注释 /*这是注释*/ CSS的几种引入方
CSS基础知识整理
### **1 什么是CSS?** CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。 CSS以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等,而且还可以针对不同的浏览器设置不同的样式。 ###
CSS背景颜色、背景图片、平铺、定位、固定
CSS背景颜色设置 background-color:red;如设置背景颜色为红色; 背景颜色设置支持3种写法: 颜色名 16进制 rgb CSS背景图片颜色设置 background-image:url(图片地址);如设置背景图片 路径不在说明了! CSS背景图片平铺设置(如果不设置图片默认设置为x轴y轴同时平铺即值为repeat) b
43个实例xHTML+CSS(DIV+CSS)网页及导航布局教程
在中国,很多前端开发初学者都会把xHTML+CSS页面制作说成DIV+CSS,甚至很多人都还不知道xHTML+CSS是什么意思,只知道盲目的追求DIV+CSS,但在国外,是没有DIV+CSS这个概念的,很明显如果单从字面上去理解,DIV+CSS的网页就要全都是div,很明显是无法达到语义化标准的。请把”DIV+CSS”这个词从脑子中删除,用”xHTML+CS
Less功能特性
(1)变量     我们常常在 CSS 中 看到同一个值重复多次,这样难易于代码维护 const bgColor="skyblue"; $(".post-content").css("background-color",bgColor); $("#wrap").css("background-color",bgColor);
Sass用法指南
学过CSS的人都知道,它不是一种编程语言。 你可以用它开发网页样式,但是没法用它编程。也就是说,CSS基本上是设计师的工具,不是程序员的工具。在程序员眼里,CSS是一件很麻烦的东西。它没有变量,也没有条件语句,只是一行行单纯的描述,写起来相当费事。 很自然地,有人就开始为CSS加入编程元素,这被叫做"CSS预处理器"(css preproces
前端: 如何更高效的学习Css? 有哪些库值得推荐?
之前有很多朋友问我如何快速学习 css 以及有哪些好用的css库, 最近也抽出时间思考整理了一下, 今天就和大家分享一下我的经验. 如何高效学习Css之前在工作中也使用 css 做过很多有意思的事情, 比如用 css 画图标, 写轮播图, 写动效, 做布局等等, 但是这些应用的实现都依赖于 html 和 css 基础知识. 根据我自己的学习经验, 我们需要掌
浏览器工作原理
浏览器渲染过程 浏览器渲染1. 解析 HTML 文件,构建 DOM 树,同时浏览器主进程负责下载 CSS 文件2. CSS 文件下载完成,解析 CSS 文件成树形的数据结构,然后结合 DOM 树合并成 RenderObject 树3. 布局 RenderObject 树 (Layout/reflow),负责 RenderObject 树中的元素的尺寸,位置等计算4. 绘制 RenderObject 树 (paint),绘制页面的像素信息5. 浏览器主进程将默认的图层和复合图层交给 GPU 进程,GPU 进