@動畫 / 博客 RSS 訂閱

Nov 06 2025

南城FE - CSS小技巧使用 font-variation 讓文字起飛

今天逛codepen的時候發現了一個不錯的文字動畫效果，如此絲滑飄逸的效果必須得研究研究，可以看到字體粗細切換過渡效果很均勻，不像我們平常使用字體時設置 font-weight 的效果，日常設置字重的時候並不是每個值都會生效，只會有幾個區間的值是可用的，以下代碼給6個p標籤設置font-weight 從 100 到 600： @for $i from 1 through 6 { p:nth-

設計 , css3 , 動畫 , 字體 , 前端

收藏 評論

Oct 22 2023

Winn - 使用炫酷的vue動畫庫，輕鬆給網站上大分

關於vue的動畫庫有很多，但今天我只分享兩個，GSAP和Vue-Lottie是個人認為目前功能比較強大的動畫庫。 1、GSAP 地址：https://greensock.com GSAP全稱為GreenSockAnimationPlatform，是一個從flash時代一直髮展到今天的專業動畫庫。來看一下如何在vue項目中使用： 和其他動畫庫一樣，你可以使用npm或cdn等方式去安裝，安裝和使

vue.js , 動畫 , 網站開發 , 前端 , html5

收藏 評論

Nov 18 2025

mob64ca1414c613 - 動畫攝象機_weixin

目錄 一 鏡頭類型 1 遠景(寬鏡頭) 2 全身鏡頭 3 中景鏡頭 4 特寫鏡頭 5 大特寫 6 主觀視角 7 多人鏡頭 二 拍攝角度 靜止鏡頭 1 高角度俯拍 2 鳥瞰視角 3 低角度仰拍 4 蟲眼視角 5 過肩鏡頭 6 荷蘭角 運動鏡頭 1 變

動畫 , 後端開發 , 變焦 , Python

收藏 評論

Sep 01 2023

DiracKeeko - [動圖] 用css的animation+幀序列實現動畫

[接前文《[動圖] 前端動圖實現方式整理》](https://segmentfault.com/a/1190000044102194) 這篇文檔詳細説一説 第3種，幀序列(png/jpg + css) 的實現 注意下面這段代碼不是原生的CSS語法，在關鍵幀部分使用了SCSS語法來批量for循環處理（需要安裝sass-loader以支持編譯），通過改變背景圖片的位置來實現連續的動畫效果。 st

animation , sass , 動畫 , Css , 前端

收藏 評論

Aug 02 2022

hezhongfeng - 模仿北京健康寶動畫

模仿北京健康寶動畫 北京健康寶有一個動畫，一圈小球，沿着正方形順時針滾動，並且顏色是漸變的，像下圖的這樣 提取出以下關鍵信息： 小球沿着矩形順時針連續滾動，小球的間距是均勻的 小球在矩形直角的時候會沿着直角滾動，過渡順滑 小球的顏色有一些漸變，並且會隨着小球的位置而改變，左上角的一直都是深色的，右下一直是淺色的 邊框實現 想模仿實現這個動畫，最先想到的是使用邊框，想使用虛線邊框實現，找

動畫 , Css , svg動畫 , 前端 , svg

收藏 評論