【关于使用css变量实现主题的切换效果】的更多相关文章

关于使用css变量实现主题的切换效果

现在要实现网页主题的切换成本较小的一种方案就是使用css的变量来实现 HTML 在HTML的body标签上先定义一个id元素属性 <body id="sm-theme"> <sj-root></sj-root> </body> CSS css定义css变量,变量的定义必须要以 -- 开头 #sm-theme { --smTheme: #2A2A2A; --smSettingRight: #484848; --smSettingRightB…

Vue项目使用CSS变量实现主题化

主题化管理经常能在网站上看到,一般的思路都是将主题相关的CSS样式独立出来,在用户选择主题的时候加载相应的CSS样式文件.现在大部分浏览器都能很好的兼容CSS变量,主题化样式更容易管理了.最近,使用CSS变量在Vue项目中做了一个主题化实践,下面来看看整个过程. Github项目地址 演示地址 可行性测试 为了检验方法的可行性,在public文件夹下新建一个themes文件夹,并在themes文件夹新建一个default.css文件: :root { --color: red; } 在publi…

教你用原生CSS写炫酷页面切换效果，跟第三方组件说拜拜

因为项目需要,别人想让我给他写一个个人博客,并且给了我一个其他人的网页,可以点此查看.有的同学可能说了,第三方博客框架这么多,为什么还要去手写的,你说这个有可能是没有看到打开这个博客. 样式介绍 给大家看一下这个网页的大体样式. 这个界面可以说是非常漂亮,整体也是一个响应式布局,总体来说还算不错.但是抛开页面设计,这个网站有一个致命的缺点,就是没有做懒加载,这么多页面其实就是一个HTML文件,所有的资源图片以及文字信息等全部是一次性加载,所以你想打开这个界面还是比较困难的,需要等待一些时间. 我…

初次接触CSS变量

本文的目的主要是展示CSS变量是如何工作的.随着Web应用程序变得越来越大,CSS变得越来越大,越来越多,而且很多时候都很乱,在良好的上下文中使用CSS变量,为您提供重用和轻松更改重复出现的CSS属性的机制. 在“纯粹的”CSS支持变量之前,我们有像Less和Sass这样的预处理器.但是它们需要在使用前进行编译,因此(有时)会增加额外的复杂性. 如何定义和使用CSS变量 从我们最熟悉的语言JavaScript开始:在JavaScript中定义变量使用vars. 要声明一个简单的JavaScrip…

CSS动画实例：图文切换

先准备好一张图片,在页面中放置一个类名为container的层作为图文容器,在该层中再定义两个层:一个类名为image-box的层放置图片,一个类名为text-desc的层放置文本描述,HTML代码描述如下: <div  class="container"> <div class="image-box"> <img src="hhl.jpg" alt="黄鹤楼"> </div>…

用CSS实现Tab页切换效果

用CSS实现Tab切换效果 最近切一个页面的时候涉及到了一个tab切换的部分,因为不想用js想着能不能用纯CSS的选择器来实现切换效果.搜了一下大致有下面三种写法. 利用:hover选择器 缺点:只有鼠标在元素上面的时候才有效果,无法实现选中和默认显示某一个的效果 利用a标签的锚点 + :target选择器 缺点:因为锚点会将选中的元素滚动到页面最上面,每次切换位置都要移动,体验极差. 利用label和radio的绑定关系和radio选中时的:checked来实现效果 缺点:HTML结构元素更复…

原生CSS设置网站主题色—CSS变量赋值

定义CSS变量 在css文件顶部定义css变量,注意必须以--开头,使用:root包括这几个变量 :root { --main-bg-color: #ff7675; --color1: #fbfee9; --color2: #5a4446; --color3: #8baca1; --color4: #ffeec4; } 使用 在需要的地方使用,使用var()包裹css变量 #secondsLong { position: fixed; color: var(--color1); width: 1…

自定义视图引擎，实现MVC主题快速切换

一个网站的主题包括布局,色调,内容展示等,每种主题在某些方面应该或多或少不一样的,否则就不能称之为不同的主题了.每一个网站至少都有一个主题,我这里称之为默认主题,也就是我们平常开发设计网站时的一个固定布局,固定色调,固定内容展示等构成一个默认的固定主题.单一主题针对一些小网站或网站用户群体相对单一固定还是比较适用的,但如果是大型网站或是网站的用户群体比较多而且复杂,如:京东,博客园里的每个博客空间.文俊IT社区网(我的网站,虽不是大型网站,但也实现了主题切换功能的哦!~)等,是需要多个网站主题的…

CSS实现页面背景自动切换功能

From here:http://xiaomiya.iteye.com/blog/2047728 请看效果图: 完整代码如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>仿支付宝首页背景切换效果</title> <style…

CSS变量（CSS variable）

使用 CSS 变量编写你的样式代码 基本使用: 1. --variable: <declaration-value> 2. <css-attribute>: var(--variable) 第一个是定义 css 变量 其中 --variable 可以是自定义的名称,但是必须 -- 开头,冒号后面是变量的值(变量:值) 第二个是在选择器中使用一开始定义好的 css 变量,使用方式就和正常写样式一样,只是将你的对应属性的值替换成了 var(css变量) 相信你已经看出来了,这个特性和使…