首页 > 代码库 > CSS进阶

CSS进阶

2024-08-27 17:38:13   211人阅读

CSS简单动画及二三维常用变换

/*向右移动*/.moveRight{    background-color:#FFF121;    position:relative;    animation:moveRightFrame 5s;/*infinite 循环*/    animation-delay:3s;/*延时*/    animation-iteration-count:2;/*循环次数*/    animation-direction:alternate;/*是否轮流反向播放 normal或alternate */}@keyframes moveRightFrame{    from {left:0px;}    to {left:200px;}}@-webkit-keyframes moveRightFrame{/*谷歌浏览器*/    from {left:0px;}    to {left:200px;}}/*指定变化过程*/@keyframes moveRightFrame1{    0% {left:0px;}    25% {left:100px;}    50% {left:400px;}    100% {left:800px;}}@-webkit-keyframes moveRightFrame1{/*谷歌浏览器*/    0% {left:0px;}    25% {left:100px;}    50% {left:400px;}    100% {left:800px;}}/*属性变化 直接设置标签的style会覆盖此处属性*/.propertyChange{    width:100px;    background-color:red;    transition:width 3s, background-color 5s;    -webkit-transition:width 3s, background-color 5s;}.propertyChange:hover{    width:300px;    background-color:yellow;}/*2D 变换移动 转动 缩放 拉伸*//*旋转*/.roateStyle{    width:100px;    background-color:red;    transform:rotate(45deg);    -ms-transform:rotate(45deg); /* Internet Explorer */    -moz-transform:rotate(45deg); /* Firefox */    -webkit-transform:rotate(45deg); /* Safari 和 Chrome */    -o-transform:rotate(45deg); /* Opera */}/*移动*/.translateStyle{    width:100px;    background-color:red;    transform:translate(50px,100px);    -ms-transform:translate(50px,100px); /* IE 9 */    -moz-transform:translate(50px,100px); /* Firefox */    -webkit-transform:translate(50px,100px); /* Safari and Chrome */    -o-transform:translate(50px,100px); /* Opera */}/*缩放*/.scaleStyle{    width:100px;    background-color:red;    transform:scale(2,4);    -ms-transform:scale(2,4); /* IE 9 */    -moz-transform:scale(2,4); /* Firefox */    -webkit-transform:scale(2,4);/* Safari and Chrome */    -o-transform:scale(2,4); /* Opera */}/*翻转*/.skewStyle{    width:400px;    /*background-color:red;*/    border:2px solid black;    -webkit-transform-style: preserve-3d;/*内部元素3D*/    -webkit-perspective:580;/*视图距离 透视效果*/    transform: skew(0deg,20deg);    -ms-transform: skew(0deg,20deg);    /* IE 9 */    -webkit-transform: skew(0deg,0deg);    /* Safari and Chrome */    -o-transform: skew(0deg,20deg);    /* Opera */    -moz-transform: skew(0deg,20deg);    /* Firefox */}/*3D变换*/.skew3D{    width:100px;    background-color:yellow;    /**-webkit-transform-style: preserve-3d;**/    -webkit-transform: rotateY(130deg);}/*旋转动画*/.roatAnimation{    width:100px;    /*background-color:yellow;*/    animation:roatAnimationFrame 3s;    animation-iteration-count:6;/*循环次数*/    animation-direction:normal;/*是否轮流反向播放 normal或alternate */}@keyframes roatAnimationFrame{    from{-webkit-transform: rotateY(0deg)}    to{-webkit-transform: rotateY(360deg)}}

index.html

<!DOCTYPE html><html>    <head>        <link rel="stylesheet" type="text/css" href="cssAnimation.css"/>    </head>    <body>        <div class="skewStyle" style="height:400px;">            <div class="roatAnimation" style="height:100px;">            <font size=10>你好</font>            </div>        </div>                    </body></html>

 

CSS进阶


联系
我们