HTML 5_CSS 3_JavaScript讲义（十一）- 变形和动画相关属性

（1）.CSS3提供的变形支持

1.1 4种基本变形

<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 变形 </title>
    <style type="text/css">
        div {
            display: inline-block;
            width: 60px;
            height: 60px;
            background-color: #bbb;
            border: 2px solid black;
            margin: 20px;
        }
    </style>
</head>
<body>
<div>文字</div> 未变形 <div>文字</div><br/>
<div>文字</div> 旋转30度 <div style="
    -moz-transform:rotate(30deg);
    -webkit-transform:rotate(30deg);
    -o-transform:rotate(30deg);">文字</div><br/>
<div>文字</div> 位移120px,-80px <div style="
    -moz-transform:translate(120px,-80px);
    -webkit-transform:translate(120px,-50px);
    -o-transform:translate(120px,-80px);">文字</div><br/>
<div>文字</div> 缩放1.9, 0.4 <div style="
    -moz-transform:scale(1.9,0.4);
    -webkit-transform:scale(1.9,0.4);
    -o-transform:scale(1.9,0.4);">文字</div><br/>
<div>文字</div> 缩放0.8, 2.1 <div style="
    -moz-transform:scale(0.8, 2.1);
    -webkit-transform:scale(0.8, 2.1);
    -o-transform:scale(0.8, 2.1);">文字</div><br/>
<div>文字</div> 横向倾斜30度 <div style="
    -moz-transform:skew(30deg);
    -webkit-transform:skew(30deg);
    -o-transform:scaleskew(30deg);">文字</div><br/>
<div>文字</div> 纵向倾斜30度 <div style="
    -moz-transform:skewY(30deg);
    -webkit-transform:skewY(30deg);
    -o-transform:skewY(30deg);">文字</div><br/>
</body>
</html>

四种基本变形

1.2 同时应用多种变形

<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 同时使用多种变形 </title>
    <style type="text/css">
        div {
            position: absolute;
            width: 140px;
            height: 140px;
            background-color: #bbb;
            border: 2px solid black;
            margin: 30px;
        }
    </style>
</head>
<body>
<div>文字</div><div style="
    -moz-transform:rotate(30deg) translate(260px, 60px) scale(2.4,0.4);
    -webkit-transform:rotate(30deg) translate(120px, 80px) scale(2.4,0.4);
    -o-transform:rotate(30deg) translate(120px,80px) scale(2.4,0.4);">文字</div>
</body>
</html>

同时应用多种变形

1.3 指定变形中心点

transform-origin

<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 变形 </title>
    <style type="text/css">
        div {
            position: absolute;
            width: 90px;
            height: 90px;
            background-color: #bbb;
            border: 2px solid black;
        }
        div.a {
            left: 30px;
            top: 30px;
        }
        div.b {
            left: 30px;
            top: 150px;
        }
        div.c {
            left: 30px;
            top: 270px;
        }
    </style>
</head>
<body>
<div class="a">
未变换之前
</div>
<div class="a"
style="-moz-transform-origin:left top;-moz-transform:rotate(-25deg);
    -webkit-transform-origin:left top;-webkit-transform:rotate(-25deg);
    -o-transform-origin:left top;-o-transform:rotate(-25deg);">
左上角为变换中心
</div>
<div class="b">
未变换之前
</div>
<div class="b"
style="-moz-transform-origin:right bottom;-moz-transform:rotate(65deg);
    -webkit-transform-origin:right bottom;-webkit-transform:rotate(65deg);
    -o-transform-origin:right bottom;-o-transform:rotate(65deg);">
右下角为变换中心
</div>
<div class="c">
未变换之前
</div>
<div class="c"
style="-moz-transform-origin:right center;-moz-transform:rotate(-90deg);
    -webkit-transform-origin:right center;-webkit-transform:rotate(-90deg);
    -o-transform-origin:right center;-o-transform:rotate(-90deg);">
右边界的中间为变换中心
</div>
</body>
</html>

指定变形中心点

1.4 使用矩阵变换

<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> matrix变形 </title>
    <style type="text/css">
        div {
            position: absolute;
            width: 120px;
            height: 120px;
            background-color: #bbb;
            border: 2px solid black;
        }
        div.a {
            left: 50px;
            top: 50px;
        }
        div.b {
            left: 50px;
            top: 200px;
        }
    </style>
</head>
<body>
<div class="a">
未变换之前
</div>
<div class="a"
style="-moz-transform-origin:left top;-moz-transform:matrix(1, 0, 0, 1, 80px, -30px);
    -webkit-transform-origin:left top;-webkit-transform::matrix(1, 0, 0, 1, 80px, -30px);
    -o-transform-origin:left top;-o-transform::matrix(1, 0, 0, 1, 80px, -30px);">
