CSS3 & CSS var & :root

How to change CSS :root color variables in JavaScript

https://stackoverflow.com/questions/37801882/how-to-change-css-root-color-variables-in-javascript

https://developer.mozilla.org/en-US/docs/Web/CSS/:root

  1.     :root {
  2.         --angleBegin: 0deg;
  3.         --angleEnd: 0deg;
  4.         /* fixed angle enums */
  5.         --angle0: 0deg;
  6.         /* --angle30: 30deg; */
  7.         --angle60: 60deg;
  8.         /* --angle90: 90deg; */
  9.         --angle120: 120deg;
  10.         --angle180: 180deg;
  11.         --angle240: 240deg;
  12.         --angle300: 300deg;
  13.         --angle360: 360deg;
  14.     }

css change skin

  1. // --angleBegin = --angle0;
  2. // --angleBegin = --angle60;// and so on...
  4. document.documentElement.style.setProperty('--your-variable', '#YOURCOLOR');
  6. // css3 vars
  7. document.documentElement.style.setProperty("--angleBegin", "--angle60");

demo

https://codepen.io/xgqfrms/pen/rELraa

https://codepen.io/xgqfrms/pen/agZGZY

https://codepen.io/xgqfrms/pen/vqKWov


  2.     :root {
  3.         --angleBegin: 0deg;
  4.         --angleEnd: 0deg;
  5.         --angleDefault: 0deg;
  6.         /* fixed angle enums */
  7.         --angle0: 0deg;
  8.         /* --angle30: 30deg; */
  9.         --angle60: 60deg;
  10.         /* --angle90: 90deg; */
  11.         --angle120: 120deg;
  12.         --angle180: 180deg;
  13.         --angle240: 240deg;
  14.         --angle300: 300deg;
  15.         --angle360: 360deg;
  16.     }
  17.     section{
  18.         margin: 100px auto;
  19.         position: relative;
  20.     }
  21.     div#div {
  22.         position: absolute;
  23.         box-sizing: border-box;
  24.         width: 100px;
  25.         height: 100px;
  26.         margin-top: 50px;
  27.         margin-left: 200px;
  28.         background-color:#ccc;
  29.         border-top: 1px solid #f00;
  30.         border-right: 1px solid #0f0;
  31.         border-bottom: 1px solid  #00f;
  32.         border-left: 1px solid #f0f;
  33.         /* transform: rotate(60deg); */
  34.         /* transform: rotate(var(--angle0)); */
  35.         /* transform: rotate(var(--angleEnd)); */
  36.         transform: rotate(var(--angleDefault));
  37.         transform-origin: 200px 200px;
  38.         /* transform-origin: 50% 50%; */
  39.     }
  40.     div#bg {
  41.         position: absolute;
  42.         box-sizing: border-box;
  43.         width: 100px;
  44.         height: 100px;
  45.         margin-top: 50px;
  46.         margin-left: 200px;
  47.         background-color:#ccc;
  48.         border-top: 1px solid #f00;
  49.         border-right: 1px solid #0f0;
  50.         border-bottom: 1px solid  #00f;
  51.         border-left: 1px solid #f0f;
  52.         transform: rotate(0deg);
  53.         transform-origin: 200px 200px;
  54.     }
  55.     .circle{
  56.         position: absolute;
  57.         box-sizing: border-box;
  58.         width: 400px;
  59.         height: 400px;
  60.         margin-top: 50px;
  61.         margin-left: 200px;
  62.         background-color: rgba(123, 123, 123, 0.5);
  63.         border: 10px solid red;
  64.         border-radius: 50%;
  65.     }
  66.     .rotateAngle {
  67.         animation: autoRotateWithAngleVar 1s 1 both ease;
  68.     }
  69.     @keyframes autoRotateWithAngleVar {
  70.         0% {
  71.             transform: rotate(var(--angleBegin));
  72.             /* transform: rotate3D(0, 0, 1, var(--angleBegin)); */
  73.         }
  74.         to {
  75.             transform: rotate(var(--angleEnd));
  76.             /* transform: rotate3D(0, 0, 1, var(--angleEnd)); */
  77.         }
  78.     }
  1.     <section>
  2.         <div>
  3.             <button data-btn="btn">click</button>
  4.         </div>
  5.         <div id="div" data-begin="0" data-end="0">六边形 Hexagon</div>
  6.         <div id="bg">六边形 Hexagon</div>
  7.         <div class="circle"></div>
  8.     </section>
  1.     let div = document.querySelector(`[id="div"]`);
  2.     let btn = document.querySelector(`[data-btn="btn"]`);
  3.     // const autoRotateWithAngles = (begin = 0, end = 0) => {
  4.     //     // document.documentElement.style.setProperty("--angleBegin", "--angle60");
  5.     //     // document.documentElement.style.setProperty("--angleEnd", "--angle60");
  6.     //     document.documentElement.style.setProperty("--angleBegin", `--angle${begin}`);
  7.     //     document.documentElement.style.setProperty("--angleEnd", `--angle${end}`);
  8.     //     // rotateAngle
  9.     //     div.classList.toggle(`rotateAngle`);
  10.     // };
  11.     const autoRotateWithAngles = (direct = "postive", angle = 0) => {
  12.         let begin = parseInt(div.dataset.begin);
  13.         let end = parseInt(div.dataset.end);
  14.         // Math.abs();
  15.         if (direct === "postive") {
  16.             let beginAngle = begin + angle;
  17.             let endAngle = end + angle;
  18.             div.dataset.begin = beginAngle > 360 ? beginAngle % 360 : beginAngle;
  19.             div.dataset.end = endAngle > 360 ? endAngle % 360 : endAngle;
  20.         }
  21.         if (direct === "center") {
  22.             // do nothing
  23.         }
  24.         if (direct === "nagitive") {
  25.             div.dataset.begin = begin - angle;
  26.             div.dataset.end = end - angle;
  27.         }
  28.         document.documentElement.style.setProperty("--angleBegin", `var(--angle${(begin + angle) > 360 ? (begin + angle) % 360 : (begin + angle)})`);
  29.         document.documentElement.style.setProperty("--angleEnd", `var(--angle${(end + angle) > 360 ? (end + angle) % 360 : (end + angle)})`);
  30.         // rotateAngle
  31.         // div.classList.toggle(`rotateAngle`);
  32.         div.classList.remove(`rotateAngle`);
  33.         setTimeout(() => {
  34.             div.classList.add(`rotateAngle`);
  35.             document.documentElement.style.setProperty("--angleDefault", `var(--angle${(begin + angle) % 360})`);
  36.             // document.documentElement.style.setProperty("--angleDefault", `var(--angle${(end + angle) % 360})`);
  37.             // document.documentElement.style.setProperty("--angleDefault", `--angle${end + angle}`);
  38.             // document.documentElement.style.setProperty("--angleDefault", `var(--angle${(end + angle) > 360 ? (end + angle) % 360 : (end + angle)})`);
  39.         }, 1000);
  40.     };
  41.     btn.addEventListener(`click`, () => {
  42.         autoRotateWithAngles("postive", 60);
  43.     });

