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 ...
随机推荐
- Main event loop
https://developer.apple.com/library/archive/documentation/General/Conceptual/Devpedia-CocoaApp/MainE ...
- http2 http1 对比
RFC 7540 - Hypertext Transfer Protocol Version 2 (HTTP/2) https://tools.ietf.org/html/rfc7540#page-4 ...
- 内存屏障 WriteBarrier 垃圾回收 屏障技术
https://baike.baidu.com/item/内存屏障 内存屏障,也称内存栅栏,内存栅障,屏障指令等, 是一类同步屏障指令,是CPU或编译器在对内存随机访问的操作中的一个同步点,使得此点之 ...
- httpd反向代理实践（一）
div.example { background-color: rgba(229, 236, 243, 1); color: rgba(0, 0, 0, 1); padding: 0.5em; mar ...
- SpringMVC传递JSON数据
文章目录 一.前后端传递和接收JSON数据 1:是要Ajax默认格式来传递数据(*) 2:使用application/json格式来传递数据 二.spring-web.xml中需要如下配置 一.前后端 ...
- P6686 混凝土数学
哈哈哈!我爱月赛. 第一次月赛拿到分呢. (卡掉卡掉) 题目描述 你正在看混凝土数学,这时旁边的工地开工了,你觉得看他们施工更有意思,于是你向窗外望去,注意到了一些长度不同的木棍.具体而言,你看到了 ...
- 嵌入式设备上卷积神经网络推理时memory的优化
以前的神经网络几乎都是部署在云端(服务器上),设备端采集到数据通过网络发送给服务器做inference(推理),结果再通过网络返回给设备端.如今越来越多的神经网络部署在嵌入式设备端上,即inferen ...
- C. Table Decorations
time limit per test 1 second memory limit per test 256 megabytes input standard input output standar ...
- Codeforces Round #494 (Div. 3) D. Coins and Queries (贪心,数学)
题意:给你一组全是\(2^d\ (d\ge0)\)的数,询问q次,每次询问一个数,问这个数是否能够由原数组中的数相加得到,如果能,输出最少用多少个数,否则输出\(-1\). 题解:首先贪心得出结论:如 ...
- AtCoder AIsing Programming Contest 2020 D - Anything Goes to Zero (二进制,模拟)
题意:给你一个长度为\(n\)的\(01\)串,从高位到低位遍历,对该位取反,用得到的十进制数\(mod\)所有位上\(1\)的个数,不断循环直到为\(0\),输出每次遍历时循环的次数. 题解:根据题 ...