整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

CSS 的能量超乎你想象!12 个开源的 CSS 项目竟如此酷炫

许,你认为 CSS 只能用来控制网页的结构与样式,但它的功能和应用却超乎你的想象。从逼真的图像到特效动画,优秀的开发者利用它已创造了无数种可能。

在本文中,我们精选了纯 CSS 实现的滤镜以及各种效果,与大家分享。它们都是开源的网页设计相关项目。除了体验之外,有兴趣的话,你还可以尝试来实现它们。

1.Solar System

哇!如果你对太空场景情有独钟,那么一定会被这个 CSS 实现的太阳系动画所震撼。作为空间学与物理学爱好者,作者参照了太阳系轨道运行的真实时间进行设计,意味着每个行星都有相对地球年的时间,准确的围绕太阳公转。

项目地址:

https://codepen.io/kowlor/pen/ZYYQoy

2.Gradient Background Animation

对于网站性能来说,动画是众人皆知的问题引发者。如果优化不佳,它们会直接影响页面的打开速度。而这个 CSS 实现的漂亮的渐变动画,却相当的轻量,不仅易于编辑,而且支持自定义颜色。

项目地址:

https://codepen.io/P1N2O/pen/pyBNzX

3.Stack Game

实现一款简单的游戏,并不一定需要 JS 的帮助,纯 CSS 也能够创造一款界面漂亮的 Stack 游戏。当然,游戏看似容易,背后的设计并非那么简单。

项目地址:

https://codepen.io/finnhvman/pen/xJRMJp

4.3D Progress Bars

这是一款漂亮、轻量、易于定制的进度条开源项目。进度条采用 3D 制作,同时拥有清澈的外观,你甚至可以将它们变成迷你 3D 图表!

项目地址:

https://codepen.io/rgg/pen/QbRyOq

5.Glitched Text

故障风格的文本总会让人有眼前一亮的感觉,而这个项目就是纯 CSS 实现的故障效果。如果你想为网站增添酷炫的故障效果,那么不妨多了解下。

项目地址:

https://codepen.io/lbebber/pen/ypgql

6.Francine

CSS 的能量超乎你想象,你甚至还可以利用它制作出艺术品效果。Francine 就是一个纯 CSS 制作、展示的 18 世纪风格的绘画作品。或许,你会惊讶 CSS 实现的效果竟能如此逼真。

项目地址:

https://github.com/cyanharlow/purecss-francine

7.Mobile Phone

这个项目与《Francine》有异曲同工之处,它仅使用 CSS 和 HTML 便实现了手机界面效果,而且效果可以同网站照片相媲美。如果你有兴趣,可详细的了解其实现的过程。

项目地址:

https://codepen.io/Wujek_Greg/pen/LmrweG

8.Map Creator

利用 JS 创造一个简单的 3D 地图?不用那么复杂,纯 CSS 就可以搞定。怎么样,看上去还不错吧!

项目地址:

https://codepen.io/onediv/pen/NrNebj

9.Instagram.css

想为你的网站添加一些 Instagram 风格的图片滤镜效果?那么,纯 CSS 实现的 Instagram 风格的滤镜库 —— Instagram.css 一定是你的菜。它的灵感来源于 CSSgram.

项目地址:

https://picturepan2.github.io/instagram.css/

10.Animated Gradient Ghost Button

这是一个纯 CSS 实现的渐变幽灵按钮。漂亮的动画和渐变效果,是不是很酷呢?相信,它可以很好的融入到任何网站之中。

项目地址:

https://codepen.io/ARS/pen/vEwEPP

11.Devices.css

如果你想在网站增添 iPhone X、iPhone 8 等移动设备用于展示的话,那么一定不要错过 Devices.css. 它是一个使用了纯 CSS 实现主流移动设备的库,并以现代设备为模版。

项目地址:

https://picturepan2.github.io/devices.css/

12.Dynamic Image Colorizing

这是一个很酷的纯 CSS 实现的项目。你只需要通过电脑自带的选色器,就能轻松地更换图像的颜色,来试试吧!

项目地址:

