純CSS寫一個環(huán)繞動畫效果

lt;!DOCTYPE html>

<head>

<style>

margin: 0;

padding: 0;

list-style: none;

outline: none;

}

html,body{

width: 100%;

height: 100%;

}

body{

background: radial-gradient(ellipse at center, #34679a 0%, #214163 50%, #0d1926 100%);

}

body>div{

/* 上下并排，水平居中

display: inline-block;

text-align: center; */

width: 200px;

height: 200px;

border: 1px solid #fff;

border-radius: 50%;

position: absolute;

top: 15%;

left: 50%;

margin-left: -50px;

transform: rotateX(80deg) rotateY(20deg);

transform-style: preserve-3d;

}

body > div:nth-of-type(2){

transform: rotateX(-80deg) rotateY(20deg);

}

body > div:nth-of-type(3){

transform: rotateX(-70deg) rotateY(60deg);

}

body > div:nth-of-type(4){

transform: rotateX(70deg) rotateY(60deg);

}

body > div:first-of-type::after{

content: "";

/* display: inline-block; */

width: 40px;

height: 40px;

background: #fff;

position: absolute;

top: 50%;

left: 50%;

margin-top: -20px;

margin-left: -20px;

transform: rotateX(80deg);

border-radius: 50%;

animation: nuclues 2s linear infinite;

}

@keyframes nuclues{

0%{

box-shadow: 0 0 0 transparent;

}

50%{

box-shadow: 0 0 0 transparent;

}

100%{

box-shadow: 0 0 0 transparent;

}

body > div > div{

width: 200px;

height: 200px;

/* border-radius: 50%; */

transform-style: preserve-3d;

animation: trail 1s infinite linear;

}

@keyframes trail{

from{

transform: rotateZ(0deg);

}

to{

transform: rotateZ(360deg);

}

body > div > div::after{

content: "";

width: 5px;

height: 5px;

position: absolute;

background: #fff;

border-radius: 50%;

position: absolute;

top: -5px;

left: 50%;

margin-left: -5px;

box-shadow: 0 0 12px #fff;

animation: particle 1s infinite linear;

}

@keyframes particle{

from{

transform: rotateX(0deg) rotateY(0deg);

}

to{

transform: rotateX(90deg) rotateY(-360deg);

}

body>div:nth-of-type(2)>div,

body>div:nth-of-type(2)>div::after{

animation-delay: -0.5s;

}

body>div:nth-of-type(3)>div,

body>div:nth-of-type(3)>div::after{

animation-delay: -1s;

}

body>div:nth-of-type(4)>div,

body>div:nth-of-type(4)>div::after{

animation-delay: -1.5s;

}

</style>

</head>

<body>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

</body>

</html>

---------------------

作者：abrahamhdq

原文：https://blog.csdn.net/hdq1745/article/details/85489329

版權(quán)聲明：本文為博主原創(chuàng)文章，轉(zhuǎn)載請附上博文鏈接！

)CSS 標(biāo)準(zhǔn)盒子模型(Box Model)

在網(wǎng)頁中所有HTML元素可以看作盒子,在CSS中,"box model"術(shù)語是用來設(shè)計和布局時使用的;CSS盒模型本質(zhì)上是一個盒子,封裝周圍的HTML元素包括:外邊距(margin)邊框(border)內(nèi)邊距(padding)實際內(nèi)容(content)四個屬性,所以布局時每個元素所占的總寬高是這4個屬性的總和;比如寬度:總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距

1.1Margin(外邊距)清除邊框外的區(qū)域,外邊距是透明的

1.2Border(邊框)圍繞在內(nèi)邊距和內(nèi)容外的邊框

1.3Padding(內(nèi)邊距)清除內(nèi)容周圍的區(qū)域,內(nèi)邊距是透明的

1.4Content(內(nèi)容)盒子里填充的內(nèi)容比如文本,圖像等

標(biāo)準(zhǔn)盒子模型

寬度為100px的div

根據(jù)盒子模型得出該元素的總寬度為:100+(20+20)+(15+15)+(15+15)(由里至外)因此如果想在此div中放置一個寬度為100px的元素,此元素的總寬度必須小于等于100px

2)DIV+CSS布局

Div+CSS布局就是將網(wǎng)頁內(nèi)容用<div>分割為塊,之后使用css設(shè)置每個塊的大小,位置等

DIV+CSS布局最重要的是靈活運用float(浮動)屬性,其值:1)left 2)right 3)both

