CSS3新特性初识

  • 渐变
  • 转换(又称变形)
  • 过渡
  • 多列
  • 动画
  • 复杂选择器

渐变

  • 线性渐变
  • 径向渐变
  • 重复渐变(线性-径向渐变)

转换

实现缩放、旋转等效果。
例子:
<code>
#d1{
width:400px;
height:300px;
background-color : red;
}
#d1:hover{
transform : rotate(90 deg) scale(0.8);
}
上段代码含义是当鼠标移动到id属性为"d1"的元素时,其元素顺时针旋转90°且缩小到0.8。
rotate(90 deg) : id属性为"d1"的元素顺时针旋转90°
scale(0.8) : id属性为"d1"的元素缩小到0.8倍
</code>

过渡

在一定时间内,完成某种动画的效果,如背景色、边框、旋转等。
例子:
<code>
#d2{
width:400px;
height:300px;
background-color : red;
}
#d2:hover{
background : red;
transition : background 4s;
}
上段代码含义是当鼠标移动到id属性为"d2"的元素时,元素在4s内,背景色由原来的白色变成红色。
transition : background 4s : 在4s内背景色发生变化
</code>

多列

将文本内容设计成多列布局
<code>
.class1{
column-count:3;
}
<body>
<div class="class1">“当我年轻的时候,我梦想改变这个世界;当我成熟以后,我发现我不能够改变这个世界,我将目光缩短了些,决定只改变我的国家;当我进入暮年以后,我发现我不能够改变我们的国家,我的最后愿望仅仅是改变一下我的家庭,但是,这也不可能。当我现在躺在床上,行将就木时,我突然意识到:如果一开始我仅仅去改变我自己,然后,我可能改变我的家庭;在家人的帮助和鼓励下,我可能为国家做一些事情;然后,谁知道呢?我甚至可能改变这个世界。”
</div>
</body>
上段代码含义是文本被分成三列显示
</code>

动画

使元素从一种样式逐渐变化为另一种样式的效果,可以改变任意多的样式任意多的次数。可用百分比来规定变化发生的时间,或用关键词 "from" 和 "to",等同于 0%(动画起始) 和 100%(动画完成)。
<code>
div{
width : 100px;
height : 100px;
background : red;
animation : donghua 5s;
}
@keyframes donghua {
0% {background: red;}
50% {background: blue;}
100% {background: green;}
}
上述代码的含义是:div块在5s内,由红变蓝再变绿。
0% {background: red;} <=> from {background : red;}
100% {background: green;} <=> to {background : green;}
</code>

复杂选择器

  • 兄弟选择器
    • 相邻兄弟选择器:以“+”连接(形如 element1+element2);选择紧挨着下一个元素,二者必有同一个父元素
  • 通用兄弟选择器:以“~”连接(形如 element1~element2);两种元素必有同一个父元素,但element2不一定紧随element1。
  • 属性选择器
  • [id] : 有id属性的所有元素
  • E[id] : 有id属性的所有E元素
  • E[id][class] : 有id和class属性的所有E元素
  • E[id="id1"] : 有id="id1"的E元素
  • E[class="myClass"] : class属性为“myClass”的所有E元素
  • E[class~="myClass"] : class属性是词列表,并且以空格隔开,其中词列表中包含了一个“myClass”词的所有E元素
  • E[class^="b"] : class属性以“b”开头的所有E元素
  • E[class*="b"] : class属性包含子串“b”的所有E元素
  • E[class$="b"] : class属性以“b”结尾的所有E元素
  • E[class|="b"] : class属性以“b”开头或以“b-”开头的所有E元素
  • 伪类选择器
  • 伪元素选择器
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,891评论 18 139
  • 1、属性选择器:id选择器 # 通过id 来选择类名选择器 . 通过类名来选择属性选择器 ...
    Yuann阅读 1,656评论 0 7
  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 6,510评论 0 17
  • CSS3简介 CSS3的现状 浏览器支持程度差,需要添加 私有前缀 ; 移动端支持优于PC端; 不断改进中; 应用...
    magic_pill阅读 817评论 0 1
  • 你相信一见钟情吗,玉米说,她信。 你相信命中注定吗,如果说,他信。 她叫玉米,她给他取名如果。 那一年,玉米25岁...
    玉米好吃阅读 423评论 0 2