我想使用 CSS 和 HTML(如果需要,使用 JavaScript)創建影片。但我不知道該怎么做。
我需要創建一個圓,并且半徑軸必須在圓內以緩慢的速度旋轉。
如何做到這一點?
uj5u.com熱心網友回復:
繪制 SVG 可能是獲得形狀的最簡單方法。然后使用CSS Animations使整個 SVG 旋轉。
@keyframes rotate {
to { rotate: 360deg }
}
svg {
animation: rotate 10s linear infinite;
width: 150px;
height: 150px;
}
svg .ring {
fill: none;
stroke: black;
stroke-width: 1px;
}
svg .dot {
fill: black;
}
svg .line {
stroke: purple;
stroke-width: 1px;
}
svg .text {
font-size: 10px;
fill: purple;
}
<svg viewBox="0 0 100 100">
<circle class="ring" r="49" cx="50" cy="50" />
<circle class="dot" r="2" cx="50" cy="50" />
<line class="line" x1="50" y1="50" x2="99" y2="50" />
<text class="text" x="60" y="47">Radius</text>
</svg>
uj5u.com熱心網友回復:
創建一個.circle
具有四個 div 的父級并在第 4 個 div 上添加 2x2 的父display:grid
級。在第 4 個 div 上添加邊框頂部為我們提供了線和半徑文本位于第 2 個 div 中,并帶有填充頂部。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.circle {
width: 300px;
height: 300px;
border-radius: 100%;
border: solid 1px black;
display: grid;
align-content: center;
grid-template-columns: auto auto;
grid-template-rows: auto auto;
animation: rotate 5s infinite linear;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
div {
width: 150px;
height: 150px;
}
div:nth-child(2) {
padding-top: 89%;
}
div:nth-child(4) {
border-top: solid 2px red;
}
<div class="circle">
<div></div>
<div>Radius</div>
<div></div>
<div></div>
</div>
uj5u.com熱心網友回復:
我會使用 SVG 和 AnimateTransform 來旋轉線條。
AnimateTransform 可以圍繞一個點旋轉物件,因此在這種情況下,只需從線條以您想要的任何角度開始,但將旋轉錨定到圓的中心。
<svg viewBox='0 0 100 100' xmlns="http://www.w3.org/2000/svg">
<circle fill='transparent' stroke='black' cx='50' cy='50' r='35' />
<line stroke='red' x1='50' x2='85' y1='50' y2='50'>
<animateTransform
attributeName='transform'
from='0 50 50'
to='360 50 50'
dur='1.5s'
repeatCount='indefinite'
attributeType='xml'
type='rotate' />
</line>
</svg>
不需要 CSS 或 JavaScript。
轉載請註明出處,本文鏈接:https://www.uj5u.com/qita/508202.html
標籤:javascript html css
下一篇:3DIVS不能并排放置