css 不常用实用知识点 - 博客sl -

 css 动态

https://csscoco.com/inspiration/#/./border/border-image-animate

1,:target伪类与:hover、:link、:visited、:focus等伪类的用法一样

:target {color:blue}

<div class="box"> <a class="btn" href="#stop">stop</a> <a class="btn" href="#play">play</a> </div>

#stop:target ~ .animation { animation-play-state: paused; }

#play:target ~ .animation { animation-play-state: running; }

2,animation-play-state 状态可控制

.animation { width: 100px; height: 100px; margin: 50px auto; background: deeppink; animation: move 2s linear infinite alternate; }

.stop:hover ~ .animation { animation-play-state: paused; }

3，vmin，vmax,类似vh,vw

4,伪类实现loading

<div></div>　

body, html { height: 100%; overflow: hidden; }

div {

position: relative; width: 200px; height: 200px; border-radius: 50%; margin: 100px auto; transform: rotate(360deg);

animation: rotate 45s infinite linear; }

div::before {

position: absolute; content: "";

top: 0px;

left: 0px; right: 0px;

bottom: 0px; box-sizing: border-box;

border-radius: 50%; border-top: 3px solid #000;

border-left: 3px solid #000;

border-bottom: 3px solid transparent;

border-right: 3px solid transparent;

transform: rotate(720deg);

animation: rotate 3s infinite ease-out;

}

div::after {

position: absolute; content: "";

top: -2px; left: -2px; right: -2px;

bottom: -2px; box-sizing: border-box; border-radius: 50%;

border-bottom: 7px solid transparent; border-right: 7px solid transparent;

border-top: 7px solid #fff; border-left: 7px solid #fff; transform: rotate(720deg);

animation: rotate 3s infinite ease-in-out; }

@keyframes rotate { 100% { transform: rotate(0deg); } }