CSS3 & CSS var & :root
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
:root {
--angleBegin: 0deg;
--angleEnd: 0deg;
/* fixed angle enums */
--angle0: 0deg;
/* --angle30: 30deg; */
--angle60: 60deg;
/* --angle90: 90deg; */
--angle120: 120deg;
--angle180: 180deg;
--angle240: 240deg;
--angle300: 300deg;
--angle360: 360deg;
}
css change skin
// --angleBegin = --angle0;
// --angleBegin = --angle60;// and so on...
document.documentElement.style.setProperty('--your-variable', '#YOURCOLOR');
// css3 vars
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
:root {
--angleBegin: 0deg;
--angleEnd: 0deg;
--angleDefault: 0deg;
/* fixed angle enums */
--angle0: 0deg;
/* --angle30: 30deg; */
--angle60: 60deg;
/* --angle90: 90deg; */
--angle120: 120deg;
--angle180: 180deg;
--angle240: 240deg;
--angle300: 300deg;
--angle360: 360deg;
}
section{
margin: 100px auto;
position: relative;
}
div#div {
position: absolute;
box-sizing: border-box;
width: 100px;
height: 100px;
margin-top: 50px;
margin-left: 200px;
background-color:#ccc;
border-top: 1px solid #f00;
border-right: 1px solid #0f0;
border-bottom: 1px solid #00f;
border-left: 1px solid #f0f;
/* transform: rotate(60deg); */
/* transform: rotate(var(--angle0)); */
/* transform: rotate(var(--angleEnd)); */
transform: rotate(var(--angleDefault));
transform-origin: 200px 200px;
/* transform-origin: 50% 50%; */
}
div#bg {
position: absolute;
box-sizing: border-box;
width: 100px;
height: 100px;
margin-top: 50px;
margin-left: 200px;
background-color:#ccc;
border-top: 1px solid #f00;
border-right: 1px solid #0f0;
border-bottom: 1px solid #00f;
border-left: 1px solid #f0f;
transform: rotate(0deg);
transform-origin: 200px 200px;
}
.circle{
position: absolute;
box-sizing: border-box;
width: 400px;
height: 400px;
margin-top: 50px;
margin-left: 200px;
background-color: rgba(123, 123, 123, 0.5);
border: 10px solid red;
border-radius: 50%;
}
.rotateAngle {
animation: autoRotateWithAngleVar 1s 1 both ease;
}
@keyframes autoRotateWithAngleVar {
0% {
transform: rotate(var(--angleBegin));
/* transform: rotate3D(0, 0, 1, var(--angleBegin)); */
}
to {
transform: rotate(var(--angleEnd));
/* transform: rotate3D(0, 0, 1, var(--angleEnd)); */
}
}
<section>
<div>
<button data-btn="btn">click</button>
</div>
<div id="div" data-begin="0" data-end="0">六边形 Hexagon</div>
<div id="bg">六边形 Hexagon</div>
<div class="circle"></div>
</section>
let div = document.querySelector(`[id="div"]`);
let btn = document.querySelector(`[data-btn="btn"]`);
// const autoRotateWithAngles = (begin = 0, end = 0) => {
// // document.documentElement.style.setProperty("--angleBegin", "--angle60");
// // document.documentElement.style.setProperty("--angleEnd", "--angle60");
// document.documentElement.style.setProperty("--angleBegin", `--angle${begin}`);
// document.documentElement.style.setProperty("--angleEnd", `--angle${end}`);
// // rotateAngle
// div.classList.toggle(`rotateAngle`);
// };
const autoRotateWithAngles = (direct = "postive", angle = 0) => {
let begin = parseInt(div.dataset.begin);
let end = parseInt(div.dataset.end);
// Math.abs();
if (direct === "postive") {
let beginAngle = begin + angle;
let endAngle = end + angle;
div.dataset.begin = beginAngle > 360 ? beginAngle % 360 : beginAngle;
div.dataset.end = endAngle > 360 ? endAngle % 360 : endAngle;
}
if (direct === "center") {
// do nothing
}
if (direct === "nagitive") {
div.dataset.begin = begin - angle;
div.dataset.end = end - angle;
}
document.documentElement.style.setProperty("--angleBegin", `var(--angle${(begin + angle) > 360 ? (begin + angle) % 360 : (begin + angle)})`);
document.documentElement.style.setProperty("--angleEnd", `var(--angle${(end + angle) > 360 ? (end + angle) % 360 : (end + angle)})`);
// rotateAngle
// div.classList.toggle(`rotateAngle`);
div.classList.remove(`rotateAngle`);
setTimeout(() => {
div.classList.add(`rotateAngle`);
document.documentElement.style.setProperty("--angleDefault", `var(--angle${(begin + angle) % 360})`);
// document.documentElement.style.setProperty("--angleDefault", `var(--angle${(end + angle) % 360})`);
// document.documentElement.style.setProperty("--angleDefault", `--angle${end + angle}`);
// document.documentElement.style.setProperty("--angleDefault", `var(--angle${(end + angle) > 360 ? (end + angle) % 360 : (end + angle)})`);
}, 1000);
};
btn.addEventListener(`click`, () => {
autoRotateWithAngles("postive", 60);
});
CSS3 rotate angle & positive & negative
setAttribute(disabled, false);&.removeAttribute(disabled);
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="author" content="xgqfrms">
<meta name="generator" content="VS code">
<!-- <link rel="icon" type="image/x-icon" href="./favicon.ico" />
<link rel="icon" type="image/png" href="./favicon.png" /> -->
<title>CSS3 rotate angle & positive & negative</title>
<!-- Hexagon -->
<style>
:root {
--angleBegin: 0deg;
--angleEnd: 0deg;
--angleDefault: 0deg;
/* fixed angle enums */
--angle0: 0deg;
--angle60: 60deg;
--angle120: 120deg;
--angle180: 180deg;
--angle240: 240deg;
--angle300: 300deg;
--angle360: 360deg;
}
section{
margin: 100px auto;
position: relative;
}
div#div {
position: absolute;
box-sizing: border-box;
width: 100px;
height: 100px;
margin-top: 50px;
margin-left: 200px;
background-color:#ccc;
border-top: 1px solid #f00;
border-right: 1px solid #0f0;
border-bottom: 1px solid #00f;
border-left: 1px solid #f0f;
transform: rotate(var(--angleDefault));
transform-origin: 200px 200px;
}
#div::before {
content: "";
width: 6px;
height: 6px;
position: absolute;
left: 0px;
top: -5px;
border: 2px solid #FFF;
border-radius: 50%;
}
#div::after {
content: "";
position: absolute;
left: 50%;
top: -19%;
height: 30px;
width: 30px;
background-color: #00c991;
border-radius: 50% 50% 0;
transform: translate(-50%, -50%) rotate(45deg);
}
div#bg {
position: absolute;
box-sizing: border-box;
width: 100px;
height: 100px;
margin-top: 50px;
margin-left: 200px;
background-color:#ccc;
border-top: 1px solid #f00;
border-right: 1px solid #0f0;
border-bottom: 1px solid #00f;
border-left: 1px solid #f0f;
transform: rotate(0deg);
transform-origin: 200px 200px;
}
.circle{
position: absolute;
box-sizing: border-box;
width: 400px;
height: 400px;
margin-top: 50px;
margin-left: 200px;
background-color: rgba(123, 123, 123, 0.5);
border: 10px solid red;
border-radius: 50%;
}
.rotateAngle {
animation: autoRotateWithAngleVar 1s 1 both ease;
}
@keyframes autoRotateWithAngleVar {
0% {
transform: rotate(var(--angleBegin));
}
to {
transform: rotate(var(--angleEnd));
}
}
</style>
</head>
<body>
<section>
<div>
<button data-btn="btn1">positive click</button>
<button data-btn="btn2">negative click</button>
</div>
<div id="div" data-begin="0" data-end="0">六边形 Hexagon</div>
<div id="bg">六边形 Hexagon</div>
<div class="circle"></div>
</section>
<!-- js -->
<script>
let log = console.log;
let div = document.querySelector(`[id="div"]`);
let btn1 = document.querySelector(`[data-btn="btn1"]`);
let btn2 = document.querySelector(`[data-btn="btn2"]`);
const autoRotateWithAngles = (direct = "postive", angle = 0) => {
let begin = parseInt(div.dataset.begin);
let end = parseInt(div.dataset.end);
if (direct === "postive") {
let beginAngle = begin + angle;
let endAngle = end + angle;
div.dataset.begin = beginAngle > 360 ? beginAngle % 360 : beginAngle;
div.dataset.end = endAngle > 360 ? endAngle % 360 : endAngle;
//
// document.documentElement.style.setProperty("--angleBegin", `var(--angle${(begin + angle) > 360 ? (begin + angle) % 360 : (begin + angle)})`);
// document.documentElement.style.setProperty("--angleEnd", `var(--angle${(end + angle) > 360 ? (end + angle) % 360 : (end + angle)})`);
// div.classList.remove(`rotateAngle`);
// setTimeout(() => {
// div.classList.add(`rotateAngle`);
// document.documentElement.style.setProperty("--angleDefault", `var(--angle${(begin + angle) % 360})`);
// }, 1000);
document.documentElement.style.setProperty("--angleBegin", `var(--angle${beginAngle > 360 ? beginAngle % 360 : beginAngle})`);
document.documentElement.style.setProperty("--angleEnd", `var(--angle${endAngle > 360 ? endAngle % 360 : endAngle})`);
div.classList.remove(`rotateAngle`);
setTimeout(() => {
div.classList.add(`rotateAngle`);
document.documentElement.style.setProperty("--angleDefault", `var(--angle${beginAngle % 360})`);
}, 1000);
}
if (direct === "center") {
// do nothing
}
if (direct === "nagitive") {
let beginAngle = (begin - angle) < 0 ? 360 - Math.abs(begin - angle) : (begin - angle);
let endAngle = (end - angle) < 0 ? 360 - Math.abs(end - angle) : (end - angle);
// let beginAngle = Math.abs(begin - angle);
// let endAngle = Math.abs(end - angle);
log(`beginAngle =`, beginAngle);
log(`endAngle =`, endAngle);
div.dataset.begin = beginAngle > 360 ? (beginAngle % 360) : beginAngle;
div.dataset.end = endAngle > 360 ? (endAngle % 360) : endAngle;
log(`div.dataset.begin =`, div.dataset.begin);
log(`div.dataset.end =`, div.dataset.end);
//
// document.documentElement.style.setProperty("--angleBegin", `var(--angle${(begin - angle) > 360 ? (begin - angle) % 360 : (begin - angle)})`);
// document.documentElement.style.setProperty("--angleEnd", `var(--angle${(end - angle) > 360 ? (end - angle) % 360 : (end - angle)})`);
// div.classList.remove(`rotateAngle`);
// setTimeout(() => {
// div.classList.add(`rotateAngle`);
// document.documentElement.style.setProperty("--angleDefault", `var(--angle${(begin - angle) % 360})`);
// }, 1000);
document.documentElement.style.setProperty("--angleBegin", `var(--angle${beginAngle > 360 ? beginAngle % 360 : beginAngle})`);
document.documentElement.style.setProperty("--angleEnd", `var(--angle${endAngle > 360 ? endAngle % 360 : endAngle})`);
div.classList.remove(`rotateAngle`);
setTimeout(() => {
div.classList.add(`rotateAngle`);
document.documentElement.style.setProperty("--angleDefault", `var(--angle${beginAngle % 360})`);
}, 1000);
}
};
btn1.addEventListener(`click`, () => {
btn1.setAttribute(`disabled`, true);
autoRotateWithAngles("postive", 60);
// autoRotateWithAngles("postive", 120);
setTimeout(() => {
// btn.setAttribute(`disabled`, false);
btn1.removeAttribute(`disabled`);
}, 1000);
});
btn2.addEventListener(`click`, () => {
btn2.setAttribute(`disabled`, true);
autoRotateWithAngles("nagitive", 60);
// autoRotateWithAngles("nagitive", 120);
setTimeout(() => {
// btn.setAttribute(`disabled`, false);
btn2.removeAttribute(`disabled`);
}, 1000);
});
</script>
</body>
</html>
demo
https://repl.it/@xgqfrms/autoLoopArray-with-direction
touch circle menu
html & :root
let html = document.querySelector(`:root`);
html.scrollHeight;
html.innerText = html.innerText.split(' ').join('');
refs
xgqfrms 2012-2020
www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！
CSS3 & CSS var & :root的更多相关文章
- 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 ...
- css var & auto width css triangle
css var & auto width css triangle https://codepen.io/xgqfrms/pen/PooeEbd css var https://codepen ...
- [CSS3] CSS :target Selector
The :target selector allows us to interact with a fragment identifier, or hash, in our URL from CSS. ...
- [CSS3] CSS Media Queries
Using CSS media queries allows you to design responsive layout in your web apps and website. We will ...
- [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 ...
- [CSS3] CSS Background Images
Body with background image and gradient html { background: linear-gradient(#000, white) no-repeat; h ...
- CSS3/CSS之居中解析（水平+垂直居中、水平居中，垂直居中）
首先,我们来看下垂直居中: (1).如果是单行文本,则可以设置的line-height的数值,让其等于父级元素的高度! <!DOCTYPE html> <html lang=&quo ...
- CSS3+CSS+HTML实现网页
效果图: 代码实现: 样式部分style.css: *{ margin:; padding:; } body{ background-color: #673929; font-size: 16px; ...
- 基于js的网页换肤（不需要刷新整个页面，只需替换css文件）
1. [代码][JS]代码 <HTML><HEAD><link ID="skin" rel="stylesheet" typ ...
随机推荐
- codevs3639
题目描述 Description 给出一棵树,求出树的中心. 为了定义树的中心,首先给每个结点进行标号.对于一个结点K,如果把K从树中删除(连同与它相连的边一起),剩下的被分成了很多块,每一块显然又是 ...
- java关键字static使用总结
java关键字static使用总结 1.static修饰的方法被称之为静态方法也叫做类方法,加static的方法,可以通过类名直接访问,不加static的方法只能通过对象名访问. 静态方法可以直接通过 ...
- JVM 参数的设置及解析
JVM 参数的设置及解析 1.关于JVM配置: 2.Linux JVM设置: 1.关于JVM配置: 设置jvm内存的参数有四个: -Xmx 设置堆(Java Heap)最大值,默认值为物理内存的1/4 ...
- MVC与三层架构解析学习
概要 MVC与三层架构不是简单的相等,二者之间存在一些区别. 今天,看到一位博主总结笔记,借鉴而来,以供以后学习. 将javaweb开发中的MVC(SSM框架)与三级架构比较,来解析二者之间的关系. ...
- Gitlab + DRBD HA
部署简介: 为了gitlab有容灾的能力,所以部署一个HA的小集群,用到的软件有 gitlab 和brbd,目前现有环境为 master节点 系统版本:CentOS release 6.5 (Fina ...
- RIDE对应驱动下载
https://blog.csdn.net/apollolkj/article/details/75408237
- python--可迭代对象、迭代器和生成器
迭代器 1.什么是迭代器? 不依赖于索引的取值方式 迭代是一个重复的过程,即每一次重复为一次迭代,并且每次迭代的结果都是下一次迭代的初始值 示例: str1 = 'abcde' count = 0 w ...
- 使用两个FIFO完成流水操作
一.设计目标 写一个FIFO控制器,控制器里有两个FIFO,输入的数据由串行接收模块(uart_rx_module)送来,一共有86行86列的数据,按0.1.2行,1.2.3行,直到最后83.84.8 ...
- 爬虫入门到放弃系列02：html网页如何解析
前言 上一篇文章讲了爬虫的概念,本篇文章主要来讲述一下如何来解析爬虫请求的网页内容. 一个简单的爬虫程序主要分为两个部分,请求部分和解析部分.请求部分基本一行代码就可以搞定,所以主要来讲述一下解析部分 ...
- 搭建tdh平台
1.卸载tdh平台(见tdh集群卸载文件夹) 在manager节点执行chmod +x uninstall.sh (非root用户执行sudo chmod +x uninstall.sh)开始卸载TD ...