JavaScript30_03 - CSS3 Variables

最新推荐文章于 2022-03-10 23:14:58 发布

林崖

最新推荐文章于 2022-03-10 23:14:58 发布

阅读量176

点赞数

分类专栏： JavaScript30 demo

本文链接：https://blog.csdn.net/CDTZYXZZY/article/details/102293148

版权

demo 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

JavaScript30

3 篇文章 0 订阅

订阅专栏

03 CSS Variables

实现效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IdkzUI3P-1570415900952)(media/15704070740572/15704071176272.jpg)]

通过调整Spacing与Blur以及BaseColor分别设置图片的背景大小、模糊程度、背景颜色

使用了CSS3新特性：CSS3变量

效果展示

码云Git_Download

码云上有更详细的实现讲解

分析

Spacing：通过padding控制
Blur：通过filter:blur(10px)控制
BaseColor：通过background控制

控件：

<input type="range" min="10" max="200">

<input type="color" >

JS通过dom.value来获取控件对应的值

CSS3变量

:root {
      --base: #ffc600;
      --spacing: 10px;
      --blur: 10px;
    }

 img {
      padding: var(--spacing);
      background: var(--base);
      filter: blur(var(--blur));
    }

    .hl {
      color: var(--base);
    }

CSS3变量参考

定义变量：--base:red，使用--来定义变量。类似less中的@
使用变量：background：var(--base)使用变量的时候需要在var()中，要加上变量定义符--
：root表示根节点<html>，优先级比html选择器要高。用于声明全局的CSS变量。在JS中document.documentElement来表示文档根元素

filter:blur(10px):定义滤镜效果
blur参考

HTML5标签上的数据属性：

<input type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">

data-sizing满足HTML5中数据属性的定义要求data- *，可以通过dom.dataset.sizing的方式来访问标签中的data-sizing属性值

实现代码

HTML

<h2>Update CSS Variables with <span class='hl'>JS</span></h2>

<div class="controls">
    <label for="spacing">Spacing:</label>
    <input type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">

    <label for="blur">Blur:</label>
    <input type="range" name="blur" min="0" max="25" value="10" data-sizing="px">

    <label for="base">Base Color</label>
    <input type="color" name="base" value="#ffc600">
</div>

<img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">

CSS

<style>
/*这里定义的是全局变量*/
    :root{
        --color:#ffc600;
        --spacing:10px;
        --blur: 10px;
    }

    img{
        padding:var(--spacing);
        background:var(--color);
        filter:blur(var(--blur));
    }

    h1{
        color: var(--color);
    }
    /*
      misc styles, nothing to do with CSS variables
    */

    body {
        text-align: center;
    }

    body {
        background: #193549;
        color: white;
        font-family: 'helvetica neue', sans-serif;
        font-weight: 100;
        font-size: 50px;
    }

    .controls {
        margin-bottom: 50px;
    }

    input {
        width:100px;
    }
</style>

JS

<script>

    const inputs = document.querySelectorAll(".controls input");

    function setSytle(){

        // 这里的this指向input。
        const suffix = this.dataset.sizing || "";

        document.documentElement.style.setProperty(`--${this.name}`,this.value+suffix);

    }
 inputs.forEach(input=>input.addEventListener("change",setSytle));
    inputs.forEach(input=>input.addEventListener("mousemove",setSytle));
</script>

重点

HTML
- 控件
  - input[type=“range”]
  - input[type=“color”]
  - dom.value
- HTML5:data-sizing
  - dom.dataset.sizing
CSS
- filter:blur(10px)
- CSS3 Variables
  - :root{–color:red} global
  - bgc:var(–color)