首页 > web前端 > css教程 > 正文

酷炫的 CodePen 演示(8 月 4 日)

王林
发布: 2024-09-11 08:30:36
原创
367 人浏览过

Cool CodePen Demos (August 4)

想法形式

这个演示是一个很酷的想法提交/提醒组件。平滑的过渡、完美的颜色选择和适量的交互营造出良好的用户体验。这是 Jon Kantner 的列表中两个演示中的第一个。


摆动机器人

Amit Sheen 再次展示了 CSS 的 3D 威力。这次是一个正在荡秋千的机器人。检查细节,以及不同的身体部位如何一起移动以创建流畅且美丽的动画。


鸟瞰大都会

从空中俯瞰城市的令人印象深刻的无限景观(将鼠标移到其上可以改变方向。)您知道是什么让它更加令人惊叹吗?它不使用任何流行的 3D 库!这是普通的 JavaScript。感谢 Niklas Knaack 的精彩演示。


钱德勒拥抱专辑表情包生成器

基于最近的政治模因(她也编码了),伊内斯带来了一个受《老友记》启发的模因:钱德勒·比恩拿着一张专辑。套筒是一个文件输入,因此您可以根据需要对图像进行个性化设置。整齐。


听说你喜欢旋转

另一个 3D 动画演示。一个漂浮在太空中的平台(?),不停地旋转。 Scott R McGann 的这个催眠演示也是用普通 JavaScript 和画布编写的。


情绪板

Hannah 分享了这个图板,它同时也是一个漂亮的网络图片库。很少有动画和过渡,有一种高中/大学的氛围……有人说怀旧吗?


3D空间滚动缩放

更多 3D CSS! (本月的列表中肯定有一种模式。)将滚动驱动的动画与 3D 翻译和不透明度相结合,在纯 CSS 中创建了这种很酷的效果。这是 Adam Argyle 的精彩演示。


鲁布·戈德堡 HTML 表单

这是一个有趣的想法,由 Ksenia Kondrashova 巧妙地实现了。当您填写表单时,该装置会移动,使提交按钮更靠近视图。机器可能不实用,但它使形式变得不同,并带来令人惊叹的因素。


徽章中的短信预览

乔恩·坎特纳 (Jon Kantner) 的另一个组件。这是一种有趣的数据呈现方式:我们不仅知道有一条消息,而且还可以通过将鼠标悬停在徽章上来阅读它。这对于移动设备之外(悬停效果将是一个挑战)以及网络上的通知也很有用。


轮播

最后,还有另一个 3D CSS 演示,这次是由 Vicio Bonura 制作的,他创建了一个 CSS 轮播,可以帮助作为模板生成其他轮播,因为代码简单且易于理解。


以上是酷炫的 CodePen 演示(8 月 4 日)的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:dev.to
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!