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
    非特殊说明,本文版权归原作者所有,转载请注明出处
    本文链接:http://sudasuta.com/20-css-snippets.html
    订阅本站:http://sudasuta.com/rss
    转载请注明来源:苏打苏塔设计量贩铺《Material设计 20个实用CSS代码片段》

    • 包图网
    • wordpress商业主题设计制作
    • LOGO
    • Manny工作室
    • 双生子日记微信表情包


  • 独立设计品牌推荐
  • 点赞最多的文章

  • 标签