• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >css3 > 纯CSS3实现Material Design效果

纯CSS3实现Material Design效果

作者:seasonley 字体:[增加 减小] 来源:互联网 时间:2017-06-02

本文主要包含css3文字动画效果,css3动画效果,css3阴影效果,css3过渡效果,css3效果等相关知识,seasonley 希望在学习及工作中可以帮助到您

预览

这是一个正在完善的css文件,是对原生组件基于标签属性做了美化,对datepicker,select等无法用css实现的暂不考虑在本文内。

按钮 Button

初始按钮

    <button>button</button>
    <button class="red">red</button>
    <button class="orange">orange</button>
    <button class="blue">blue</button>
    <button class="green">green</button>
    <button class="link">link</button>
</div>

描边按钮

    <button class="b-red bk-n">button</button>
    <button class="b-red">red</button>
    <button class="b-orange">orange</button>
    <button class="b-blue">blue</button>
    <button class="b-green">green</button>
</div>

禁用按钮   

<button disabled>disabled</button>
</div>

上浮按钮

    <button class="circle">+</button>
    <button class="circle teal">+</button>
</div>

按钮组

    <nav class="btn-group">
        <button>button</button>
        <button>button</button>
        <button>button</button>
    </nav>
</div>

表单Form

文本输入

<input type="text">
<input type="password" >
</div>

开关

<input type="checkbox" id="switch1" class="switch"><label for="switch1"></label>
</div>

单选

<input type="radio" id="test_radio1" name="ra"><label for="test_radio1">radio1</label>
<input type="radio" disabled id="test_radio3" name="ra"><label for="test_radio3">radio3</label>
<input type="radio" checked disabled id="test_radio4" name="ras"><label for="test_radio4">radio4</label>
</div>

多选

<input id="test_checkbox1" type="checkbox"><label for="test_checkbox1">check1</label>
<input id="test_checkbox3" disabled type="checkbox"><label for="test_checkbox3">check3</label>
<input id="test_checkbox4" checked disabled type="checkbox"><label for="test_checkbox4">check4</label>
</div>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

</div>

您可能想查找下面的文章:

  • CSS3实现头像旋转效果
  • 利用CSS3实现平移动画效果示例代码
  • 利用CSS3实现的文字定时向上滚动
  • css3动画效果小结(推荐)
  • CSS3实现时间轴效果
  • 基于CSS3实现立方体自转效果
  • 纯CSS3制作漂亮带动画效果的主机价格表
  • CSS3实现闪烁动画效果的方法
  • 纯css3实现照片墙效果
  • CSS3动画效果回调处理详解

相关文章

  • 2017-06-02CSS3媒体查询(Media Queries)介绍
  • 2017-06-02一款基于css3的动画按钮代码教程
  • 2017-06-02使用CSS3实现圆角,阴影,透明
  • 2017-06-02CSS3 animation实现逐帧动画效果
  • 2017-06-02Css3+Js制作漂亮时钟(附源码)
  • 2017-06-02用React加CSS3实现微信拆红包动画效果
  • 2017-06-02CSS3 text shadow字体阴影效果
  • 2017-06-02CSS3 中的@keyframes介绍
  • 2017-06-02布局和排版教程 纯css3实现图片三角形排列
  • 2017-06-02CSS3实现粒子旋转伸缩加载动画

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • css3通过scale()、rotate()实现放大、旋转
    • css3制作动态进度条以及附加jQuery百分比数字显示
    • 使用CSS3代码绘制可爱的Hello Kitty猫
    • CSS3实现各种图形的示例代码
    • 详解CSS3的perspective属性设置3D变换距离的方法
    • CSS3 text-shadow实现文字阴影效果
    • 利用CSS3的特性改变文本选中时的颜色
    • CSS3制作彩色进度条样式的代码示例分享
    • css3 flex属性flex-grow、flex-shrink、flex-basis学习笔记
    • 一款利用html5和css3实现的3D立方体旋转效果教程

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有