AI教程网 - 未来以来,拥抱AI;新手入门,从AI教程网开始......

 分类:CSS3教程

CSS3 是最新的 CSS 标准,使用了层叠样式表技术,可以对网页布局、字体、颜色、背景灯效果做出控制。

CSS3教程

CSS3动画特效分享

CSS3动画特效分享
  w3cschool今天要来和大家分享7款顶级的CSS3动画效果,包含了菜单特效、文字特效、图片特效等,另外还有几个表现非常特别的动画,个人觉得非常赞哦。   不懂如何制作CSS动画?请点击这里   1、CSS3和SVG文字背景动画,...

AI君 4年前 (2020-02-22) 58℃ 0喜欢

CSS3教程

CSS3阴影实现方法及技巧全解

CSS3阴影实现方法及技巧全解
网页设计中常常要用到阴影的效果,通过阴影可以比较容易突出一个元素,在没有CSS3的时候,一般都用图片做阴影效果,而现在通过使用CSS3的text-shadow和box-shadow这两个属性就可以分别设置文字和容器的阴影。这是一种新特性。不...

AI君 4年前 (2020-02-22) 57℃ 0喜欢

CSS3教程

实例解析CSS3圆角的实现方法

实例解析CSS3圆角的实现方法
使用支持该属性的浏览器才能运行。主流浏览器如Safari,谷歌浏览器,IE,Opera和火狐浏览器可支持border-radius属性。 语法 .roundElement { border-radius: 10px; } 上面的这...

AI君 4年前 (2020-02-22) 60℃ 0喜欢

CSS3教程

CSS3旋转实例学习(附3D旋转实例)

CSS3旋转实例学习(附3D旋转实例)
我们都有在网页上见过一些交互性的效果,比如用鼠标滑向图标或是按钮的时候,图标会自动旋转一周,这就是CSS3旋转效果。在CSS3中有个常见的transform应用,transform主要包括以下几种:旋转rotate、扭曲skew、缩放sca...

AI君 4年前 (2020-02-22) 59℃ 0喜欢

CSS3教程

多种CSS3渐变应用方法总结附实例

多种CSS3渐变应用方法总结附实例
如下图所示,在网页设计中,有时候会需要用到渐变效果,渐变可以创建出类似于彩虹的视觉图案效果,在没有CSS3之前,为了显示一个渐变需要专门制作一个图片,这种不法不但不灵活还增加请求数,而CSS3可以轻松实现网页渐变效果,用于做渐变背景、渐变导...

AI君 4年前 (2020-02-22) 62℃ 0喜欢

CSS3教程

CSS3选择器归类整理(附CSS优先级要点)

CSS3选择器归类整理(附CSS优先级要点)
CSS是用于网页设计可用的最强大的工具之一。使用它我们可以在几分钟内改变一个网站的界面,而不用改变页面的标签。在深入研究CSS选择器之前,我们应该先搞懂CSS优先级是如何工作的。比如给一个p标签增加一个类(class),可是执行后该clas...

AI君 4年前 (2020-02-22) 61℃ 0喜欢

CSS3教程

27个精致的CSS3动画效果源代码下载

27个精致的CSS3动画效果源代码下载
CSS主要用于控制网页的外观,CSS代码可以随意变化网页的布局和网页的内容样式。当CSS3出现以后,更是可以让网页增添了不少动画元素,随着IE6,7的淘汰,手机端的崛起更是让它成熟了许多。CSS3动画简洁方便,高端大气,让网页变得易于交互且...

AI君 4年前 (2020-02-22) 62℃ 0喜欢

CSS3教程

CSS3 多媒体查询实例

CSS3 多媒体查询实例
CSS3 多媒体查询实例 本章节我们将为大家演示一些多媒体查询实例。 开始之前我们先制作一个电子邮箱的链接列表。HTML 代码如下: 实例 1 <!DOCTYPE html> <html&g...

AI君 4年前 (2020-02-22) 61℃ 0喜欢

CSS3教程

CSS3 多媒体查询

CSS3 多媒体查询
CSS3 多媒体查询 CSS2 多媒体类型 @media 规则在 CSS2 中有介绍,针对不同媒体类型可以定制不同的样式规则。 例如:你可以针对不同的媒体类型(包括显示器、便携设备、电视机,等等)设置不同的样式规则。 但是这些多媒体类...