CSS3 rotate angle & positive & negative

setAttribute(disabled, false); & .removeAttribute(disabled);


  2. <!DOCTYPE html>
  3. <html lang="zh-Hans">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <meta name="author" content="xgqfrms">
  9.     <meta name="generator" content="VS code">
  10.     <!-- <link rel="icon" type="image/x-icon" href="./favicon.ico" />
  11.     <link rel="icon" type="image/png" href="./favicon.png" /> -->
  12.     <title>CSS3 rotate angle & positive & negative</title>
  13.     <!--  Hexagon -->
  14.     <style>
  15.         :root {
  16.             --angleBegin: 0deg;
  17.             --angleEnd: 0deg;
  18.             --angleDefault: 0deg;
  19.             /* fixed angle enums */
  20.             --angle0: 0deg;
  21.             --angle60: 60deg;
  22.             --angle120: 120deg;
  23.             --angle180: 180deg;
  24.             --angle240: 240deg;
  25.             --angle300: 300deg;
  26.             --angle360: 360deg;
  27.         }
  28.         section{
  29.             margin: 100px auto;
  30.             position: relative;
  31.         }
  32.         div#div {
  33.             position: absolute;
  34.             box-sizing: border-box;
  35.             width: 100px;
  36.             height: 100px;
  37.             margin-top: 50px;
  38.             margin-left: 200px;
  39.             background-color:#ccc;
  40.             border-top: 1px solid #f00;
  41.             border-right: 1px solid #0f0;
  42.             border-bottom: 1px solid  #00f;
  43.             border-left: 1px solid #f0f;
  44.             transform: rotate(var(--angleDefault));
  45.             transform-origin: 200px 200px;
  46.         }
  47.         #div::before {
  48.             content: "";
  49.             width: 6px;
  50.             height: 6px;
  51.             position: absolute;
  52.             left: 0px;
  53.             top: -5px;
  54.             border: 2px solid #FFF;
  55.             border-radius: 50%;
  56.         }
  57.         #div::after {
  58.             content: "";
  59.             position: absolute;
  60.             left: 50%;
  61.             top: -19%;
  62.             height: 30px;
  63.             width: 30px;
  64.             background-color: #00c991;
  65.             border-radius: 50% 50% 0;
  66.             transform: translate(-50%, -50%) rotate(45deg);
  67.         }
  68.         div#bg {
  69.             position: absolute;
  70.             box-sizing: border-box;
  71.             width: 100px;
  72.             height: 100px;
  73.             margin-top: 50px;
  74.             margin-left: 200px;
  75.             background-color:#ccc;
  76.             border-top: 1px solid #f00;
  77.             border-right: 1px solid #0f0;
  78.             border-bottom: 1px solid  #00f;
  79.             border-left: 1px solid #f0f;
  80.             transform: rotate(0deg);
  81.             transform-origin: 200px 200px;
  82.         }
  83.         .circle{
  84.             position: absolute;
  85.             box-sizing: border-box;
  86.             width: 400px;
  87.             height: 400px;
  88.             margin-top: 50px;
  89.             margin-left: 200px;
  90.             background-color: rgba(123, 123, 123, 0.5);
  91.             border: 10px solid red;
  92.             border-radius: 50%;
  93.         }
  94.         .rotateAngle {
  95.             animation: autoRotateWithAngleVar 1s 1 both ease;
  96.         }
  97.         @keyframes autoRotateWithAngleVar {
  98.             0% {
  99.                 transform: rotate(var(--angleBegin));
  100.             }
  101.             to {
  102.                 transform: rotate(var(--angleEnd));
  103.             }
  104.         }
  105.     </style>
  106. </head>
  107. <body>
  108.     <section>
  109.         <div>
  110.             <button data-btn="btn1">positive click</button>
  111.             <button data-btn="btn2">negative click</button>
  112.         </div>
  113.         <div id="div" data-begin="0" data-end="0">六边形 Hexagon</div>
  114.         <div id="bg">六边形 Hexagon</div>
  115.         <div class="circle"></div>
  116.     </section>
  117.     <!-- js -->
  118.     <script>
  119.         let log = console.log;
  120.         let div = document.querySelector(`[id="div"]`);
  121.         let btn1 = document.querySelector(`[data-btn="btn1"]`);
  122.         let btn2 = document.querySelector(`[data-btn="btn2"]`);
  123.         const autoRotateWithAngles = (direct = "postive", angle = 0) => {
  124.             let begin = parseInt(div.dataset.begin);
  125.             let end = parseInt(div.dataset.end);
  126.             if (direct === "postive") {
  127.                 let beginAngle = begin + angle;
  128.                 let endAngle = end + angle;
  129.                 div.dataset.begin = beginAngle > 360 ? beginAngle % 360 : beginAngle;
  130.                 div.dataset.end = endAngle > 360 ? endAngle % 360 : endAngle;
  131.                 //
  132.                 // document.documentElement.style.setProperty("--angleBegin", `var(--angle${(begin + angle) > 360 ? (begin + angle) % 360 : (begin + angle)})`);
  133.                 // document.documentElement.style.setProperty("--angleEnd", `var(--angle${(end + angle) > 360 ? (end + angle) % 360 : (end + angle)})`);
  134.                 // div.classList.remove(`rotateAngle`);
  135.                 // setTimeout(() => {
  136.                 //     div.classList.add(`rotateAngle`);
  137.                 //     document.documentElement.style.setProperty("--angleDefault", `var(--angle${(begin + angle) % 360})`);
  138.                 // }, 1000);
  139.                 document.documentElement.style.setProperty("--angleBegin", `var(--angle${beginAngle > 360 ?  beginAngle % 360 : beginAngle})`);
  140.                 document.documentElement.style.setProperty("--angleEnd", `var(--angle${endAngle > 360 ? endAngle  % 360 : endAngle})`);
  141.                 div.classList.remove(`rotateAngle`);
  142.                 setTimeout(() => {
  143.                     div.classList.add(`rotateAngle`);
  144.                     document.documentElement.style.setProperty("--angleDefault", `var(--angle${beginAngle % 360})`);
  145.                 }, 1000);
  146.             }
  147.             if (direct === "center") {
  148.                 // do nothing
  149.             }
  150.             if (direct === "nagitive") {
  151.                 let beginAngle = (begin - angle) < 0 ? 360 - Math.abs(begin - angle) : (begin - angle);
  152.                 let endAngle = (end - angle) < 0 ? 360 - Math.abs(end - angle) : (end - angle);
  153.                 // let beginAngle = Math.abs(begin - angle);
  154.                 // let endAngle = Math.abs(end - angle);
  155.                 log(`beginAngle =`, beginAngle);
  156.                 log(`endAngle =`, endAngle);
  157.                 div.dataset.begin = beginAngle > 360 ? (beginAngle % 360) : beginAngle;
  158.                 div.dataset.end = endAngle > 360 ? (endAngle % 360) : endAngle;
  159.                 log(`div.dataset.begin =`, div.dataset.begin);
  160.                 log(`div.dataset.end =`, div.dataset.end);
  161.                 //
  162.                 // document.documentElement.style.setProperty("--angleBegin", `var(--angle${(begin - angle) > 360 ? (begin - angle) % 360 : (begin - angle)})`);
  163.                 // document.documentElement.style.setProperty("--angleEnd", `var(--angle${(end - angle) > 360 ? (end - angle) % 360 : (end - angle)})`);
  164.                 // div.classList.remove(`rotateAngle`);
  165.                 // setTimeout(() => {
  166.                 //     div.classList.add(`rotateAngle`);
  167.                 //     document.documentElement.style.setProperty("--angleDefault", `var(--angle${(begin - angle) % 360})`);
  168.                 // }, 1000);
  169.                 document.documentElement.style.setProperty("--angleBegin", `var(--angle${beginAngle > 360 ?  beginAngle % 360 : beginAngle})`);
  170.                 document.documentElement.style.setProperty("--angleEnd", `var(--angle${endAngle > 360 ? endAngle  % 360 : endAngle})`);
  171.                 div.classList.remove(`rotateAngle`);
  172.                 setTimeout(() => {
  173.                     div.classList.add(`rotateAngle`);
  174.                     document.documentElement.style.setProperty("--angleDefault", `var(--angle${beginAngle % 360})`);
  175.                 }, 1000);
  176.             }
  177.         };
  178.         btn1.addEventListener(`click`, () => {
  179.             btn1.setAttribute(`disabled`, true);
  180.             autoRotateWithAngles("postive", 60);
  181.             // autoRotateWithAngles("postive", 120);
  182.             setTimeout(() => {
  183.                 // btn.setAttribute(`disabled`, false);
  184.                 btn1.removeAttribute(`disabled`);
  185.             }, 1000);
  186.         });
  187.         btn2.addEventListener(`click`, () => {
  188.             btn2.setAttribute(`disabled`, true);
  189.             autoRotateWithAngles("nagitive", 60);
  190.             // autoRotateWithAngles("nagitive", 120);
  191.             setTimeout(() => {
  192.                 // btn.setAttribute(`disabled`, false);
  193.                 btn2.removeAttribute(`disabled`);
  194.             }, 1000);
  195.         });
  196.     </script>
  197. </body>
  198. </html>

