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

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

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

//一：
//1.border-radius: 50px;50%
//2.box-shandow:30px 20px 10px red inset; 30px:距离左侧30px;20px:距离上边20px;10px:模糊的像素;inset:说明超出的部分不显示,仅显示外边框内部的部分,并且颜色互换
//3.background-image:
//4.background-size:
//5.background-origin:1.border-box:根据边框进行定位.2.content-box:根据文本进行定位
//二:css3文本效果
//1.text-shandow:文字阴影效果
//2.word-wrap:允许文本强制进行换行 1.break-word:将单词进行拆分
//三：css3转换
//1.2D转换:transform属性:变形、转换
    //transform:rotate(30deg);使div和它里面的文字内容一起转动30度
    //transform:translatr(30px,20px);30px:距离左侧,20px距离上边
    //transform:scale(2,3)2:宽度的倍数;3:高度的倍数
    //transform:skew(30deg,0deg):30:水平扭转30度,垂直扭转30度
//2.3D转换:rotateX():沿着x轴翻下来;rotateY():沿着y轴翻下来;
    //2D和3D的区别:2D转换仅在平面,文字可以看出没有反过来3D相当于镜面效果
//3.css3过渡:transition属性:针对颜色、长度、宽度、位置等变化的过渡过渡过渡
    //transition:1s;1s的事件进行过渡
//4.想要创建动画,需要遵循$keyframes规则;IE需要10以上;创建好动画之后需要绑定到某个选择器,否则不会产生任何动画效果;使用animation进行动画捆绑、两个值:动画名称、时长;时间长度必须规定,否则默认为0(没有动画效果);动画只执行一遍,动画结束后跳到最初样式
    //在样式表中:$keyframes id(div的id){from{background:red;} to{background:green}}

一、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="data:images/bg_flower.gif" width="200" height="200" /></td>
            <td><img src="data:images/border.png" width="200" height="200" /></td>
            <td><img src="data: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>

<!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>

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

重新想，重新看——CSS3变形，过渡与动画①
学习CSS3,觉得最难记忆的部分除了flex特性之外,就要属变形,过渡和动画部分了.作为初学者,总有种犯懒的心理,想着既然IE8浏览器都不完全支持CSS动画属性,还要考虑浏览器兼容问题,那么就不那么着 ...
重新想，重新看——CSS3变形，过渡与动画④
最后,我们来探讨一下CSS3的动画属性. 之前提到过,实际上过渡也算作动画的一种.但过渡作为动画的缺陷在于,只能使元素属性从一个值“过渡”至另一个值,但如果想要使元素的属性值根据需要在时间轴上不断变化 ...
CSS3中的过渡、动画和变换
一.过渡过渡效果一般由浏览器直接改变元素的CSS属性实现. a.transition属性 transition 属性是一个简写属性,用于设置四个过渡属性: transition-property t ...
重新想，重新看——CSS3变形，过渡与动画②
本篇文章主要用来归纳总结CSS3变形属性. CSS3变形属性大致可以分为以下三个部分: 变形控制属性 2D变形函数 3D变形函数下面将对其一一进行分析: 1.变形控制属性所谓的变形控制属性主要指“ ...
CSS3学习笔记(3)-CSS3边框
p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...
CSS3学习总结3-3D与动画
前言:这是篇CSS3中关于3D效果与动画相关的内容. (1)在CSS3的3D效果中,需要结合透视perspective的属性才能看到3d的效果,这个属性在屏幕上实现了元素近大远小的效果,所以要使用CS ...
重新想，重新看——CSS3变形，过渡与动画③
这一篇主要谈谈CSS3的过渡属性. 过渡属性被设计的十分通俗易懂,属性写法为transition,有四个子属性: <transition-property> 表示需要过渡的属性[必须](本 ...
CSS3 转换、过渡和动画
一.转换 1.属性:transform 取值:none/transform-function(转换函数) 注意:如果要实现多个转换函数的话,可以用空格分开若干transform-function 2. ...
CSS3变换、过渡、动画效果
为元素创建圆角 1.四个相同的圆角 -webkit-border-radius:10px; border-radius:10px; 2.一个圆角 -webkit-border-top-left-rad ...
CSS3 变形、过渡、动画、关联属性浅析
一.变形 transform:可以对元素对象进行旋转rotate.缩放scale.移动translate.倾斜skew.矩阵变形matrix.示例: transform: rotate(90deg) ...

随机推荐

【vijos1066】弱弱的战壕线段树
描述永恒和mx正在玩一个即时战略游戏,名字嘛~~~~~~恕本人记性不好,忘了-_-b. mx在他的基地附近建立了n个战壕,每个战壕都是一个独立的作战单位,射程可以达到无限(“mx不赢定了?!?”永恒 ...
C++primer学习笔记（一）——Chapter 3
3.1 Namespace using Declarations 1.因为C++里有名字空间的定义,例如我们使用cin的时候必须写成std::cin,如果就用一次还是可以接受的,但是如果一直都这样,那 ...
分享Kali Linux 2016.2最新镜像201609
分享Kali Linux 2016.2最新镜像20160919 Kali Linux官方继9月9日发布Kali Linux 2016.2的第36周镜像W36后,9月19日发布了Kali Linux ...
json学习系列（6）JSONObject和JSONArray是JDK的集合部分延伸
我一直觉得JSONObject和JSONArray是JDK集合部分的延伸,它们与JDK的List和Map一脉相承.通过研究JSONObject和JSONArray的结构,我们顺便也复习一下JDK的内容 ...
ZOJ1516 Uncle Tom's Inherited Land（二分图最大匹配）
一个经典的构图:对格子进行黑白染色,黑白的点分别作XY部的点. 这一题的边就是可以出售的单位面积2的土地,边的端点就是这个土地占用的X部和Y部的两个点. 这样就建好二分图,要求最多土地的答案显然是这个 ...
Transactional topologies —— 事务拓扑
事务拓扑是怎么回事? Storm guarantees that every message will be played through the topology at least once. St ...
HDU 1180 (BFS搜索)
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1180 题目大意:迷宫中有一堆楼梯,楼梯横竖变化.这些楼梯在奇数时间会变成相反状态,通过楼梯会顺便到达 ...
参考XML操作类
转载参考地址: http://blog.csdn.net/happy09li/article/details/7460521
ejabberd 的框架
最近看源码,总结ejabberd的大致框架如下
java密码验证正则表达式校验
,正则表达式就是记录文本规则的代码.php密码验证正则表达式(8位长度限制)<?php //密码验证 $password = "zongzi_Abc_oo13a2"; $n ...

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

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

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

随机推荐

热门专题