善用 -1
将变量乘于 -1，改变其正负值，有时能有奇效
示例 1
<!-- @format -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
}
a {
--p: 0;
--q: calc(1 - var(--p));
position: relative;
overflow: hidden;
z-index: 1;
width: 12em;
background: #fff;
color: #000;
font-size: 2em;
line-height: 3;
font-weight: 700;
border: 1px solid;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
a::before,
a::after {
--i: var(--p);
--j: calc(1 - var(--i));
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: calc(var(--j) * (100% - 15em));
width: 15em;
transform-origin: calc(var(--j) * 100%) calc(var(--i) * 100%);
transform: rotate(-12deg)
translate(calc(var(--q) * (1 - 2 * var(--i)) * -100%));
box-shadow: 0 0 0 1px currentcolor;
background: currentcolor;
color: #ef4654;
transition: transform 0.5s ease-in-out;
content: '';
}
a::after {
--i: var(--q);
}
a:hover {
--p: 1;
}
</style>
</head>
<body>
<a href="#">HOVER ME</a>
</body>
</html>
示例 2
<!-- @format -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
background: #f2f2f2;
height: 100vh;
}
.taiji {
position: relative;
display: flex;
align-items: center;
width: 200px;
height: 200px;
background: linear-gradient(#000 50%, #fff 50%);
border-radius: 50%;
animation: r 2s linear infinite;
}
.taiji::before,
.taiji::after {
content: '';
--i: 0;
box-sizing: border-box;
flex: 1;
height: 50%;
border-radius: 50%;
border: 30px solid hsl(0, 0%, calc((1 - var(--i)) * 100%));
background: hsl(0, 0%, calc(var(--i) * 100%));
transform-origin: calc(var(--i) * 100%) 50%;
transform: scale(0.5);
animation: s 1s ease-in-out calc(var(--i) * -1s) infinite
alternate;
}
.taiji::after {
--i: 1;
}
@keyframes s {
to {
transform: scale(1.5);
}
}
@keyframes r {
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="taiji"></div>
</body>
</html>