assets/index.css
.clearfix::after {
content: '';
display: block;
clear: both;
}
label{
user-select: none;
}
.CodeMirror-hscrollbar {
overflow: hidden;
}
input[type="range"] {
margin: 0;
}
/* vuep */
.vuep{
flex-direction: column;
height: initial;
}
.vuep-editor, .vuep-preview, .vuep-error{
width: 100%;
height: initial;
}
.vuep-editor pre{
font-family: Roboto Mono, Monaco, courier, monospace;
}
/* readme */
a[juejinminibook] {
position: relative;
display: inline-block;
width: 129px;
height: 180.59px;
line-height: 0;
}
a[juejinminibook]::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 92px;
height: 92px;
background: url("https://lhammer.cn/You-need-to-know-css/static/5bc844166fb9a05cd676ebca.png") no-repeat center / 100%;
opacity: 0;
transform: translateX(-50%) translateY(-50%) scale3d(0, 0, 0);
transition:display .3s, opacity .3s, transform .3s;
}
a[juejinminibook*="5ba42844f265da0a8a6aa5e9"]::after {
background-image: url("https://lhammer.cn/You-need-to-know-css/static/5ba42844f265da0a8a6aa5e9.png");
}
a[juejinminibook*="5bdc715fe51d454e755f75ef"]::after {
background-image: url("https://lhammer.cn/You-need-to-know-css/static/5bdc715fe51d454e755f75ef.png");
}
a[juejinminibook*="5afc2e5f6fb9a07a9b362527"]::after {
background-image: url("https://lhammer.cn/You-need-to-know-css/static/5afc2e5f6fb9a07a9b362527.png");
}
a[juejinminibook*="5a124b29f265da431d3c472e"]::after {
background-image: url("https://lhammer.cn/You-need-to-know-css/static/5a124b29f265da431d3c472e.png");
}
a[juejinminibook]:hover > img {
transition: filter .3s;
filter: blur(3px);
}
a[juejinminibook]:hover::after {
opacity: 1;
transform: translateX(-50%) translateY(-50%) scale3d(1, 1, 1);
}
/* markdown */
.markdown-section{
max-width: 929px;
}
.markdown-section a {
text-decoration: none;
}
.markdown-section iframe {
border: none;
}
.vuep-preview, .vuep-error{
padding: 8px;
}
/* stripes-background */
@keyframes panoramic{
to {
background-position: 200% 0;
}
}
/* pie-chart */
@keyframes pie-chart-spin1 {
to { transform: rotate(.5turn); }
}
@keyframes pie-chart-bg1 {
to { background: #b4a078; }
}
@keyframes pie-chart-spin2 {
to { transform: rotate(.5turn); }
}
@keyframes pie-chart-bg2 {
50% { background: #b4a078; }
}
@keyframes pie-chart-fillup{
to { stroke-dasharray: 100 100; }
}
@keyframes pie-chart-per1{
to { stroke-dasharray: 37 100; }
}
@keyframes pie-chart-per2{
to { stroke-dasharray: 32 100; }
}
@keyframes pie-chart-per3{
to { stroke-dasharray: 32 100; }
}
@keyframes text-blink-effect {
50% {
text-shadow: 0 0 .1em, 0 0 .3em;
}
to {
text-shadow: 0 0 .1em;
}
}
@keyframes circular-text-rotate {
to {
transform: rotate(1turn);
}
}
/* gitalk */
.gt-container a {
color: #b4a078;
}
.gt-container a:hover {
color: #C3B393;
border-color: #C3B393;
}
.gt-container .gt-svg svg {
fill: #b4a078;
}
.gt-container .gt-spinner::before {
border-top-color: #b4a078;
}
.gt-container .gt-btn {
border-color: #b4a078;
background-color: #b4a078;
}
.gt-container .gt-btn:not(.gt-btn-preview):hover {
border-color: #C3B393;
background-color: #C3B393;
}
.gt-container .gt-btn-preview {
color: #b4a078;
background-color: white;
}
.gt-container .gt-btn-preview:hover {
border-color: #b4a078;
}
.gt-container .gt-link {
border-bottom: 1px dotted #b4a078;
}
.gt-container .gt-user .is--poping .gt-ico svg {
fill: #b4a078;
}
.gt-container .gt-popup .gt-action.is--active:before {
background: #b4a078;
}
.gt-container .gt-header-controls-tip {
color: #b4a078;
}
.gt-container .gt-comment-username {
color: #b4a078;
}
/* elastic */
@keyframes elastic-grow {
from {
transform: scale(0);
}
70% {
transform: scale(1.1);
animation-timing-function: cubic-bezier(.1, .25, .1, .25);
}
}
@keyframes elastic-dec {
from {
transform: scale(1);
}
to {
transform: scale(0);
animation-timing-function: cubic-bezier(.25, .1, .25, .1);
}
}
/* blink */
@keyframes blink-normal {
50% {
color: transparent;
}
}
@keyframes blink-alternate {
to {
color: transparent;
}
}
/* typing */
@keyframes typing{
from {
width: 0;
}
}
@keyframes caret{
50% { border-right-color: currentColor}
}
/* shake */
@keyframes shake-baidu {
from { transform: rotate(0deg); }
4% { transform: rotate(5deg); }
12.5% { transform: rotate(-5deg); }
21% { transform: rotate(5deg); }
29% { transform: rotate(-5deg); }
37.5% { transform: rotate(5deg); }
46% { transform: rotate(-5deg); }
50%,to { transform: rotate(0deg); }
}
@keyframes shake {
2% { transform: translate(0.5px, 2.5px) rotate(1.5deg); }
4% { transform: translate(0.5px, -1.5px) rotate(0.5deg); }
6% { transform: translate(-0.5px, -1.5px) rotate(-0.5deg); }
8% { transform: translate(2.5px, -0.5px) rotate(0.5deg); }
10% { transform: translate(2.5px, 1.5px) rotate(0.5deg); }
12% { transform: translate(2.5px, -0.5px) rotate(0.5deg); }
14% { transform: translate(-1.5px, -1.5px) rotate(-0.5deg); }
16% { transform: translate(-0.5px, 0.5px) rotate(0.5deg); }
18% { transform: translate(-0.5px, 2.5px) rotate(1.5deg); }
20% { transform: translate(2.5px, -1.5px) rotate(1.5deg); }
22% { transform: translate(2.5px, -1.5px) rotate(0.5deg); }
24% { transform: translate(0.5px, -1.5px) rotate(-0.5deg); }
26% { transform: translate(-1.5px, 1.5px) rotate(0.5deg); }
28% { transform: translate(-1.5px, -0.5px) rotate(1.5deg); }
30% { transform: translate(-0.5px, -0.5px) rotate(1.5deg); }
32% { transform: translate(-0.5px, -0.5px) rotate(-0.5deg); }
34% { transform: translate(0.5px, -0.5px) rotate(0.5deg); }
36% { transform: translate(-1.5px, 1.5px) rotate(1.5deg); }
38% { transform: translate(2.5px, 1.5px) rotate(1.5deg); }
40% { transform: translate(1.5px, -1.5px) rotate(0.5deg); }
42% { transform: translate(1.5px, -1.5px) rotate(1.5deg); }
44% { transform: translate(1.5px, 2.5px) rotate(1.5deg); }
46% { transform: translate(1.5px, -1.5px) rotate(0.5deg); }
48% { transform: translate(-0.5px, -1.5px) rotate(0.5deg); }
50% { transform: translate(-1.5px, -1.5px) rotate(1.5deg); }
52% { transform: translate(1.5px, -0.5px) rotate(1.5deg); }
54% { transform: translate(-0.5px, -0.5px) rotate(0.5deg); }
56% { transform: translate(2.5px, 0.5px) rotate(0.5deg); }
58% { transform: translate(-0.5px, 0.5px) rotate(1.5deg); }
60% { transform: translate(0.5px, 1.5px) rotate(-0.5deg); }
62% { transform: translate(-0.5px, -1.5px) rotate(0.5deg); }
64% { transform: translate(-0.5px, -1.5px) rotate(0.5deg); }
66% { transform: translate(1.5px, -1.5px) rotate(-0.5deg); }
68% { transform: translate(0.5px, 1.5px) rotate(-0.5deg); }
70% { transform: translate(0.5px, 2.5px) rotate(-0.5deg); }
72% { transform: translate(2.5px, -1.5px) rotate(1.5deg); }
74% { transform: translate(-1.5px, -0.5px) rotate(0.5deg); }
76% { transform: translate(-1.5px, -1.5px) rotate(1.5deg); }
78% { transform: translate(0.5px, 0.5px) rotate(1.5deg); }
80% { transform: translate(0.5px, -0.5px) rotate(1.5deg); }
82% { transform: translate(-0.5px, -1.5px) rotate(1.5deg); }
84% { transform: translate(2.5px, -0.5px) rotate(1.5deg); }
86% { transform: translate(0.5px, 0.5px) rotate(-0.5deg); }
88% { transform: translate(1.5px, 2.5px) rotate(-0.5deg); }
90% { transform: translate(-1.5px, 2.5px) rotate(1.5deg); }
92% { transform: translate(-0.5px, -1.5px) rotate(-0.5deg); }
94% { transform: translate(1.5px, -0.5px) rotate(0.5deg); }
96% { transform: translate(-1.5px, 2.5px) rotate(1.5deg); }
98% { transform: translate(2.5px, 2.5px) rotate(0.5deg); }
0%, 100% { transform: translate(0, 0) rotate(0); }
}
/* smooth */
@keyframes smooth{
to {
background-position: 1970px center;
}
}
/* circular-smooth */
@keyframes circular-smooth-spin {
from {
transform: rotate(0turn) translateY(-125px) rotate(1turn)
}
to {
opacity: 1;
transform: rotate(1turn) translateY(-125px) rotate(0turn)
}
}
/* text-underline */
@keyframes text-underline-slideInLeft {
from {
background-position-x: -432px;
}
50% {
background-position-x: 0;
}
to {
background-position-x: 432px;
}
}
/* one-pixel-line */
@media (min-resolution: 2dppx) {
main.main > span.one-pixel-line.shadow::after {
box-shadow: 0 0 0 .5px #b4a078;
}
}
@media (min-resolution: 3dppx) {
main.mian > span.one-pixel-line.shadow::after {
box-shadow: 0 0 0 .333333px #b4a078;
}
}
@media (min-resolution: 2dppx) {
main.main > span.one-pixel-line.top::before {
width: 200%;
transform: scale(.5) translateZ(0);
}
}
@media (min-resolution: 3dppx) {
main.main > span.one-pixel-line.top::before {
width: 300%;
transform: scale(.333333) translateZ(0);
}
}
@media (min-resolution: 2dppx) {
main.main > span.one-pixel-line.right::after {
height: 200%;
transform: scale(.5) translateZ(0);
}
}
@media (min-resolution: 3dppx) {
main.main > span.one-pixel-line.right::after {
height: 300%;
transform: scale(.333333) translateZ(0);
}
}
@media (min-resolution: 2dppx) {
main.main > span.one-pixel-line.bottom::after {
width: 200%;
transform: scale(.5) translateZ(0);
}
}
@media (min-resolution: 3dppx) {
main.main > span.one-pixel-line.bottom::after {
width: 300%;
transform: scale(.333333) translateZ(0);
}
}
@media (min-resolution: 2dppx) {
main.main > span.one-pixel-line.left::before {
height: 200%;
transform: scale(.5) translateZ(0);
}
}
@media (min-resolution: 3dppx) {
main.main > span.one-pixel-line.left::before {
height: 300%;
transform: scale(.333333) translateZ(0);
}
}
/* bounce */
@keyframes bounce {
40%,
60%,
80%,
to {
transform: translateY(380px);
animation-timing-function: ease;
}
50% {
transform: translateY(260px);
}
70% {
transform: translateY(300px);
}
90% {
transform: translateY(360px);
}
}
/* radio 公共样式 */
.radio-wrap {
margin-right: 29px;
}
.radio-wrap input[type="radio"]{
position: absolute;
clip: rect(0, 0, 0, 0);
}
.radio-wrap input[type="radio"] + label{
display: inline-block;
height: 12px;
line-height: 10px; /* 英文 */
cursor: pointer;
position: relative;
user-select: none;
}
.radio-wrap input[type="radio"] + label:not(:nth-of-type(6)){
margin-top: 29px;
margin-bottom: 29px;
}
.radio-wrap input[type="radio"] + label::before{
content: "";
display: inline-block;
width: 10px; height: 10px;
border-radius: 8px;
vertical-align: top;
margin-right: .2em;
border: 1px solid #ccc;
background-color: #fff;
transition: border-color .2s ease-in-out, background-color .2s ease-in-out;
}
.radio-wrap input[type="radio"]:not(:disabled) + label:hover::before{
border-color: #b4a078;
}
.radio-wrap input[type="radio"]:checked + label::before{
border-color: #b4a078 !important;
background-color: #b4a078;
}
.radio-wrap input[type="radio"] + label::after{
content: "";
display: inline-block;
width: 4px; height: 4px;
background-color: #fff;
border-radius: 4px;
position: absolute;
left: 4px; top: 50%;
transform: translateY(-50%) scale(0);
transition: transform .2s ease-in-out;
}
.radio-wrap input[type="radio"]:checked + label::after{
transform: translateY(-50%) scale(1);
transition: transform .2s ease-in-out;
}
.yntkc-btn {
border: 1px solid rgba(180,160,120,.9);
padding: 1px 12px;
border-radius: 5px;
}