AI君 4年前 (2020-02-22) 60℃ 0喜欢

CSS3教程

CSS3 弹性盒子(Flex Box)

CSS3 弹性盒子(Flex Box)
CSS3 弹性盒子(Flex Box) 弹性盒子是 CSS3 的一种新的布局模式。 CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引...

AI君 4年前 (2020-02-22) 61℃ 0喜欢

CSS3教程

CSS3 框大小

CSS3 框大小
CSS3 框大小 CSS3 box-sizing 属性可以设置 width 和 height 属性中包含了 padding(内边距) 和 border(边框)。 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号。 紧跟在数字...

AI君 4年前 (2020-02-22) 55℃ 0喜欢

CSS3教程

CSS 分页实例

CSS 分页实例
CSS 分页实例 本章节我们将为大家介绍如何通过使用 CSS 来创建分页的实例。 简单分页 如果你的网站有很多个页面,你就需要使用分页来为每个页面做导航。 以下实例演示了如何使用 HTML 和 CSS 来创建分页: CSS 实例 ul...

AI君 4年前 (2020-02-22) 54℃ 0喜欢

CSS3教程

CSS 按钮

CSS 按钮
CSS 按钮 本章节我们为大家介绍使用 CSS 来制作按钮。 基本按钮样式 默认按钮CSS 按钮 CSS 实例 .button {    background-color: #4CAF50; /* Green */    border...

AI君 4年前 (2020-02-22) 54℃ 0喜欢

CSS3教程

CSS 图片

CSS 图片
CSS 图片 本章节将为大家介绍如何使用 CSS 来布局图片。 圆角图片 实例 圆角图片: img {    border-radius: 8px;} 实例 椭圆形图片: img {    border-radius: 50%;}...

AI君 4年前 (2020-02-22) 58℃ 0喜欢

CSS3教程

CSS3 用户界面

CSS3 用户界面
CSS3 用户界面 CSS3 用户界面 在 CSS3 中, 增加了一些新的用户界面特性来调整元素尺寸,框尺寸和外边框。 在本章中,您将了解以下的用户界面属性: resize box-sizing outline-offset ...

AI君 4年前 (2020-02-22) 54℃ 0喜欢

CSS3教程

CSS3 多列

CSS3 多列
CSS3 多列 CSS3 多列 通过 CSS3,您能够创建多个列来对文本进行布局 – 就像报纸那样,您可以收藏文章,需要用到的时候看一看。 在本章中,您将学习如下多列属性: column-count column-ga...

AI君 4年前 (2020-02-22) 56℃ 0喜欢

CSS3教程

CSS3 动画

CSS3 动画
CSS3 动画 CSS3 动画 CSS3,我们可以创建动画,它可以取代许多网页动画图像,Flash动画,和JAVAScripts。 CSS3动画 CSS3 @keyframes 规则 表格中的数字表示支持该属性的第一个浏览器版本号。 ...

AI君 4年前 (2020-02-22) 57℃ 0喜欢

CSS3教程

CSS3 过渡

CSS3 过渡
CSS3 过渡 CSS3 过渡 CSS3中,我们为了添加某种效果可以从一种样式转变到另一个的时候,无需使用Flash动画或JavaScript。用鼠标移过下面的元素: 用鼠标移过下面的元素: CSS3 过渡 ...

AI君 4年前 (2020-02-22) 57℃ 0喜欢

CSS3教程

CSS3 3D 转换

CSS3 3D 转换
3D 转换 CSS3 允许您使用 3D 转换来对元素进行格式化。 点击下面的元素,您可以看到 2D 转换与 3D 转换之间的不同之处,根据自己的需求选择哪一种转换:  2D rotate 3D rotate 浏览器支持 表格中的数字表...

AI君 4年前 (2020-02-22) 53℃ 0喜欢

CSS3教程

CSS3 2D 转换

CSS3 2D 转换
CSS3 2D 转换 CSS3 转换 CSS3转换,我们可以移动,比例化,反过来,旋转,和拉伸元素。 接下去您将会学到关于CSS3 2D转换的内容,当您学到一个新知识的时候,最好能够自己进行操作一下,点击代码下方的 尝试一...

AI君 4年前 (2020-02-22) 57℃ 0喜欢