demo

https://repl.it/@xgqfrms/autoLoopArray-with-direction

touch circle menu

html & :root


  2. let html = document.querySelector(`:root`);
  4. html.scrollHeight;
  6. html.innerText = html.innerText.split(' ').join('');

refs

xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

CSS3 & CSS var & :root的更多相关文章

  1. css var all in one & html & root & :root

    css var all in one number :root{ --num: 0; } html{ --num: 0; } let html = document.querySelector(`ht ...

  2. css var & auto width css triangle

    css var & auto width css triangle https://codepen.io/xgqfrms/pen/PooeEbd css var https://codepen ...

  3. [CSS3] CSS :target Selector

    The :target selector allows us to interact with a fragment identifier, or hash, in our URL from CSS. ...

  4. [CSS3] CSS Media Queries

    Using CSS media queries allows you to design responsive layout in your web apps and website. We will ...

  5. [CSS3] CSS Display Property: Block, Inline-Block, and Inline

    Understanding the most common CSS display types of block, inline-block, and inline will allow you to ...

  6. [CSS3] CSS Background Images

    Body with background image and gradient html { background: linear-gradient(#000, white) no-repeat; h ...

  7. CSS3/CSS之居中解析（水平+垂直居中、水平居中，垂直居中）

    首先,我们来看下垂直居中: (1).如果是单行文本,则可以设置的line-height的数值,让其等于父级元素的高度! <!DOCTYPE html> <html lang=&quo ...

  8. CSS3+CSS+HTML实现网页

    效果图: 代码实现: 样式部分style.css: *{ margin:; padding:; } body{ background-color: #673929; font-size: 16px; ...

  9. 基于js的网页换肤（不需要刷新整个页面，只需替换css文件）

    1. [代码][JS]代码    <HTML><HEAD><link ID="skin" rel="stylesheet" typ ...

随机推荐

  1. Hugo 博客中文指南（基础教程）

    1. 安装 Hugo 从 Hugo 项目主页下载 Releases 文件,解压 hugo.exe 文件到 C:\Windows\System32 目录下. 2. 创建站点 hugo new site ...

  2. nginx http模块开发入门

    导语 本文对nginx http模块开发需要掌握的一些关键点进行了提炼,同时以开发一个简单的日志模块进行讲解,让nginx的初学者也能看完之后做到心里有谱.本文只是一个用作入门的概述. 目录 背景 主 ...

  3. C# 实现语音聊天

    一.语音聊天说专业点就是即时语音,是一种基于网络的快速传递语音信息的技术,普遍应用于各类社交软件中,优势主要有以下几点: (1)时效性:视频直播会因为带宽问题有时出现延迟高的问题,而语音直播相对来说会 ...

  4. 404 GET /nbextensions/jupyter-js-widgets/extension.js

    数据科学交流群,群号:189158789,欢迎各位对数据科学感兴趣的小伙伴的加入! 解决办法: 首先要确定你安装和配置nbextensions时有没有加--user,如果当时没加这里就不用加,否则不一 ...

  5. 跨边界传输之反弹shell

    反弹shell     1.nc         正向连接             攻击机                 nc-vv 受害者ip 受害者port             受害者    ...

  6. 初入Java坑，然后又入产品坑

    之前工作了一年,从事Java相关工作,不小心深得领导器重,跑去演讲.写文档.与客户沟通等,最后应公司需要,转往产品坑,坑坑相连,何时逃坑. 最近一直在学习产品经理必备工具Axure,发现这真是一个神奇 ...

  7. k8s command & args

    命令和参数说明: command.args两项实现覆盖Dockerfile中ENTRYPOINT的功能,具体的command命令代替ENTRYPOINT的命令行,args代表集体的参数. 如果comm ...

  8. Aruba无线控制器常用操作

    初始配置 1.console到初始化的无线控制器上 Enter System name [Aruba7005]: Enter VLAN 1 interface IP address [172.16.0 ...

  9. JavaScript解构赋值

    JavaScript解构赋值 JavaScript解构赋值为我们提供了很多方便,但是用法比较多,本文就来梳理一下.总体来说,主要就两种地方使用解构赋值,一种是数组的解构赋值,另一种是对象的解构赋值.以 ...

  10. 如何使用命令将文件夹中的文件名（包括路径）写入到txt文件中

    在cmd中使用 cd /d 路径,进入当前文件夹中 使用 dir /s /b > 0.txt 如图: