两个div实现雷达扫描效果

两个div实现雷达扫描效果

标题:有两个DIV,如次:

两个div实现雷达扫描效果

<div class="radar">

两个div实现雷达扫描效果

<div class="fan"></div>

两个div实现雷达扫描效果

</div>个中,radar类DIV是200px的宽高,fan类DIV是100px的宽高。

两个div实现雷达扫描效果

请用CSS实行底下的功效。

功效兼容新颖合流欣赏器即可。 ~我:嗯!这即是一张动静图搞定的工作,叫UI出一个动图就实行了,此题已解,聪明如我!~

~口试官:外出左拐,感谢!~

言归正传,这道题观察的常识点仍旧蛮多的,底下咱们逐一来进修下~

要害帧转化的扇形,实行的功效不妨经过要害帧来处置。

比方底下的要害帧代码:

div {

animation-duration: 3s;

animation-name: identifier;

// more code

}

@keyframes identifier {

from { top: 0; }

to { top: 100px; }

}DIV从隔绝顶部0的场所变动到隔绝顶部100px的场所,所有进程须要3秒。

脸色突变扇形的脸色功效是一个线性突变的进程,咱们不妨经过linear-gradient来实行。

比方底下的代码:

div {

background: linear-gradient(to right, white, black);

// more code

}DIV的后台脸色从左往右,由白色到玄色的突变;

skew因变量的参观固然,你不妨创造扇形来到达功效,然而实行的本钱没有比skew来得低~

底下咱们径直来歪曲一个正方形。

// origin

div {

width: 100px;

height: 100px;

background: blue;

}

// after

div {

width: 100px;

height: 100px;

background: blue;

transform: skew(-10deg);

}如图:

::before ::after 伪元素这边的标题诉求很领会了,两个DIV,即使你不过用这两个DIV自己增添款式,能到达功效?

::before创造一个伪元素,将其变成配合选中元素的第一个元素。

::after创造一个伪元素,动作已选中元素的结果一个元素。

::before 和 ::after这两个假造元素默许是行内元素,常常共同content属性来增添实质。

比方:

div{

width: 100px;

height: 100px;

background: red;

}

div::after {

width: 100px;

height: 100px;

background: blue;

display: block;

content: '::after'

}即使你运转上头的代码,你将获得上红下蓝的两个DIV,并且底下的这个DIV还包括::after的字样。

box-sizing的参观再有一个要制止踩坑的详细,边框与边框的详细题目该当如何处置才看上去不那么高耸。

咱们很凡是得运用border: 1px solid #eee;完事了。

殊不知又被出题者坑了一波。

咱们设定了div的宽高为50px之后,再在其普通上增添边框border: 1px solid #eee;,那么在本质中咱们就十分于设定了52px的宽高。

用box-sizing: border-box;就不妨处置这个题目;

div {

width: 50px;

height: 50px;

background: red;

border: 1px solid #eee;

box-sizing: border-box;

}如许一来,获得的宽高就不会爆发变革了,保持是50px。

题手段实行代码好了,该说完的说结束,咱们来实行下标题说的功效吧。如次CSS代码:

.radar {

overflow: hidden;

position: relative;

margin: 200px;

width: 200px;

height: 200px;

border-radius: 50%;

background: #fff;

border: 1px solid #5ef2ff;

box-sizing: border-box;

}

.radar::before {

width: 100px;

height: 200px;

content: '';

display: block;

position: absolute;

right: 0;

top: 0;

box-sizing: border-box;

border-left: 1px solid #5ef2ff;

}

.radar::after {

width: 200px;

height: 100px;

content: '';

display: block;

box-sizing: border-box;

border-bottom: 1px solid #5ef2ff;

}

.fan {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

border-radius: 50%;

box-sizing: border-box;

border: 1px solid #5ef2ff;

width: 100px;

height: 100px;

}

.fan::after {

content: "";

width: 100px;

height: 100px;

display: block;

box-sizing: border-box;

position: relative;

top: -50%;

right: -50%;

transform-origin: 0% 100%;

border-bottom: 3px solid transparent;

border-image: linear-gradient(to right, transparent, #5ef2ff);

border-image-slice: 3;

background: transparent;

background-image: linear-gradient(to right, transparent, #9bfdfd);

animation: rotateAnimate 2s linear infinite;

}

@keyframes rotateAnimate {

from {

transform: rotate(0deg) skew(-10deg)

}

to {

transform: rotate(360deg) skew(-10deg)

}

}CSS真是神奇~

对准这个标题,你的处置计划又是什么呢?

无妨在底下的留言给出,进修互勉下~

码字不易,流过途经来个赞可否 先感谢了!

ε=ε=ε=┏(゜ロ゜;)┛

为你引荐制造你GITHUB的手刺 和 从零开拓简略微信小步调

更多实质,请前去jimmy github。

分享到 :
相关推荐

Leave a Reply

Your email address will not be published. Required fields are marked *