CSS3学习（CSS3过渡、CSS3动画）

CSS3过渡：transition属性——专门应对颜色、长度、宽度、位置等变化的过渡

通过CSS3，我们可以在不使用Flash和JavaScript的情况下，为当前某元素从某样式改变为某样式的时候添加过渡效果。我们仅仅使用到了一个transition属性，专门来写过渡从一个样式到另一个样式过渡时所花费的时间，以秒为单位。若时长不规定，默认为0，即没有过渡时间。在使用这个过渡效果的时候，我们使用了类似于超链接的l(link)、v(visited)、h(hover)、a(active)样式的控制。此过渡时间可以规定背景改变、位置改变、及上面看到过的2D转换、3D转换再加上位置改变等样式变化需要使用的时间长度。

一、CSS3过渡

1.普通

换背景颜色，鼠标放上后背景颜色直接改变。

<style>
body
{
    font-size:24px;
    color:#60F;}
div
{
width:200px;
height:115px;
background-color:yellow;
border:1px solid black;
}
#aa:hover
{
    background-color:#F39;}
</style>
</head>
<body>
<div id="aa">这个是普通的换背景颜色</div>
</body>

2.鼠标放上背景颜色变化时有1s的过渡时间

body
{
    font-size:24px;
    color:#60F;}
div
{
width:200px;
height:115px;
background-color:yellow;
border:1px solid black;
}
#bb{
    transition:1s;
    }
#bb:hover
{
    background-color:#F39;}
</style>
</head>
<body>
<div id="bb">这个是加上过渡时间的换背景颜色</div>
</body>

3.实现图片轮播，鼠标放上后显示第2张图片，按下左键不松开，显示第3章图片。

<style>
body
{
    font-size:24px;
    color:#60F;}
div
{
width:200px;
height:115px;
background-color:yellow;
border:1px solid black;
}
#bg
{
    width:200px;
    height:200px;
    border:1px solid red;
    position:relative;
    margin-left:200px;}
#tb
{
    position:relative;
    left:0px;
    top:0px;
    transition:0.7s;}
#tb:hover
{
    left:-200px;}
#tb:active
{
    left:-400px;}
</style>
</head>
<body>
位置改变：可以直接使用在大图轮播上。不需要引用Jquery就可以实现滑动过渡效果。
<div id="bg">
    <table id="tb" width="600" height="200" cellpadding="0" cellspacing="0">
        <tr>
            <td><img src="images/bg_flower.gif" width="200" height="200" /></td>
            <td><img src="images/border.png" width="200" height="200" /></td>
            <td><img src="images/bg_flower.gif" width="200" height="200" /></td>
        </tr>
    </table>
</div>

4.鼠标放上，矩形的高和宽变化

body
{
    font-size:24px;
    color:#60F;}
div
{
width:200px;
height:115px;
background-color:yellow;
border:1px solid black;
}
#kuan
{
    width:200px;
    height:200px;
    border:1px solid blue;
    position:relative;
    transition:1s;}
#kuan:hover
{
    width:400px;
    height:150px;}
</style>
</head>
<body>
<div id="kuan">这里是宽度、高度改变。原始宽200px，高200px；改变后宽400px，高150px</div>
</body>

变化前变化后

5.大图轮播效果，可以直接用CSS写出来

<style>
body
{
    min-width:900px;}
#datu
{
    width:800px;
    height:500px;
    position:relative;
    margin:30px auto;
    overflow:hidden;}
#ta
{
    margin-left:0px;
    transition:0.7s;}
.lr
{
    position:absolute;
    top:230px;
    width:32px;
    height:32px;
    z-index:99;}
#left
{
    left:10px;
    }
    #right
{
    right:10px;
    }

</style>
</head>

<body>
<div id="datu" onmouseover="pause()" onmouseout="conti()">
    <table id="ta" cellpadding="0" cellspacing="0">
        <tr height="500">
            <td width="800"><img src="Images/1.jpg" /></td>
            <td width="800"><img src="Images/2.jpg" /></td>
            <td width="800"><img src="Images/3.jpg" /></td>
            <td width="800"><img src="Images/4.jpg" /></td>
            <td width="800"><img src="Images/5.jpg" /></td>
        </tr>
    </table>
    <div class="lr" id="left" onclick="dong(-1)">
        <img src="Images/left.png" />
    </div>
    <div class="lr" id="right" onclick="dong(1)">
        <img src="Images/right.png" />
    </div>
</div>

</body>
</html>
<script>
document.getElementById("ta").style.marginLeft="0px";
function huan()
{
    var tu =document.getElementById("ta");
    var a=parseInt(tu.style.marginLeft);
    if(a<=-3200)
    {
        tu.style.marginLeft="0px";
    }
    else
    {
        tu.style.marginLeft= (a-800)+"px";
    }
    shi =window.setTimeout("huan()",3000);
}
var shi =window.setTimeout("huan()",3000);

function pause()
{
    window.clearTimeout(shi);
}

function conti()
{
    shi = window.setTimeout("huan()",3000);
}

function dong(ad)
{
    var tu =document.getElementById("ta");
    var a=parseInt(tu.style.marginLeft);
    if(ad==-1)
    {
        if(a==0)
        {
            tu.style.marginLeft=-3200+"px";
        }
        else
        {
            tu.style.marginLeft= (a+800)+"px";
        }
    }
    else
    {
        if(a==-3200)
        {
            tu.style.marginLeft=0+"px";
        }
        else
        {
            tu.style.marginLeft= (a-800)+"px";
        }
    }
}

</script>

CSS3动画

通过CSS3，我们能够创建动画，这样可以在许多网页中取代动画图片、Flash动画以及JavaScript动画。想要创建CSS3动画，需要遵循@keyframes规则。@keyframes规则用于创建动画。在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果。

注：IE需要10及以上。

创建好动画之后需要绑定到某个选择器，否则不会产生任何动画效果。使用animation进行动画捆绑。两个值：动画名称、时长。时间长度必须规定，否则默认为0。也就是表示没有动画效果。

1.动画1

<style>
body{font-size:24px; color:#60F;}
div{
    width:300px;
    height:300px;
    background:red;
    animation:myfirst 5s;/*动画捆绑，两个值，动画名称、时长*/
}
@keyframes myfirst
{    /*创建动画，使用@keyframes规则*/
    from {background:red;}
    to {background:yellow;}
    /*将背景颜色从red改为yellow，时间长度在外部定义*/
}
</style>
</head>

<body>
<div></div><br />
本示例是将此div的背景颜色由红色转变为黄色。<br />
使用@keyframes规则写了一个动画，然后在选择器中将此动画捆绑到了div上。<br />
捆绑使用了animation。时间长度写在选择器中捆绑之后。<br />
必须规定时间长度，否则默认为0。也就是没有动画。
</body>
</html>

2.动画2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{font-size:24px; color:#60F;}
div{
    width:300px;
    height:300px;
    background:black;
    animation:myfirst 5s;/*动画捆绑，两个值，动画名称、时长*/
}
@keyframes myfirst
{
0%   {background:red;}/*动画开始样式*/
25%  {background:yellow;}
50%  {background:blue;}
100% {background:green;}/*动画结束样式*/
}
</style>
</head>

<body>
<div></div><br />
注意：一上来就进行动画。动画在完成之后会直接变回初始样式（黑色背景）。<br />
<br />
上面动画效果是：开始时为红色背景，25%时为黄色背景，50%时为蓝色背景，100%时为绿色背景。
</body>
</html>

3.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{font-size:24px; color:#60F;}
div{
    width:300px;
    height:300px;
    background:black;
    position:relative;/*由于需要进行位置改变，所以增加了position属性*/
    animation:myfirst 5s;/*动画捆绑，两个值，动画名称、时长*/
}
@keyframes myfirst
{/*改变位置和背景颜色*/
0%   {background:red; border-radius:90px; box-shadow:-35px 0px 15px gray; left:0px; top:0px;}
25%  {background:yellow; border-radius:0px; left:400px; top:0px;}
50%  {background:blue; border-radius:90px; left:400px; top:300px;}
75%  {background:green; border-radius:0px; box-shadow:0px 30px 15px gray; left:0px; top:300px;}
100% {background:red; border-radius:20px; left:0px; top:0px;}
}

</style>
</head>

<body>
本示例中，更改了背景颜色以及定位、阴影效果三个样式。<br />
动画完成之后还是直接恢复初始样式。
<div></div>
</body>
</html>

4.动画4

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{font-size:24px; color:#60F;}
div{
    width:300px;
    height:300px;
    background:black;
    position:relative;/*由于需要进行位置改变，所以增加了position属性*/
    animation:myfirst 5s infinite;/*动画捆绑，两个值，动画名称、时长，加上一个无限执行*/
}
@keyframes myfirst
{/*改变位置和背景颜色*/
0%   {background:red; border-radius:90px; box-shadow:-35px 0px 15px gray; left:0px; top:0px;}
25%  {background:yellow; border-radius:0px; left:400px; top:0px;}
50%  {background:blue; border-radius:90px; left:400px; top:300px;}
75%  {background:green; border-radius:0px; box-shadow:0px 30px 15px gray; left:0px; top:300px;}
100% {background:red; border-radius:20px; left:0px; top:0px;}
}

</style>
</head>

<body>
本示例中，更改了背景颜色以及定位、阴影效果三个样式。<br />
由于本动画在捆绑选择器时添加了一个infinite值，那么本动画将无限执行下去。<br />

<div></div>
</body>
</html>

5.动画5

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{font-size:24px; color:#60F;}
div{
    width:300px;
    height:300px;
    background:black;
    position:relative;/*由于需要进行位置改变，所以增加了position属性*/
    animation:myfirst 5s infinite linear;/*动画捆绑，两个值，动画名称、时长，加上一个无限执行*/
}
@keyframes myfirst
{/*改变位置和背景颜色*/
0%   {background:red; border-radius:90px; box-shadow:-35px 0px 15px gray; left:0px; top:0px;}
25%  {background:yellow; border-radius:0px; left:400px; top:0px;}
50%  {background:blue; border-radius:90px; left:400px; top:300px;}
75%  {background:green; border-radius:0px; box-shadow:0px 30px 15px gray; left:0px; top:300px;}
100% {background:red; border-radius:20px; left:0px; top:0px;}
}

</style>
</head>

<body>
本示例中，更改了背景颜色以及定位、阴影效果三个样式。<br />
本动画在捆绑选择器时添加了一个infinite值，本动画将无限执行下去。添加了一个linear值，那么运行时会匀速。<br />

<div></div>
</body>
</html>

6.动画6

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{font-size:24px; color:#60F;}
div{
    width:300px;
    height:300px;
    background:black;
    position:relative;/*由于需要进行位置改变，所以增加了position属性*/
    animation:myfirst 5s infinite alternate;/*动画捆绑，两个值，动画名称、时长，加上一个无限执行，交替执行*/
}
@keyframes myfirst
{/*改变位置和背景颜色*/
0%   {background:red; border-radius:90px; box-shadow:-35px 0px 15px gray; left:0px; top:0px;}
25%  {background:yellow; border-radius:0px; left:400px; top:0px;}
50%  {background:blue; border-radius:90px; left:400px; top:300px;}
75%  {background:green; border-radius:0px; box-shadow:0px 30px 15px gray; left:0px; top:300px;}
100% {background:red; border-radius:20px; left:0px; top:0px;}
}

</style>
</head>

<body>
本示例中，更改了背景颜色以及定位、阴影效果三个样式。<br />
由于本动画在捆绑选择器时添加了一个infinite值，那么本动画将无限执行下去。<br />
在无限执行的基础之上增加了一个alternate值，那么本动画会进行正反交替执行。
<div></div>
</body>
</html>

时间： 2024-12-26 08:34:32

CSS3学习（CSS3过渡、CSS3动画）的相关文章

从零开始学习前端开发 — 15、CSS3变形基础过渡、动画

一.css3过渡 语法: transition: 过渡属性 过渡时间 延迟时间 过渡方式; 1.过渡属性(transition-property) 取值:all 所有发生变化的css属性都添加过渡 eg: transition: all 1s; ident 指定要过渡的css属性列表 eg: transition:border-radius 1s,background 2s; none 没有属性发生过渡 注:我们可以省略滑过状态或其他状态的过渡属性,但是不能省略初始状态的transition属性

CSS3学习总结3-3D与动画

前言:这是篇CSS3中关于3D效果与动画相关的内容. (1)在CSS3的3D效果中,需要结合透视perspective的属性才能看到3d的效果,这个属性在屏幕上实现了元素近大远小的效果,所以要使用CSS3的3d相关属性,需要记得写perspective. (2)在CSS3的3d坐标系与数学中的坐标系有所区别,主要是在y轴正方向的规定上. x轴正方向:从左往右 y轴正方向:从上至下 z轴正方向:从里至外 旋转 在C3的2D变换中,rotate代表了元素围绕Z轴旋转一个角度,3d中还有围绕X和Y轴旋

重新想，重新看——CSS3变形，过渡与动画③

这一篇主要谈谈CSS3的过渡属性. 过渡属性被设计的十分通俗易懂,属性写法为transition,有四个子属性: <transition-property> 表示需要过渡的属性[必须](本质上,transition对元素的该属性上加了一个监听器,一旦发现属性值变动,则开启'过渡'开关,令该属性的值开始过渡.)其下的值有以下三种类型: none all 表示该元素所有可过渡属性均监听: <single-transition-property> 所需监听的单个属性(如需监听多个属性则需

CSS3 转换、过渡和动画

一.转换 1.属性:transform 取值:none/transform-function(转换函数) 注意:如果要实现多个转换函数的话,可以用空格分开若干transform-function 2.转换的原点 默认情况,原点在元素的中心处,width*50%,height*50% 更换原点-属性:transform-origin:数值/百分比/关键字(top/bottom/left/right) 取值:按照当前元素的左上点为(0,0) 一个值:所有轴的位置 两个值:第一个值表示x轴上的值,第二

CSS3变形、过渡、动画、关联属性浅析

一.变形 transform:可以对元素对象进行旋转rotate.缩放scale.移动translate.倾斜skew.矩阵变形matrix.示例: transform: rotate(90deg) scale(1.5,0.8) translate(100px,50px) skew(45deg,45deg); /*矩阵变形*/ matrix(<number>,<number>,<number>,<number>,<number>,<numb

CSS3学习记录之loading动画

loading动画就是在加载一些网页内容的时候呈现出来的小动画,记录一下学到的几种loading动画: 效果:http://1.huizit1.applinzi.com/CSS/Loading/loading.html 第一个是一个圆形的一部分在旋转,实现原理: 在相应的位置添加一个 i 标签,然后设置width和height(值一样),然后添加border-radius:50%,此时这个i标签呈现出来的是一个圆,为了和图示效果一样,需要把这个圆遮住多半个,用background: linear

css3 转换 、 过渡 、 动画 、 CSS 优化

1. 转换的原点 默认在中心点: 修改原点:transform-orign: 值: 1.x坐标 y坐标 当前物体左上角为x:0px y:0px; 2.宽度百分比 高度百分比 0%  0%  左上点 50% 50% 中心点 3.关键字: top bottom left right center 中间 默认 left top 左上点 4.如果只给一个值,x坐标和y坐标相同: 两     x坐标 y坐标 三     x坐标 y坐标 z坐标 2.转换 2d 形状 尺寸 位置 transform: 旋转:

CSS3 变形、过渡、动画、关联属性浅析（转载）

一.变形 transform:可以对元素对象进行旋转rotate.缩放scale.移动translate.倾斜skew.矩阵变形matrix.示例: transform: rotate(90deg) scale(1.5,0.8) translate(100px,50px) skew(45deg,45deg); /*矩阵变形*/ matrix(<number>,<number>,<number>,<number>,<number>,<numb

050602课堂css3旋转、过渡、动画

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #first{ width: 200px; height: 200px; background-color: orange; margin-left: 200px; margin-top: 200px

CSS3学习笔记(1)-CSS3选择器

CSS3与CSS2相比发生了很大的变化,CSS3的亮点功能包括实现圆角.阴影.新的flex伸缩布局模型.多列布局模型.填充色的渐变.2D变形(位移.缩放.旋转.倾斜).3D变形.动画(transition过渡动画.animation关键帧动画)等.看到这些字眼,你实际上已经可以深深感受到CSS3的野心,通过这些东西基本上都可以做出很棒的多媒体演示了,flash.Powerpoint制作演示也无外乎这些东西而已! 确实如此,CSS从CSS3开始,已经从单纯的实现静态页面元素布局美化之中超脱出来,向