左上角为变换中心,仅仅位移
</div>
<div class="b">
未变换之前
</div>
<div class="b"
style="-moz-transform:matrix(1.5, 0, 0, 0.6, 0px, 0px);
    -webkit-transform::matrix(1.5, 0, 0, 0.6, 0px, 0px);
    -o-transform::matrix(1.5, 0, 0, 0.6, 0px, 0px);">
缩放1.5, 0.6
</div>
</body>
</html>

使用矩阵变换

（2） CSS3提供的Transition动画

transition-property : 指定对HTML元素的哪个CSS属性进行平滑渐变处理
transition-duration : 指定属性平滑渐变的时间
transition-timing-function : 指定渐变的速度

ease 动画开始速度较慢，然后速度加快，达到最大速度后减慢速度
linear 线性速度
ease-in 动画开始比较慢，然后速度加快
ease-out 动画开始比较快，然后速度减慢
ease-in-out 动画开始速度较慢，然后速度加快，达到最大速度后减慢速度
cubic-bezier

transition-delay : 延迟时间

<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 背景色变化 </title>
    <style type="text/css">
        div {
            width: 400px;
            height: 50px;
            border: 1px solid black;
            background-color: red;
            padding: 10px;
            -moz-transition: background-color 4s linear;
            -webkit-transition: background-color 4s linear;
            -o-transition: background-color 4s linear;
        }
        div:hover {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div>鼠标移上来会发生颜色渐变</div>
</body>
</html>

颜色渐变效果

2.1 多个属性同时渐变

<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 漂浮的气球 </title>
    <style type="text/css">
        img#target {
            position: absolute;
            /* 指定气球图片的left、top属性会采用平滑渐变的方式来改变 */
            -moz-transition: left 5s linear , top 5s linear;
            -webkit-transition: left 5s linear , top 5s linear;
            -o-transition: left 5s linear , top 5s linear;
        }
    </style>
</head>
<body>
<img id="target" src="balloon.gif" alt="气球"/>
<script type="text/javascript">
    var target = document.getElementById("target");
    target.style.left = "0px";
    target.style.top = "0px";
    // 为鼠标按下事件绑定监听器
    document.onmousedown = function(evt)
    {
        // 将鼠标事件的X、Y坐标赋给气球图片的left、top。
        target.style.left = evt.pageX + "px";
        target.style.top = evt.pageY + "px";
    }
</script>
</body>
</html>

多个属性同时渐变

<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> Transition动画 </title>
    <style type="text/css">
        div {
            width: 200px;
            height: 160px;
            background-color: red;
            /* 指定背景色、宽度、高度会以平滑简便的方式来改变
            指定动画持续时间为2秒，动画会延迟2秒之后才启动。
            */
            -moz-transition: background-color 2s linear 2s,
                width 2s linear 2s, height 2s linear 2s;
            -webkit-transition: background-color 2s linear 2s,
                width 2s linear 2s, height 2s linear 2s;
            -o-transition: background-color 2s linear 2s,
                width 2s linear 2s, height 2s linear 2s;
        }
    </style>
    <script type="text/javascript">
        // 定义目标组件的初始宽度、高度
        var originWidth = 200;
        var originHeight = 160;
        var zoom = function(scale , bgColor)
        {
            var target = document.getElementById("target");
            // 设置缩放之后的宽度、高度
            target.style.width = originWidth * scale + "px";
            target.style.height = originHeight * scale + "px";
            // 设置背景色
            target.style.backgroundColor = bgColor;
        }
    </script>
</head>
<body>
<button onclick="zoom(2 , 'blue');">放大</button>
<button onclick="zoom(0.5 , 'green');">缩小</button>
<button onclick="zoom(1 , 'red');">恢复</button>
<div id="target">
</div>
</body>
</html>

同时修改HTML宽度，高度和背景色

（3） CSS3提供的 Animation 动画

animation-name: 动画名称
animation-duration: 动画持续的时间
animation-timing-function: 动画的变化速度
animation-delay: 动画延迟时间
animation-iteration-count: 动画循环执行次数
animation

