前端每日實戰:103# 影片演示如何用純 CSS 創作一隻監視眼
效果預覽
按下右側的“點選預覽”按鈕可以在當前頁面預覽,點選連結可以全屏預覽。
點選預覽
可互動影片
此影片是可以互動的,你可以隨時暫停影片,編輯影片中的程式碼。
請用 chrome, safari, edge 開啟觀看。
原始碼下載
每日前端實戰系列的全部原始碼請從 github 下載:
程式碼解讀
定義 dom,容器中包含 10 個元素,每個元素代表 1 個圓環:
居中顯示:
body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background-color: lightgoldenrodyellow; }
定義容器尺寸和其中子元素的佈局方式:
.circles { width: 10em; height: 10em; font-size: 30px; border: 1px dashed black; display: flex; justify-content: center; }
為每個圓環定義下標變數:
.circles span:nth-child(1) { --n: 1; } .circles span:nth-child(2) { --n: 2; } .circles span:nth-child(3) { --n: 3; } .circles span:nth-child(4) { --n: 4; } .circles span:nth-child(5) { --n: 5; } .circles span:nth-child(6) { --n: 6; } .circles span:nth-child(7) { --n: 7; } .circles span:nth-child(8) { --n: 8; } .circles span:nth-child(9) { --n: 9; } .circles span:nth-child(10) { --n: 10; }
設定每個的圓環的尺寸,顏色黑白間隔:
.circles { position: relative; } .circles span { position: absolute; --diameter: calc(10em - (var(--n) - 1) * 1em); width: var(--diameter); height: var(--diameter); border-radius: 50%; } .circles span:nth-child(odd) { background-color: darkred; } .circles span:nth-child(even) { background-color: gold; }
把尺寸最小的 3 個圓環向下移動,形成凹陷的效果:
.circles span:nth-child(n+8) { top: calc((var(--n) - 7) * 1em); }
讓容器旋轉起來,就好像一隻監視的眼睛轉來轉去:
.circles { animation: rotating 5s linear infinite; } @keyframes rotating { to { transform: rotate(1turn); } }
大功告成!
原文連結:
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/4548/viewspace-2811857/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 前端每日實戰:158# 視訊演示如何用純 CSS 創作一個雨傘 toggle 控制元件前端CSS控制元件
- 如何用純 CSS 創作一個搖搖晃晃的 loaderCSS
- 每日CSS_純CSS製作進度條CSS
- VR如火如荼 智慧影片眼鏡該如何定位VR
- 實戰:使用 Flutter 仿開眼視訊AppFlutterAPP
- 影片直播app原始碼,純css實現橫向滾動APP原始碼CSS
- 前端每日一問--JS 和 CSS 阻塞問題前端JSCSS
- 如何用CSS製作一個圓形放大鏡CSS
- 鬥圖神器–純前端實現視訊轉GIF製作表情包(已開源)前端
- 偶是一隻別人眼裡的程式猿
- 純css製作loading動畫CSS動畫
- 《前端實戰總結》之使用純css實現網站換膚和焦點圖切換動畫前端CSS網站動畫
- 一隻前端小白的JS note前端JS
- 純HTML + CSS製作個人資料卡HTMLCSS
- 純css製作導航下拉選單CSS
- 純CSS製作單頁Web應用CSSWeb
- 純 CSS 實現波浪效果!CSS
- 45個純CSS實現的精美邊框效果【附線上演示和原始碼】【下篇】CSS原始碼
- 如何用純CSS繪製三角形--02CSS
- 如何用純CSS繪製三角形--03CSS
- 如何用CSS製作橫向選單?CSS
- Win10眼鏡Hololens版VLC演示影片:耍酷必備!Win10
- 用CSS來擼一隻神經貓CSS
- 如何用CSS3製作一個漂亮的登入框CSSS3
- 前端學習-vue影片學習006-watch監視、watchEffect前端Vue
- 純 CSS 實現斜紋效果CSS
- 純CSS實現液晶字型效果CSS
- 【從頭到腳】擼一個多人視訊聊天 — 前端 WebRTC 實戰(一)前端Web
- 利用transform實現一個純CSS彈出選單ORMCSS
- 二進位制陣列實戰 - 純前端匯出Excel檔案陣列前端Excel
- 二進位制陣列實戰 – 純前端匯出Excel檔案陣列前端Excel
- css揭祕實戰技巧 - 視覺效果[三]CSS視覺
- 純 Git 實現前端 CI/CDGit前端
- 如何用ffmpeg製作包含背景圖的音訊影片?音訊
- 純CSS製作液晶屏的顯示效果CSS
- Selenium影片操作演示
- 一個純前端實現的頭像生成網站前端網站
- 自媒體-短影片劇本創作