Codepen 每日精选（2018-4-28）

转载 于 2018-04-28 17:28:30 发布 · 86 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：https://segmentfault.com/a/1190000014657399

本文精选了一系列使用纯CSS和HTML实现的创意网页特效，包括页面目录、选单交互、游戏封面开启、图片切换等特效，还有各种动画如雷达扫描、彩虹色变幻的小方块、太阳系运转等。

按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以打开原始页面。

页面目录特效
https://codepen.io/suez/pen/k...

选单交互效果
https://codepen.io/suez/pen/X...

游戏封面开启交互效果
https://codepen.io/suez/pen/u...

图片切换特效
https://codepen.io/suez/pen/W...

纯 css 写的雷达扫描特效
https://codepen.io/thebabydin...

纯 css 写的消失的正方形动画
https://codepen.io/thebabydin...

彩虹色变幻的小方块动画
https://codepen.io/thebabydin...

太阳系运转动画
https://codepen.io/pavlovsk/p...

从单孔望远镜里看小汽车行驶的动画
https://codepen.io/Nikrafon/p...

乐高积木主题的 loading 动画
https://codepen.io/chrisganno...

彩色的范围选择器
https://codepen.io/kunukn/pen...

纯 css 画的特斯拉 logo
https://codepen.io/alexander3...