https://codepen.io/noahblon/pen/ZbjmbK

最后

利用 JS,我们能实现各种让人惊叹的页面/动画效果,但 JS 并不是最轻量的解决方案。如果合理使用 CSS,你依然可以实现一些炫酷的效果,并且它对性能的影响会小得多。当然,无论你使用哪种方式(JS or CSS),你都可以创造出创意且有趣的作品。

以上的作品,你最喜欢哪一个?欢迎评论与我们分享。


感谢你的阅读。若你有所收获,欢迎点赞与分享。

注:

  1. 本文版权归原作者所有,仅用于学习与交流;
  2. 如需转载译文,烦请按下方注明出处信息,谢谢!

英文原文:12 Incredible Pure CSS Experiments

作者:Brenda Stokes Barron

译者:IT程序狮

译文地址:

https://zhuanlan.zhihu.com/p/58424141

ss是前端领域的一个难缠户,一提到css,没有人会说难,也没有人愿意承认自己不会写,甚至在面试的过程中css相关的内容都很少提及,足以说明大家对css的不重视。你真的会写css吗?

关于css有两类问题值得我们重视:样式和工程。样式问题指的是具体的效果实现,能否实现某个效果,同一个效果有多种实现方式,如何抉择;工程问题是如何在大型项目中写出可维护性、可读的css。

在各种论坛中经常看到关于css是否是一门编程语言的争论。在我看来,最好用对待编程语言的态度来看待css,不要忽视css,否则,在项目后期,你会发现,你的css越来越混乱,important会越来越多,不同位置的类名互相冲突覆盖,改一个类的样式,要检查整个项目的页面是否受到影响,项目内部的css共享完全依赖拷贝……从这个角度来说,你敢说css不是编程语言?它完全有了像编程语言一样能把你搞得焦头烂额的能力。而这一切都来源于你在一开始对她的忽视与不屑。出来混,总要还的啊!

css的问题

盲目的定义基础样式

在项目开始之初,拿到UI设计稿,信心满满地开始定义css的全局基础样式,谢天谢地,css对这一点支持得很彻底,一处定义,所有页面都可以引用。

先来一个color-red。

.color-red {
	color: red
}

这样,在整个项目中,都可以给任意元素添加一个color-red类,美滋滋,我真是个小机灵鬼!

几个迭代过去,你已经把color-red这面红旗插满了整个项目。UED说,咱们改个版,所有红色的文本改为蓝色,红色的link不变!

哔!——(你发出的声音)

你又得屁颠屁颠地把一个一个的红旗拔出来,再插上蓝色的旗子(因为你不敢不干呀)。

命名冲突

在一个页面,你定义了一个.header,写了个完美的特效,发布到dev一看,就是不管用,横看竖看,本地是好的啊,神奇(生气)!过了若干时间的排查,另一个同事在另一个地方也写了一个.header,完美的覆盖了你的。把你头打歪!

编辑器可不会提醒你哦!

慢慢你会发现,这种命名冲突可太频繁了呀!头大,要不要用上css modular啊?

子类覆盖

有的小伙伴聪明地将类名嵌套定义,这就不会冲突了吧?嘿嘿,你想多了!

/* in article.css */
.article .title {
  border-bottom: 1px solid;
  font-size: 1.5em;
}

/* in widget.css */
.widget .title {
  color: gray;
  text-transform: uppercase;
}

如果在dom树里面,article和widget在一棵树的路径上,你说title是冲突呢还是不冲突呢?

以上的这些问题,在项目中相信大家都遇见过,并且项目越大,出现的概率就越高,最后就会演变成一座[屎]山。

“大家都别动,牵一发而动全身哦!”

“这就是蝴蝶效应吧???”

认识BEM

难道css这些问题就没法解决了吗?当然不是,我们来看看大神们是如何解决这些问题的。

BEM是Block、Element、Modifier的缩写,是一个类命名的规范。

首先我们来看一个例子:

/* Block */
.btn {}

/* Element that depends upon the block */ 
.btn__price {}

/* Modifier that changes the style of the block */
.btn--orange {} 
.btn--big {}

