css3学习06——过渡、动画、多列、用户界面

最新推荐文章于 2021-09-15 20:59:55 发布

原创最新推荐文章于 2021-09-15 20:59:55 发布 · 204 阅读

0 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

8 篇文章

订阅专栏

本文深入探讨CSS3中过渡和动画的实现方法，包括如何使用@keyframes定义动画，设置过渡属性，以及多列布局和用户界面设计的技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css3学习06——过渡、动画、多列、用户界面

1、过渡

/*css样式*/
div
{
	width:100px;
	height:100px;
	background:red;
	transition-property:width;
	transition-duration:5s;
	transition-delay:1s;

/* Safari */
-webkit-transition-property:width; 
-webkit-transition-duration:5s;
-webkit-transition-delay:1s;
}

div:hover
{
	width:300px;
}

/*body内容*/
<div></div>

<p>将鼠标移动至块上方形会变长.</p>

运行截图：

2、动画

/*css样式*/
div
{
	width:100px;
	height:100px;
	background:red;
	position:relative;
	animation:mymove 5s infinite;
}
	-webkit-animation:mymove 5s infinite; /* Safari and Chrome */

@keyframes mymove
{
	from {top:0px;}
	to {top:200px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
	from {top:0px;}
	to {top:200px;}
}
/*body内容*/
<div></div>

运行效果：

/*css样式*/
div
{
	width:100px;
	height:100px;
	background:red;
	position:relative;
	animation:mymove 5s infinite;
	-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
}

@keyframes mymove
{
	0%   {top:0px; left:0px; background:red;}
	25%  {top:0px; left:100px; background:blue;}
	50%  {top:100px; left:100px; background:yellow;}
	75%  {top:100px; left:0px; background:green;}
	100% {top:0px; left:0px; background:red;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
	0%   {top:0px; left:0px; background:red;}
	25%  {top:0px; left:100px; background:blue;}
	50%  {top:100px; left:100px; background:yellow;}
	75%  {top:100px; left:0px; background:green;}
	100% {top:0px; left:0px; background:red;}
}
/*body内容*/
<div></div>

/*css样式*/
div
{
	width:100px;
	height:100px;
	background:red;
	position:relative;
	animation:myfirst 5s linear 2s infinite alternate;
	/* Firefox: */
	-moz-animation:myfirst 5s linear 2s infinite alternate;
	/* Safari and Chrome: */
	-webkit-animation:myfirst 5s linear 2s infinite alternate;
	/* Opera: */
	-o-animation:myfirst 5s linear 2s infinite alternate;
}

@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;}
}

@-moz-keyframes myfirst /* Firefox */
{
	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;}
}

@-o-keyframes myfirst /* Opera */
{
	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;}
}
/*body内容*/
<div></div>

运行结果：

3、多列

/*css样式*/
.newspaper
{
	-moz-column-count:3; /* Firefox */
	-webkit-column-count:3; /* Safari and Chrome */
	column-count:3;
	column-gap:40px;/*列之间的大小*/
	column-rule-style:dotted;/*列之间的分割线*/
	column-rule-color:#ff0000;/*列之间的分割线颜色*/
}
/*body内容*/
<div class="newspaper">
/*内容*/
/*内容被分为三列*/
</div>

4、用户界面

/*css样式*/
div.container
{
	width:30em;
	border:1em solid;
}
div.box
{
	box-sizing:border-box;
	-moz-box-sizing:border-box; /* Firefox */
	width:50%;
	border:1em solid red;
	float:left;
}

/*body内容*/
<div class="container">
<div class="box">这个 div 占据了左边的一半。</div>
<div class="box">这个 div 占据了右边的一半。</div>

运行效果：