Material设计 20个实用CSS代码片段

如果您想创建一个Material风格的应用程序或网站,那么这些CSS片段你应该会需要!您可以使用这些CSS片段来创建各种元素,如按钮,图块,预加载器,悬停效果,阴影,播放器,聊天,菜单,变形图标,登录概念,动画等。让您轻松创建具有引人注目的效果的专业元素,只需几个简单的步骤。 此列表中的每个项目都包含CSS片段,您可以将其快速添加到您的设计中。

Material设计 20个实用CSS代码片段

Material Design Hamburger

这是一种扁平化风格的汉堡包菜单,可用于各种应用。这个项目是使用CSS和一些JS创建的。

Material设计 20个实用CSS代码片段

Material Design (CSS-based) – Tiles

这些设计图块是在CSS中创建的。按照以下链接获取CodePen的完整代码。

Material设计 20个实用CSS代码片段

CSS Animation Material Design

这是一个整齐的CSS动画素材设计,根据您正在使用的设备的屏幕尺寸进行更改。

Material设计 20个实用CSS代码片段

[SCSS] Configurable animated Material Design Menu Button

这是一个棒极了的材料设计菜单按钮与SCSS。按照以下链接获取CodePen的完整代码。

Material设计 20个实用CSS代码片段

Material Design Preloader

在这里,您有一个惊人的预加载器,您可以将其整合到您的项目中,并获得卓越的成果。此设计可以适合多用途网站。此外,您可以通过几个简单的步骤快速添加它,谢谢CodePen的代码行。

Material设计 20个实用CSS代码片段

Google Material Design Buttons

这里有一套精美的Google材料设计按钮,在某些方面肯定会派上用场。保存此链接以备将来设计。

Material设计 20个实用CSS代码片段

Material Design Ink Effect

这是一种整洁的材质设计墨水效果,可以模仿Google规格的墨水效果。在下面的链接中查看它,看看你是否可以将它整合到你即将到来的项目中。

Material设计 20个实用CSS代码片段

 

Material Design Shadows CSS

使用这些Google材质设计阴影,在元素上添加3d效果。您可以在下面的链接中找到CodePen的完整代码。

Material设计 20个实用CSS代码片段

Material Design Chat

这种设计聊天类似于Messenger,它包括基本功能。此设计是使用SCSS,Jade,ES6等创建的。此外,它包括整齐的动画,所以检查出来!

Material设计 20个实用CSS代码片段

Material Design Player

这里有一个很棒的扁平化风格设计素材,其中包括音量,暂停,播放,洗牌等基本功能。

Material设计 20个实用CSS代码片段

Circle Hover Effect

这是一个很好的效果,您可以添加到您的网站或应用程序的任何元素。按照链接获取CodePen上的完整代码,并在设计中使用它。

Material设计 20个实用CSS代码片段

Material Design Morphing Icons

这里有一些可爱的图标,从一个形状到另一个形状有一个可爱的过渡。有一大堆图标,您可以随时使用。

Material设计 20个实用CSS代码片段

Material Design Login Concept

这是一个可爱的材料设计登录表单,设计简单。它包括基本字段,如用户名,密码和登录按钮。

Material设计 20个实用CSS代码片段

Material Design Blog

您可以在几个简单的步骤中创建自己的博客,只需按照以下链接获取CodePen中的代码。设计简单但非常有效,分开的文章。

Material设计 20个实用CSS代码片段

Loader – Material design

这是一个可爱的收藏的材料设计动画元素与各种颜色。从CodePen获取代码,并将这些项目集成到您的网站中。

Material设计 20个实用CSS代码片段

Material Design Drop Animation

这是一个可爱的下拉动画,您可以在您的项目中使用。查看CodePen的链接并查看它。

Material设计 20个实用CSS代码片段

CSS Material Design Switch

这里有一个简单但可爱的材料设计开关。这个元素是用CSS创建的,而完整的代码可以在CodePen上使用。

Material设计 20个实用CSS代码片段

Material Design Portfolio

这是一个简单的投资组合设计,带有动画汉堡包菜单。查看演示,看看它是否符合您的要求。

 

Material设计 20个实用CSS代码片段

Material Design Buttons

这是一个精美的材料设计按钮,您可以立即使用。这些项目有不同的设计,彩色背景,圆角等。请按照CodePen上的链接查看完整的代码。

Material设计 20个实用CSS代码片段

Material Design Buttons

这是另一套精美的材料设计按钮,您可以将其集成到当前或即将到来的项目中。您可以从各种设计中选择。

0
橘九

橘九
编辑大人

我是个极好人啊啊~

发表评论




  • 点赞最多的文章

  • 标签

  • 微信公众平台

    贩卖优质设计素材