上一页 1 ··· 18 19 20 21 22 23 24 25 26 ··· 71 下一页
2022年4月17日
CSS & JS Effect – 脉冲 Pulse Play Button
摘要： 效果 参考 Youtube – Create a pulsing animation with CSS 重点 在背后做一个一样大的 div border 然后 animation scale up. HTML <button> <i class="fa-solid fa-play"></i> </b 阅读全文
posted @ 2022-04-17 22:28 兴杰 阅读(258) 评论(0) 推荐(0)
CSS & JS Effect – Dialog Modal
摘要： 效果 参考: Youtube – Create a Simple Popup Modal Youtube – Create a Modal (Popup) with HTML/CSS and JavaScript HTML – Native Dialog Modal Boostrap Modal A 阅读全文
posted @ 2022-04-17 19:33 兴杰 阅读(85) 评论(0) 推荐(0)
CSS & JS Effect – Hero Banner Swiper
摘要： 效果 重点 1. 一张图片, 一个 content 定位居中作为一个 slide 2. slider 用了 JavaScript Library – Swiper 3. 当 slide active 的时候做一个 animation 把 content 划出来. Swiper & Layout HT 阅读全文
posted @ 2022-04-17 13:56 兴杰 阅读(141) 评论(0) 推荐(0)
2022年4月16日
HTML – Native Dialog Modal
摘要： 前言 之前介绍 Native Form 的时候有提及过 method="dialog", 但由于它太新了, 所以没去研究. 这篇就介绍一下. Dialog 也好 Modal 也好, 都有人叫, 我的理解是 Modal 更抽象一点, Dialog 按 Material Design, 应该是要有 ac 阅读全文
posted @ 2022-04-16 23:58 兴杰 阅读(288) 评论(0) 推荐(0)
2022年4月15日
CSS & JS Effect – Show More
摘要： 效果 show more 是很常被使用的效果, 因为空间总是不够的丫. 比起 scroll, show more 的体验通常会好一些, 尤其在手机, 它有更好的引导. 实现思路 1. 卡片需要一个 max-height 限制内容, 同时 overflow: hidden 2. 做一个 overlay 阅读全文
posted @ 2022-04-15 17:47 兴杰 阅读(231) 评论(0) 推荐(0)
2022年4月14日
CSS – 实战 Spacing & Layout
摘要： 前言 这篇想整理一下在网页开发中, Spacing (间距) 和 Layout 排版是如果被处理的. Spacing 介绍 东西密密麻麻会给人一种很恐怖的感觉. 只要加上一点空间 (间距), 整体感觉立马就会变好很多. 在网页开发中, padding, margin, gap, line-heigh 阅读全文
posted @ 2022-04-14 18:42 兴杰 阅读(433) 评论(0) 推荐(0)
2022年4月9日
JavaScript Library – Swiper
摘要： 前言 官网已经有很好的教程了, 这篇只是记入一些我用过的东西和冷门知识. 参考 官网安装 官网 Demo 安装 yarn add swiper JS import Swiper from 'swiper'; // core js import { Navigation } from 'swiper/ 阅读全文
posted @ 2022-04-09 22:39 兴杰 阅读(904) 评论(0) 推荐(0)
2022年4月6日
HTML & CSS – Styling Table
摘要： 前言 Table (表格) 历史悠久, 它有许多独特的默认样式, 它也是最早的布局方案方案哦 (现在依然有用 table 来做布局的, 比如 email template). 这篇来介绍一下基本的 table styling. 参考 Youtube – Styling HTML tables wit 阅读全文
posted @ 2022-04-06 22:19 兴杰 阅读(165) 评论(0) 推荐(0)
CSS – Float
摘要： 前言 Float 是上古时代的东西, 它的效果已经基本被 Flex, Grid 取代了. 但是还是可以了解它一下. 就当学习历史呗. 参考 Youtube – HTML & CSS for Beginners Part 18: How Floats and Clears work 图片和文字 hor 阅读全文
posted @ 2022-04-06 15:28 兴杰 阅读(89) 评论(0) 推荐(0)
2022年4月5日
CSS & JS Effect – Loading Button
摘要： 效果 一个按钮, 点击以后中间出现 loading, 然后旋转. 思路 1. 监听点击, hide text, show loading 2. loading 定位中心 3. loading 是通过 border + radius 做出来的, 然后 animation 让它无限 rotate 难点 阅读全文
posted @ 2022-04-05 19:47 兴杰 阅读(228) 评论(0) 推荐(0)
上一页 1 ··· 18 19 20 21 22 23 24 25 26 ··· 71 下一页