CSS3变形与动画的相关属性

来源：互联网发布：苹果5s2g网络怎么改4g 编辑：程序博客网时间：2024/05/21 17:38

CSS3提供的变形支持可以对HTML组件进行常见的几何变换

旋转
缩放
倾斜
位移

CSS3位变形支持提供了如下两个属性值:

transform：向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。CSS3提供了如下变形函数
transform-origin:该属性摄者变形的中心点该属性值应该指定为xCenter yCenter,其中xCenter,yCenter支持如下几种属性:
left top right bottom center 长度值百分比:分别指定旋转中心点位于HTML组件的哪边界
其中left right只能指定给xCenter
right bottom只能指定给yCenter

四种基本变形

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>动画</title>    <style>         div{             display: inline-block;             width: 60px;             height: 60px;             border: 2px solid red;             margin: 20px;             background-color: #bbb;         }    </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,-80px);-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:skew(30deg);">文字</div><br/>       <div>文字</div> 纵向倾斜30度 <div style="-moz-transform:skewY(30deg);-webkit-transform: skewY(30deg);-o-transform:skewY(30deg);">文字</div><br/></body></html>

效果:

这里写图片描述

同时应用多种变形

如果希望我们为HTML组件同时应用多种变形可以为transform同时指定多个变形函数

比如看如下代码:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>动画</title>    <style>         div{            position: absolute;             width: 140px;             height: 140px;             border: 2px solid red;             margin: 20px;             background-color: #bbb;         }    </style></head><body>        <div>文字</div>   <div style="-moz-transform: rotate(30deg) translate(260px,60px) scale(2.4,0.4);-webkit-transform: rotate(30deg) translate(260px,60px) scale(2.4,0.4);-o-transform: rotate(30deg) translate(260px,60px) scale(2.4,0.4);">文字</div><br/></body></html>

效果:

这里写图片描述

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>动画</title>    <style>         div{            position: absolute;             width: 140px;             height: 140px;             border: 2px solid red;             margin: 20px;             background-color: #bbb;         }    </style></head><body>        <div>文字</div>   <div style="-moz-transform: translate(260px,60px) scale(2.4,0.4) rotate(30deg) ;-webkit-transform: translate(260px,60px) scale(2.4,0.4) rotate(30deg) ;;-o-transform: translate(260px,60px) scale(2.4,0.4) rotate(30deg) ;">文字</div><br/></body></html>

仅仅把翻转放到最后效果就不一样了

这里写图片描述

所以需要注意下 3种同样的变换如果变换的顺序不同那么效果也是不同的

指定变形中心点

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>动画</title>    <style>         div{             position: absolute;             width: 80px;             height: 80px;             border: 2px solid red;             background-color: #bbb;         }        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(-30deg) ;         -webkit-transform-origin:left top;-webkit-transform: rotate(-30deg) ;         -o-transform-origin:left top;-o-transform: rotate(-30deg) ;">左上角变形中心</div><br/>        <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><br/>        <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><br/></body></html>

这里写图片描述

CSS3提供的Transition动画

CSS3提供了Transition动画支持可以控制HTML组件的某个属性发生改变时会经理一段时间以平滑渐变的方式发生改变这就产生了动画效果

Transition属性值包括如下4个:
这里写图片描述

transition-property可以指定background-color,width,height等

transition-duration:平滑渐变的时间

transition-timing-function:渐变的速度值可以由如下图几种

这里写图片描述

transition-delay:指定延迟时间

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>动画</title>    <style>        div        {            width:100px;            height:100px;            background:blue;            transition:background-color 4s linear;            -moz-transition:background-color 4s linear; /* Firefox 4 */            -webkit-transition:background-color 4s linear; /* Safari and Chrome */            -o-transition:background-color 4s linear; /* Opera */        }        div:hover        {            background-color:yellow;        }    </style></head><body><div>鼠标移上来会发生颜色渐变</div></body></html>

效果不言而喻鼠标移上去div区从红色渐变黄色

多个属性同时渐变

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>动画</title>    <style>       #target{           position: absolute;           transition: left 5s linear,top 5s linear;           -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 src="1.png" alt="气球" id="target">         <script>                  var target=document.getElementById("target");                 target.style.left="0px";                 target.style.top="0px";                     document.onmousedown=function (evt) {                         alert(evt.pageX);                         alert(evt.pageY);                             target.style.left=evt.pageX+"px";                         target.style.top=evt.pageY+"px";                     }         </script></body></html>

这里写图片描述

鼠标点击网页上哪里这个图片就会移向哪里

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>动画</title>    <style>        div{            width: 200px;            height: 180px;            background-color: red;            transition: background-color 2s linear 2s,width 2s linear 2s,height 2s linear 2s;/*延迟了两秒*/            -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></head><body>        <div id="target"></div>        <button onclick="zoom(2.0,'blue')">放大</button>        <button onclick="zoom(0.5,'yellow')">缩小</button>        <button onclick="zoom(1,'red')">恢复</button>         <script>                   var target=document.getElementById("target");                   var Width=200;                   var Height=180;                    function zoom(scale,bgColor) {                        target.style.width=Width*scale+"px";                        target.style.height=Height*scale+"px";                        target.style.backgroundColor=bgColor;                    }         </script></body></html>

效果:
这里写图片描述

CSS3中提供的Animation动画

animation 属性是一个简写属性，用于设置六个动画属性：
这里写图片描述

形式:

  @keyframes 动画名 {   百分比{...}    ...  }   ...:hover{                animation-name:调用动画名;        }

看下面的例子:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>animation动画</title>    <style>         @-webkit-keyframes donghua {             0% {                 left: 100px;             }             40% {                 left: 150px;             }             60% {                 left: 75px;             }             100% {                 left: 100px;             }         }         @-o-keyframes donghua {             0% {                 left: 100px;             }             40% {                 left: 150px;             }             60% {                 left: 75px;             }             100% {                 left: 100px;             }         }         @-moz-keyframes donghua {             0% {                 left: 100px;             }             40% {                 left: 150px;             }             60% {                 left: 75px;             }             100% {                 left: 100px;             }         }         div{             position: absolute;             border: 1px solid red;             width: 90px;             height: 90px;             background-color: #FF9A66;         }        div:hover{                animation-name: donghua;            animation-duration: 5s;            animation-iteration-count:3;        }    </style></head><body>       <div>移动到div出现动画效果</div></body></html>

效果:

这里写图片描述

以下附一个鱼眼效果的代码:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>鱼眼效果</title>         <style>                div>a{                    margin-left: 30px;                    display: inline-block;                    text-align: center;                    border: 1px solid red;                    border-radius: 20px;                    padding: 5px;                    background-color: #eee;                }             a:link{                 text-decoration:none;             }             @-webkit-keyframes change{                   0%{                       -webkit-transform: scale(1);                       background-color: #eee;                       border-radius: 10px;                   }                  40%{                      -webkit-transform: scale(1.5);                      background-color: #bbb;                      border-radius: 10px;                  }                 100%{                     -webkit-transform: scale(1);                     background-color: #eee;                     border-radius: 10px;                 }             }             @-moz-keyframes change {                  0%{                      -moz-transform: scale(1);                       background-color: #eee;                      border-radius: 10px;                  }                  40%{                      -moz-transform: scale(1.5);                      background-color: #bbb;                     border-radius: 10px;                  }                  100%{                       -moz-transform: scale(1);                      background-color: #eee;                      border-radius: 10px;                  }             }             @-o-keyframes change {                 0%{                     -o-transform: scale(1);                     background-color: #eee;                     border-radius: 10px;                 }                 40%{                     -o-transform: scale(1.5);                     background-color: #bbb;                     border-radius: 10px;                 }                 100%{                     -o-transform: scale(1);                     background-color: #eee;                     border-radius: 10px;                 }             }             a:hover{                 animation-name:  change;                 animation-duration: 3s;                 animation-iteration-count: infinite;             }         </style></head><body>          <div>               <a>JAVASE从入门到放弃</a>              <a>JAVAEE从入门到放弃</a>              <a>javasrcipt从入门到放弃</a>              <a>css从入门到放弃</a>          </div></body></html>

效果:

这里写图片描述

1 0