<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> Animation动画 </title>
    <style type="text/css">
    /* 定义一个关键帧 */
    @-webkit-keyframes 'fkjava' {
        /* 定义动画开始处的关键帧 */
        0% {
            left: 100px;
        }
        /* 定义动画进行40%时的关键帧 */
        40% {
            left: 150px;
        }
        /* 定义动画进行60%时的关键帧 */
        60% {
            left: 75px;
        }
        /* 定义动画进行100%时的关键帧 */
        100% {
            left: 100px;
        }
    }
    /* 为div元素定义CSS样式 */
    div{
        background-color: #ddd;
        border: 1px solid black;
        position: absolute;
        left: 100px;
        width: 60px;
        height: 60px;
    }
    /* 为鼠标悬停的div元素定义CSS样式 */
    div:hover {
        /* 指定执行fkjava动画 */
        -webkit-animation-name: 'fkjava';
        /* 指定动画的执行时间 */
        -webkit-animation-duration: 5s;
        /* 指定动画的循环次数为1 */
        -webkit-animation-iteration-count: 1;
    }
    </style>
</head>
<body>
<div>鼠标悬停、开始动画</div>
</body>
</html>

Animation动画

3.1 同时改变多个属性的动画

<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> Animation动画 </title>
    <style type="text/css">
    /* 定义一个关键帧 */
    @-webkit-keyframes 'complex' {
        /* 定义动画开始处的关键帧 */
        0% {
            -webkit-transform: rotate(0deg) scale(1);
            background-color: #f00;
        }
        /* 定义动画进行40%时的关键帧 */
        40% {
            -webkit-transform:rotate(720deg) scale(0.1);
            background-color: #ff0;
        }
        /* 定义动画进行80%时的关键帧 */
        80% {
            -webkit-transform:rotate(1080deg) scale(4);
            background-color: #f0f;
        }
        /* 定义动画进行100%时的关键帧 */
        100% {
            -webkit-transform:rotate(0deg) scale(1);
            background-color: #00f;
        }
    }
    /* 为div元素定义CSS样式 */
    div{
        background-color: gray;
        border: 1px solid black;
        position: absolute;
        left: 160px;
        top: 120px;
        width: 60px;
        height: 60px;
    }
    /* 为鼠标悬停的div元素定义CSS样式 */
    div:hover {
        /* 指定执行fkjava动画 */
        -webkit-animation-name: 'complex';
        /* 指定动画的执行时间 */
        -webkit-animation-duration: 8s;
        /* 指定动画的循环次数为1 */
        -webkit-animation-iteration-count: 1;
    }
    </style>
</head>
<body>
<div>鼠标悬停、开始动画</div>
</body>
</html>

同时改变多个属性的动画

3.2 鱼眼效果

<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> fisheye </title>
    <style type="text/css">
        a:link {
            text-decoration: none;
        }
        div>a{
            display: inline-block;
            text-align: center;
            width: 120px;
            padding: 8px;
            background-color: #eee;
            border: 2px solid black;
            border-radius : 20px;
        }
        /* 定义一个关键帧 */
        @-webkit-keyframes 'fisheye' {
            /* 定义动画开始处的关键帧 */
            0% {
                -webkit-transform: scale(1);
                background-color: #eee;
                border-radius : 10px;
            }
            /* 定义动画进行40%时的关键帧 */
            40% {
                -webkit-transform: scale(1.5);
                background-color: #bbb;
                border-radius : 10px;
            }
            /* 定义动画进行100%时的关键帧 */
            100% {
                -webkit-transform: scale(1);
                background-color: #eee;
                border-radius : 10px;
            }
        }
        div>a:hover {
            /* 指定执行fkjava动画 */
            -webkit-animation-name: 'fisheye';
            /* 指定动画的执行时间 */
            -webkit-animation-duration: 3s;
            /* 指定动画的循环无限次 */
            -webkit-animation-iteration-count: infinite;
        }
    </style>
</head>
<body>
<div>
    <a href="http://www.crazyit.org" alt="crazyit">疯狂Java联盟</a>
    <a href="http://www.fkjava.org" alt="fkjava">疯狂软件教育</a>
    <a href="http://www.crazyit.org" alt="fkjava">关于我们</a>
    <a href="http://www.fkjava.org" alt="fkjava">疯狂成员</a>
</div>
</body>
</html>

鱼眼效果

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 217,084评论 6赞 503
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 92,623评论 3赞 392
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 163,450评论 0赞 353
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 58,322评论 1赞 293
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 67,370评论 6赞 390
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 51,274评论 1赞 300
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 40,126评论 3赞 418
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,980评论 0赞 275
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 45,414评论 1赞 313
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,599评论 3赞 334
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,773评论 1赞 348
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,470评论 5赞 344
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 41,080评论 3赞 327
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,713评论 0赞 22
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,852评论 1赞 269
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 47,865评论 2赞 370
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,689评论 2赞 354