CSS3 过度效果、动画、多列

一、CSS3过度:

CSS3过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点,必须规定两相内容:指定要添加效果的CSS属性;指定效果的持续时间。如果为指定持续时间,transition将没有任何效果。

<style>

div {

width: 100px;

height: 100px;

background: red;

-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */

transition: width 2s, height 2s, transform 2s;

}

div:hover {

width: 200px;

height: 200px;

-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */

transform: rotate(180deg);

}

</style>

所有的过渡属性:

<style>

div

{

width:100px;

height:100px;

background:red;

transition:width 1s linear 2s;

/* Safari */

-webkit-transition:width 1s linear 2s;

}

div:hover

{

width:200px;

}

</style>

二、CSS3动画:

CSS3可以创建动画。@keyframes规则是创建动画。@keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。当在 @keyframes 创建动画,把它绑定到一个选择器,否则动画不会有任何效果。指定至少这两个CSS3的动画属性绑定向一个选择器:规定动画的名称;规定动画的时长。如果省略持续时间,动画将无法运行,因为默认值是0。

<style>

div

{

width:100px;

height:100px;

background:red;

animation:myfirst 5s;

-webkit-animation:myfirst 5s; /* Safari and Chrome */

}

@keyframes myfirst

{

from {background:red;}

to {background:yellow;}

}

@-webkit-keyframes myfirst /* Safari and Chrome */

{

from {background:red;}

to {background:yellow;}

}

</style>

<style>

div

{

width:100px;

height:100px;

background:red;

animation:myfirst 5s;

-moz-animation:myfirst 5s; /* Firefox */

-webkit-animation:myfirst 5s; /* Safari and Chrome */

-o-animation:myfirst 5s; /* Opera */

}

@keyframes myfirst

{

0% {background:red;}

25% {background:yellow;}

50% {background:blue;}

100% {background:green;}

}

@-moz-keyframes myfirst /* Firefox */

{

0% {background:red;}

25% {background:yellow;}

50% {background:blue;}

100% {background:green;}

}

@-webkit-keyframes myfirst /* Safari and Chrome */

{

0% {background:red;}

25% {background:yellow;}

50% {background:blue;}

100% {background:green;}

}

@-o-keyframes myfirst /* Opera */

{

0% {background:red;}

25% {background:yellow;}

50% {background:blue;}

100% {background:green;}

}

</style>

改变背景色和位置:

<style>

div

{

width:100px;

height:100px;

background:red;

position:relative;

animation:myfirst 5s;

-webkit-animation:myfirst 5s; /* Safari and Chrome */

}

@keyframes myfirst

{

0% {background:red; left:0px; top:0px;}

25% {background:yellow; left:200px; top:0px;}

50% {background:blue; left:200px; top:200px;}

75% {background:green; left:0px; top:200px;}

100% {background:red; left:0px; top:0px;}

}

@-webkit-keyframes myfirst /* Safari and Chrome */

{

0% {background:red; left:0px; top:0px;}

25% {background:yellow; left:200px; top:0px;}

50% {background:blue; left:200px; top:200px;}

75% {background:green; left:0px; top:200px;}

100% {background:red; left:0px; top:0px;}

}

</style>

CSS3的动画属性:

三、CSS3多列:

CSS3可以将文本内容设计成像报纸一样的多列布局。CSS3的多列属性:column-count、column-gap、column-rule-style;column-rule-width、column-rule-color、column-rule、column-span、column-width。

1、column-count:

column-count属性指定需要分隔的列数。

<style>

.newspaper

{

-moz-column-count:3; /* Firefox */

-webkit-column-count:3; /* Safari and Chrome */

column-count:3;

}

</style>

  1. 、column-gap:

column-gap属性指定列与列之间的间隙。

<style>

.newspaper

{

column-count:3;

column-gap:40px;

}

</style>

2、column-rule-style:

column-rule-style属性指定列与列之间的边框样式.

<style>

.newspaper

{

column-count:3;

column-gap:40px;

column-rule-style:dotted;

/* Firefox */

-moz-column-count:3;

-moz-column-gap:40px;

-moz-column-rule-style:dotted;

/* Safari and Chrome */

-webkit-column-count:3;

-webkit-column-gap:40px;

-webkit-column-rule-style:dotted;

}

</style>

3、column-rule-width:

column-rule-width属性指定了两列的边框厚度:

<style>

.newspaper {

/* Chrome, Safari, Opera */

-webkit-column-count: 3;

-webkit-column-gap: 40px;

-webkit-column-rule-style: outset;

-webkit-column-rule-width: 1px;

/* Firefox */

-moz-column-count: 3;

-moz-column-gap: 40px;

-moz-column-rule-style: outset;

-moz-column-rule-width: 1px;

column-count: 3;

column-gap: 40px;

column-rule-style: outset;

column-rule-width: 1px;

}

</style>

4、column-rule-color:

column-rule-color属性指定两列的边框颜色。

<style>

.newspaper

{

column-count:3;

column-gap:40px;

column-rule-style:outset;

column-rule-color:#ff0000;

/* Firefox */

-moz-column-count:3;

-moz-column-gap:40px;

-moz-column-rule-style:outset;

-moz-column-rule-color:#ff0000;

/* Safari and Chrome */

-webkit-column-count:3;

-webkit-column-gap:40px;

-webkit-column-rule-style:outset;

-webkit-column-rule-color:#ff0000;

}

</style>

5、column-rule:

column-rule属性是column-rule-*所有属性的简写:

<style>

.newspaper

{

-moz-column-count:3; /* Firefox */

-webkit-column-count:3; /* Safari and Chrome */

column-count:3;

-moz-column-gap:40px; /* Firefox */

-webkit-column-gap:40px; /* Safari and Chrome */

column-gap:40px;

-moz-column-rule:4px outset #ff00ff; /* Firefox */

-webkit-column-rule:4px outset #ff00ff; /* Safari and Chrome */

column-rule:4px outset #ff00ff;

}

</style>

6、column-span:

column-span属性指定元素跨越多少列。

<style>

.newspaper

{

column-count:3;

-moz-column-count:3; /* Firefox */

-webkit-column-count:3; /* Safari and Chrome */

}

h2

{

column-span:all;

-webkit-column-span:all; /* Safari and Chrome */

}

</style>

7、column-width:

column-width属性指定列的宽度:

<style>

.newspaper

{

column-width:100px;

-moz-column-width:100px; /* Firefox */

-webkit-column-width:100px; /* Safari and Chrome */

}

</style>

CSS3多列属性:

相关推荐
brzhang4 小时前
我操,终于有人把 AI 大佬们 PUA 程序员的套路给讲明白了!
前端·后端·架构
止观止5 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react
goms5 小时前
前端项目集成lint-staged
前端·vue·lint-staged
谢尔登5 小时前
【React Natve】NetworkError 和 TouchableOpacity 组件
前端·react.js·前端框架
Lin Hsüeh-ch'in5 小时前
如何彻底禁用 Chrome 自动更新
前端·chrome
augenstern4167 小时前
HTML面试题
前端·html
张可7 小时前
一个KMP/CMP项目的组织结构和集成方式
android·前端·kotlin
G等你下课7 小时前
React 路由懒加载入门:提升首屏性能的第一步
前端·react.js·前端框架
蓝婷儿8 小时前
每天一个前端小知识 Day 27 - WebGL / WebGPU 数据可视化引擎设计与实践
前端·信息可视化·webgl
然我8 小时前
面试官:如何判断元素是否出现过?我:三种哈希方法任你选
前端·javascript·算法