css 语音,用css完成语音助手小动画
用css完成語音助手小動(dòng)畫
2020年08月10日
|?萬仟網(wǎng)IT編程
?|?我要評(píng)論
震驚！用css完成語音助手小動(dòng)畫不要太簡單！語音助手動(dòng)畫定位布局添加動(dòng)畫語音助手動(dòng)畫hello大家好，我是Aaron。想必大家都見過這個(gè)頁面，在各個(gè)平臺(tái)的語音助手都可以看到類似的動(dòng)畫。那么這個(gè)小動(dòng)畫用css怎么實(shí)現(xiàn)呢，其實(shí)我們只需要考慮最重要的兩點(diǎn)，一是用定位布局把我們所看到的頁面做出來，第二是利用animation動(dòng)畫來實(shí)現(xiàn)。定位布局從圖片中我們可以看，動(dòng)畫主要由一個(gè)黑色背景還有兩個(gè)帶有邊框的圓組成。我們可以利用定位布局實(shí)現(xiàn)兩個(gè)圓在背景框下的水平居中。相對定位：以原先位置進(jìn)行定位(0px
震驚！用css完成語音助手小動(dòng)畫不要太簡單！
語音助手動(dòng)畫
hello大家好，我是Aaron。
想必大家都見過這個(gè)頁面，在各個(gè)平臺(tái)的語音助手都可以看到類似的動(dòng)畫。
那么這個(gè)小動(dòng)畫用css怎么實(shí)現(xiàn)呢，其實(shí)我們只需要考慮最重要的兩點(diǎn)，一是用定位布局把我們所看到的頁面做出來，第二是利用animation動(dòng)畫來讓畫面動(dòng)起來。
定位布局
從圖片中我們可以看，動(dòng)畫主要由一個(gè)黑色背景還有兩個(gè)帶有邊框的圓組成。我們可以利用相對定位布局實(shí)現(xiàn)兩個(gè)圓在背景框下的水平居中。
相對定位：以原先位置進(jìn)行定位(0px 0px )
背景框我們設(shè)置460X460
那么外圓我們可以設(shè)置200X200的寬高以及15px的border,外圓的初始位置實(shí)在視口區(qū)00點(diǎn)的位置，參照00點(diǎn)位置進(jìn)行定位,應(yīng)定位115px 115px使外圓位于背景框中心。
外圓位置改變后，內(nèi)圓的初始位置在130 130,但是內(nèi)圓的參照位置是外圓的padding位置,所以設(shè)置內(nèi)圓大小為100X100,border為20px,參照外圓定位30 30 就居中了。
這樣就實(shí)現(xiàn)外圓相對背景框居中，而內(nèi)圓相對外圓居中。
來看看代碼
.one {
width: 460px;
height: 460px;
background-color: #99CCCC;
}
.two {
width: 200px;
height: 200px;
border-radius: 100%;
border: 15px solid #009999;
background-color: #66CCCC;
position: relative;
top: 115px;
left: 115px;
}
.three {
width: 100px;
height: 100px;
border-radius: 100%;
border: 20px solid #FFFFFF;
background-color: #66CCCC;
position: relative;
top: 30px;
left: 30px;
}
添加動(dòng)畫
給兩個(gè)圓設(shè)置動(dòng)畫，外圈放大，內(nèi)圈縮小
@keyframes waiquan {
from {
transform: scale(1)
}
to {
transform: scale(1.1)
}
}
@keyframes neiquan {
from {
/* 縮放 */
transform: scale(1)
}
to {
transform: scale(0.8)
}
}
將動(dòng)畫運(yùn)用到div中，設(shè)置動(dòng)畫時(shí)間，循環(huán)，
/*外圈*/
animation-name: waiquan;
animation-duration: 1s;
/*循環(huán)*/
animation-iteration-count: infinite;
/* 動(dòng)畫執(zhí)行的方向 */
animation-direction: reverse;
/* 交替執(zhí)行 */
animation-direction: alternate;
/*內(nèi)圈*/
animation-name: neiquan;
animation-duration: 1s;
animation-iteration-count: infinite;
/* 動(dòng)畫執(zhí)行的方向 */
animation-direction: reverse;
/* 交替執(zhí)行 */
animation-direction: alternate;
畫面就動(dòng)起來啦！
趕緊試試吧~
本文地址：https://blog.csdn.net/weixin_41597939/article/details/107890057
版權(quán)聲明：本文內(nèi)容由互聯(lián)網(wǎng)用戶貢獻(xiàn)，該文觀點(diǎn)僅代表作者本人。本站僅提供信息存儲(chǔ)服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。
如發(fā)現(xiàn)本站有涉嫌抄襲侵權(quán)/違法違規(guī)的內(nèi)容， 請發(fā)送郵件至 2386932994@qq.com 舉報(bào)，一經(jīng)查實(shí)將立刻刪除。
相關(guān)文章:
最近接手了一個(gè)項(xiàng)目,接觸到一些對文件操作的業(yè)務(wù).所以在這邊整理一下日常用到的處理方式,當(dāng)學(xué)習(xí)筆記吧,有不對的地方,歡迎指正哈
filere...
//開始日期不大于結(jié)束時(shí)間，結(jié)束時(shí)間不小于開始時(shí)間，開始日期和結(jié)束日期都不小于當(dāng)前日期
datepicker($("#startdate&...
Angular項(xiàng)目中使用第三方組件嵌入代碼編輯器最近遇到一個(gè)需求，不僅需要展示源代碼(不同環(huán)境下不同的環(huán)境配置代...
這個(gè)游戲是本人前不久剛?cè)腴T編寫的游戲，感覺里面代碼很LOW但是對于新手來說很一般般吧~ 沒有上傳音樂文件了 運(yùn)行效果： 上代碼(HTML+JS)： ...
一、初始化項(xiàng)目
$ vue init webpack vue-elementui
$ npm run dev
二、安裝 ele...
一，效果圖。 二，代碼。
1、HTML列表 a、標(biāo)簽： (1)
- 無序列表 (3)
- 列表項(xiàng) (4)
文章目錄4.3 人臉融合應(yīng)用程序的設(shè)計(jì)4.3 人臉融合應(yīng)用程序的設(shè)計(jì)ManyMasks軟件打開之后,將展現(xiàn)一個(gè)實(shí)...
nginx啟動(dòng)報(bào)錯(cuò) bind() to 0.0.0.0:80 failed (10013: An attempt was made to a...
網(wǎng)友評(píng)論
驗(yàn)證碼：
總結(jié)
以上是生活随笔為你收集整理的css 语音,用css完成语音助手小动画的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 大学计算机二级考试 vb,大学计算机二级
- 下一篇： 服务器部署的参数文档,服务器的基本配置参