nasa-image-of-the-day:使用NASA每日天文图片API按日期显示太空照片
05-13
NASA的当日形象 使用NASA每日天文图片API按日期显示太空照片。 工作CodePen： ://codepen.io/captainpainway/full/gaOpYV/ API链接： ：
前端每日挑战：截至2020年10月，已完成170多项作品，每天挑战自我！
02-04
前端每日挑战 参见Codepen上的演示： ://codepen.io/comehop​​e/pens/public/ 观看Scrimba上的交互式截屏视频： ://scrimba.com/playlist/pEgDAM 在Segmentfault（zh-cn）上阅读带注释的源代码： ://...
Codepen 每日精选（2018-4-26）
weixin_34090643的博客
04-26 112
按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以打开原始页面。 纯 css 写的滑块控件https://codepen.io/thebabydin... 用 canvas 写的蜂巢动画https://codepen.io/towc/pen/z... 用 canvas 写的彗星风格的拖尾动画https://codepen.io/t...
Codepen 每日精选（2018-4-15）
weixin_33949359的博客
04-15 126
按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以打开原始页面。 跟随鼠标轨迹的琉璃珠https://codepen.io/enxaneta/f... 随机生成城市 3d 地图https://codepen.io/nicoptere/... 与鼠标交互的灯泡https://codepen.io/DollarAksh... 选择汉堡...
Codepen 每日精选（2018-4-1）
weixin_34007886的博客
04-01 190
按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以打开原始页面。 粒子文字生成器https://codepen.io/Gthibaud/f... 纯 css 画的小猫和小狗用电脑聊天的动画https://codepen.io/clarawrson... 纯 css 画的老式自行车https://codepen.io/Sarah_E...
Codepen 每日精选（2018-4-3）
weixin_34097242的博客
04-03 162
按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以打开原始页面。 纯 css 写的卫星围绕行星的动画https://codepen.io/YusukeNaka... 文字变汽车的动画https://codepen.io/PointC/ful... 用 vanvas 随机画的抽象几何图案https://codepen.io/ge1d...
Codepen 每日精选（2018-4-19）
weixin_33805743的博客
04-19 228
按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以打开原始页面。 纯 css 写的创意灯泡动画https://codepen.io/uzcho_/ful... 纯 css 画的文字阴影https://codepen.io/GeorgePark... 纯 css 画的海报https://codepen.io/vicbergqui.....
Codepen 每日精选（2018-4-16）
weixin_34409822的博客
04-16 120
按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以打开原始页面。 内容切换的交互效果https://codepen.io/jcoulterde... 报价卡片的交互效果https://codepen.io/jcoulterde... 3d 菜单交互效果https://codepen.io/jcoulterde... 无尽的隧道ht...
Codepen 每日精选（2018-4-9）
weixin_34417200的博客
04-09 221
按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以打开原始页面。 前端工程师的技能树https://codepen.io/SoyEva/ful... 纯 css 写的咖啡机动画https://codepen.io/jenningscr... 从各种视角观察纸盒的交互动画https://codepen.io/dabalose7e.....
Codepen 每日精选（2018-4-18）
weixin_34376562的博客
04-18 147
按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以打开原始页面。 图片入场的的粒子效果https://codepen.io/jcoulterde... 制作蛋糕的交互动画https://codepen.io/jcoulterde... 纯 css 写的立体动画https://codepen.io/cobra_winf... 街霸游...
Codepen 每日精选（2018-4-14）
weixin_34292959的博客
04-14 149
按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以打开原始页面。 纯 css 写的蛋糕落在纸盘上的动画https://codepen.io/YusukeNaka... 色环https://codepen.io/thepheer/f... 纯 css 画的寿司餐https://codepen.io/sashatran/... 弹性布...
cookie-stand:一个代码合作伙伴临时项目
04-30
修改了专为Pat's设计的销售图表，以预测新Harold产品ABC cookie的每日销售量。 我学到的是 我开始学习如何使用JavaScript动态填充html，如何创建对象文字和对象构造函数（首选），并开始练习使用FOR LOOPS。 我还...
使用纯 CSS 创作一个脉动 loader效果的
01-19
效果预览 ... https://codepen.io/comehope/pen/wYvGwr...每日前端实战系列的全部源代码请从 github 下载： https://github.com/comehope/front-end-daily-challenges 代码解读 定义 dom，容器中包含 10 个子元素：
IEEE1588PTPdaemonforSTM32F4Discoveryboard.zip
09-08
IEEE1588PTPdaemonforSTM32F4Discoveryboard.zip
人脸识别系统-python-基于OpenCV和Python的人脸识别系统设计与实现（毕业论文+PPT）
最新发布
09-08
一、数据采集层：多源人脸数据获取 该层负责从不同设备 / 渠道采集人脸原始数据，为后续模型训练与识别提供基础样本，核心功能包括： 1. 多设备适配采集 实时摄像头采集： 调用计算机内置摄像头（或外接 USB 摄像头），通过OpenCV的VideoCapture接口实时捕获视频流，支持手动触发 “拍照”（按指定快捷键如Space）或自动定时采集（如每 2 秒采集 1 张），采集时自动框选人脸区域（通过Haar级联分类器初步定位），确保样本聚焦人脸。 支持采集参数配置：可设置采集分辨率（如 640×480、1280×720）、图像格式（JPG/PNG）、单用户采集数量（如默认采集 20 张，确保样本多样性），采集过程中实时显示 “已采集数量 / 目标数量”，避免样本不足。 本地图像 / 视频导入： 支持批量导入本地人脸图像文件（支持 JPG、PNG、BMP 格式），自动过滤非图像文件；导入视频文件（MP4、AVI 格式）时，可按 “固定帧间隔”（如每 10 帧提取 1 张图像）或 “手动选择帧” 提取人脸样本，适用于无实时摄像头场景。 数据集对接： 支持接入公开人脸数据集（如 LFW、ORL），通过预设脚本自动读取数据集目录结构（按 “用户 ID - 样本图像” 分类），快速构建训练样本库，无需手动采集，降低系统开发与测试成本。 2. 采集过程辅助功能 人脸有效性校验：采集时通过OpenCV的Haar级联分类器（或MTCNN轻量级模型）实时检测图像中是否包含人脸，若未检测到人脸（如遮挡、侧脸角度过大），则弹窗提示 “未识别到人脸，请调整姿态”，避免无效样本存入。 样本标签管理：采集时需为每个样本绑定 “用户标签”（如姓名、ID 号），支持手动输入标签或从 Excel 名单批量导入标签（按 “标签 - 采集数量” 对应），采集完成后自动按 “标签 - 序号” 命名文件（如 “张三
在学习CTF、网络安全路上整合自己博客和一些资料，持续更新~.zip
09-08
在学习CTF、网络安全路上整合自己博客和一些资料，持续更新~.zip
诺基亚jquery-mobile例五十三
09-08
codechfieidea5-5.html
VSTReverbInC++.zip
09-08
VSTReverbInC++.zip
BaiduMapcomponentsforVue2.x.zip
09-08
BaiduMapcomponentsforVue2.x.zip
每日前端大厂面试题解析与技巧
- **动手实践**：通过项目实践和在线编码平台（如LeetCode、CodePen、CodeSandbox）动手编码，加深对知识点的理解。 - **阅读源码**：通过阅读优秀的开源项目源码来学习高质量的编码实践和架构设计。 - **参考书籍和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值