clear屬性作用是清除浮動,其值為:1)left 2)right 3)both

d2向右浮動 float:right

因為div是塊級元素,如果都沒有脫離文檔流div就會按照從上到下的順序放置

d2設(shè)置為右浮動其他兩個div位置的變化:

1)d1沒有脫離文檔流會占據(jù)一行,所以d2只能浮動到d1下面的右面如上圖所示

2)d2脫離文檔流,d3自動填充到d2的位置

d1,d2全部設(shè)置為右浮動

1)當(dāng)d1,d2都設(shè)置為右浮動時:因為css中d1在d2上面先設(shè)置,因此d1在右側(cè),如果d2在d1上面先設(shè)置樣式,則d2在右側(cè),d1在左側(cè),自己測試不再截圖

2)當(dāng)d1,d2都設(shè)置為右浮動時:d3就會跑到上圖中d2的位置

3)如果3個div都設(shè)置左或右浮動,當(dāng)3個width加一起<=100%就會在第一行顯示(d1,d2,d3)

 <style type="text/css">
      #d1 {
      margin: 0px;
      background-color: red;
      padding: 0px;
      width: 50%;
      height: 100px;
      float:right; 
    }
    #d2 {
      margin: 0px;
      background-color: yellow;
      padding: 0px;
      width: 50%;
      height: 100px;
      float:right; 
    }
    #d3 {
      margin: 0px;
      background-color: green;
      padding: 0px;
      width: 50%;
      height: 100px;
    }
  </style>

d2清除左浮動,d3設(shè)置為右浮動

當(dāng)d2清除了左浮動,d3設(shè)置為右浮動,就會如上圖所示;如果d2清除的是右浮動,d2就會在d1上面,d3就會定位在d1下面的右面,自己測試不再截圖

當(dāng)d2清除了左浮動,如果想要d2緊挨著d1(與d1在一行上),可以通過position脫離文檔流設(shè)置其上下左右屬性使其定位在d1右側(cè),自己測試

<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>div+CSS布局</title>
  <style type="text/css">
      #d1 {
      margin: 0px;
      background-color: red;
      padding: 0px;
      width: 30%;
      height: 100px;
      float:left; 
    }
    #d2 {
      margin: 0px;
      background-color: yellow;
      padding: 0px;
      width: 40%;
      height: 100px;
      clear: left;     
    }
    #d3 {
      margin: 0px;
      background-color: green;
      padding: 0px;
      width: 30%;
      height: 100px; 
      float: right; 
    }
  </style>
</head>
<body>
    <div id="d1"><span style="font-size: 50px;">d1</span></div>
    <div id="d2"><span style="font-size: 50px;">d2</span></div>
    <div id="d3"><span style="font-size: 50px;">d3</span></div>
  </body>
</html>

DIV+CSS布局綜合運用position+上下左右屬性與float屬性為網(wǎng)頁進(jìn)行布局

注意:瀏覽器的兼容性問題,特別是使用IE內(nèi)核的瀏覽器對W3C的規(guī)范不怎么遵守

是Web開發(fā)和CSS的新手嗎？你是否想過如何在互聯(lián)網(wǎng)上看到那些漂亮的形狀？別再奇怪了。你來對地方了。

下面，我將解釋使用CSS創(chuàng)建形狀的基本知識。還有很多要告訴你關(guān)于這個話題！因此，我不會涵蓋所有（絕大部分）工具和形狀，但這應(yīng)該使你基本了解如何使用CSS創(chuàng)建形狀，并且創(chuàng)建文字環(huán)繞圖形的方式方法。

有些形狀比其他形狀需要更多的“技巧和竅門”。使用CSS創(chuàng)建形狀通常是使用寬度，高度，頂部，右側(cè)，左側(cè)，邊框，底部，變換和偽元素（例如：before和：after）的組合。我們還具有更現(xiàn)代的CSS屬性，可使用諸如shape-outside和clip-path之類的形狀來創(chuàng)建形狀，這些內(nèi)容我將在后面寫出來。

在線咨詢

上一篇：密碼顯示與隱藏的做法
下一篇：添加圖片HTML代碼及給圖片添加超鏈接的html代碼

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

純CSS寫一個環(huán)繞動畫效果

您的項目需求