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 ...
随机推荐
- 强制杀死进程后，进程相关的socket未必发送RST
强制杀死进程后,进程相关的socket未必发送RST
- WPF和MVVM的结合使用方法，不可错过
Model:存储数据模型(类) 也在此业务逻辑,主要负责类文件的存储. ViewModel:连接View和Model,借助Command来负责界面的跳转和调用Model中方法来操作Model的数据. ...
- 深度学习论文翻译解析（十八）：MobileNetV2: Inverted Residuals and Linear Bottlenecks
论文标题:MobileNetV2: Inverted Residuals and Linear Bottlenecks 论文作者:Mark Sandler Andrew Howard Menglong ...
- scala 两个map合并，key相同时value相加/相减都可
scala 两个map合并,key相同时value相加 1.map自带的合并操作 2.map函数 2.1示例 2.2合并两个map 3.用foldLeft 3.1 语法 3.2 合并两个map 1.m ...
- CCDictionary 用调试器查看问题
if(dic->objectForKey("uid")) uid = dic->valueForKey("uid")->getCString( ...
- 2019 Multi-University Training Contest 1 D.Vacation(思维)
题意:有n俩车行驶在一条道路上,每辆车有车长li,距离终点的距离si,速度vi,不能超出,并且驶过终点后会依旧保持原状态行驶,问最后一辆车过终点的时间. 思路:因为行驶过终点后还是要保持之前的行驶方式 ...
- HDU 3449 依赖背包
这道题虽然水水的,但是还是成功地给我增加了10多个WA. 最开始拿着题,一看,依赖背包嘛~直接DFS树形DP嗨起来,甚至连内存都没有算一下,3MLE: 然后又仔细看了一下题,没有必要用树形背包来做嘛, ...
- P2765 魔术球问题 (网络流)
题意:n根柱子 把编号1,2,3....的球依次插到柱子上去 需要满足相邻的两个球编号加起来为完全平方数 n < 55 题解:网络流24(23)题里的 但是一直不知道怎么建图 或者说建图的意义 ...
- 【uva 1615】Highway（算法效率--贪心 区间选点问题）
题意:给定平面上N个点和一个值D,要求在x轴上选出尽量少的点,使得对于给定的每个店,都有一个选出的点离它的欧几里德距离不超过D. 解法:先把问题转换成模型,把对平面的点满足条件的点在x轴的直线上可得到 ...
- Strategic game POJ - 1463 树型dp
//题意:就是你需要派最少的士兵来巡查每一条边.相当于求最少点覆盖,用最少的点将所有边都覆盖掉//题解://因为这是一棵树,所以对于每一条边的两个端点,肯定要至少有一个点需要放入士兵,那么对于x-&g ...