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