相信小伙伴们已经有了一个初步的认知:

Block是一个独立的组件(元素),定义的了“组件是什么,按钮?还是菜单?”。

Element是属于Block,是依赖于Block的元素,描述的是“Block里面的什么?比如,文本?图标?”

Modifier用于描述Block或者Element的外在表现,比如大小、颜色、状态等。

看一个例子:

<form class="search-form search-form_theme_islands">
    <input class="search-form__input">
    <button class="search-form__button search-form__button_size_m">Search</button>
</form>

search-form是Block;

search-form_theme_islands是Modifier,描述了theme为islands的search-form;

search-form__input是Element,描述的是search-form内部的input元素;

search-form__button是Element,描述的是search-form内部的button元素;

search-form__button_size_m是Modifier,描述的是size为m的search-form__button;

这样写css是不是非常的清晰?瞬间就提高了可读性和可维护性?

概念如此简单,还不赶紧多了解一下?

另外,可能有些小伙伴也注意到了,Block和Element使用双下划线分隔,和Modifier是用中划线分隔,这也不是一成不变的,可以按照自己的喜好来决定如何分割。

Saas、Css Module

有些小伙伴可能会有疑问,BEM和Saas、Css Module有什么区别?解决的问题是一样的吗?

Sass是css的预处理器,在写css的时候定义了一套规范,经过编译处理后输出为css,和BEM是两个不同的概念。使用saas或less也能实现BEM。BEM其实是不推崇类名的嵌套定义的,如果想像sass那样嵌套的写出标准的BEM,可以使用@at-root。

Css Module解决的问题是多个模块的css的命名冲突问题,个人觉得是傻瓜式解决方案,在应用层的css-in-js应用比较多,适合css入门选手。要想写好css,还是得从根本上入手呀!

言:

最近在 GitHub 上发现了一个 vanillawebprojects[1] 开源仓库,里面收集了 20 个 JavaScript+Html+CSS的练手项目,没有使用任何框架,可以让你从基础入门到深入学习。这些项目原本是 Udemy20 Web Projects With Vanilla JavaScript 课程的一部分,但是如果你已经拥有了一些基础,不妨试着看一下源码,然后模仿实现吧

1. Form Validator 表单验证

判断输入的表单字段是否合法


2. Movie Seat Booking 预定电影座位

一个简单的电影座位预定演示项目


3. Custom Video Player 定制视频播放器

一个简单的网页视频播放器


4. Exchange Rate Calculator 汇率计算器

计算不同货币的兑换汇率


5. DOM Array Methods Project DOM 数组方法

练习如何操作 DOM 数组


6. Menu Slider & Modal 动态菜单以及弹窗

练习如何弹出登录注册窗口,以及滑动弹出菜单


7. Hangman Game 字符侦探游戏

练习如何判断隐藏字符是否正确


8. Mealfinder App 点餐应用

简单的点餐查询应用


9. Expense Tracker 购物结算应用

简单的购物车结算应用


10. Music Player 音乐播放器

简单的网页音乐播放器


11. Infinite Scrolling 网页无限滚动演示

网页无限向下滚动实现


12. Typing Game 打字游戏

简单的打字输入游戏


13. Speech Text Reader 文本阅读器

文本阅读器


14. Memory Cards 记忆卡片

测试记忆的记忆卡片


15. LyricsSearch App 歌词搜索应用

网页歌词搜索器


16. Relaxer App 休闲呼吸应用

模拟呼吸的节奏


17. Breakout Game 弹跳破冰游戏

简单的网页破冰游戏


18. New Year Countdown 新年倒计时

网页新年倒计时


19. Sortable List 榜单应用

网页财富榜单


20. Speak Number Guessing Game 猜数字游戏

说出数字,猜测数字


今天我们给大家分享了,20 个 JavaScript+Html+CSS 练手小项目,大家觉得哪个最简单,哪个最复杂呢?赶紧去 Github 仓库拉取项目,码上行动吧

欢迎关注公众号:KnowHub 知识加油站!

参考资料

[1]

vanillawebprojects: https://github.com/bradtraversy/vanillawebprojects