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 ...
随机推荐
- 线上一次大量 CLOSE_WAIT 复盘
https://mp.weixin.qq.com/s/PfM3hEsDa3CMLbbKqis-og 线上一次大量 CLOSE_WAIT 复盘 原创 ms2008 poslua 2019-07-05 最 ...
- Pulsar Pub/Sub Messaging
The Apache Software Foundation Announces Apache Pulsar as a Top-Level Project : The Apache Software ...
- IdentityServer4之Implicit和纯前端好像很配哦
前言 上一篇Resource Owner Password Credentials模式虽然有用户参与,但对于非信任的第三方的来说,使用这种模式是有风险的,所以相对用的不多:这里接着说说implicit ...
- loj10161 叶子的颜色
CQOI 2009 给一棵有 mm 个节点的无根树,你可以选择一个度数大于 11 的节点作为根,然后给一些节点(根.内部节点.叶子均可)着以黑色或白色.你的着色方案应保证根节点到各叶子节点的简单路径上 ...
- Redis-设置Key的过期时间及相关策略
Redis-设置Key的过期时间及相关策略 1.设置key的过期时间 1.1expire key second:设置key的过期时间(秒) 1.2ttl key:查看key的有效期 1.3persis ...
- 项目总结—校园办公管理系统（SSM框架搭建）
文章目录 CSDN下载地址:校园管理系统 GIT下载地址:校园管理系统 学以致用,学习完SSM框架之后,独立完成一个小院办公管理系统,熟悉框架的开发流程,熟悉项目的开发流程,完成一个简单的校园办公管理 ...
- MySQL复合索引探究
复合索引(又称为联合索引),是在多个列上创建的索引.创建复合索引最重要的是列顺序的选择,这关系到索引能否使用上,或者影响多少个谓词条件能使用上索引.复合索引的使用遵循最左匹配原则,只有索引左边的列匹配 ...
- Educational Codeforces Round 102 (Rated for Div. 2) B. String LCM (构造,思维)
题意:给你两个字符串\(a\)和\(b\),找出它们的\(lcm\),即构造一个新的字符串\(c\),使得\(c\)可以由\(x\)个\(a\)得到,并且可以由\(y\)个\(b\)得到,输出\(c\ ...
- hdu3516 Tree Construction
Problem Description Consider a two-dimensional space with a set of points (xi, yi) that satisfy xi & ...
- Codeforces Round #656 (Div. 3) A. Three Pairwise Maximums (数学)
题意:给你三个正整数\(x\),\(y\),\(z\),问能够找到三个正整数\(a\),\(b\),\(c\),使得\(x=max(a,b)\),\(y=max(a,c)\),\(z=max(b,c) ...