欢迎使用CSDN-markdown编辑器

来源：互联网发布：裁剪照片的软件编辑：程序博客网时间：2024/05/17 09:38

可能在很多人的印象中,css只能用来排版和布局,但实际上活用css,可以很写出相当漂亮的效果,而且相对js更加简单.比如在网页中加入飞入,飞出,淡入旋转等等效果.使用时只需要添加相应css类即可十分方便.

一个简单的飞入效果:自左加深飞入

.feiru {/*飞入*/    -webkit-animation: feiru 1s;    -o-animation: feiru 1s;    animation: feiru 1s}@keyframes feiru {    from {        webkit-transform: translate(700px, 0px);        -moz-transform: translate(700px, 0px);        -ms-transform: translate(700px, 0px);        -o-transform: translate(700px, 0px);        transform: translate(700px, 0px);        opacity: 0    }    to {        -webkit-transform: translate(0px, 0px);        -moz-transform: translate(0px, 0px);        -ms-transform: translate(0px, 0px);        -o-transform: translate(0px, 0px);        transform: translate(0px, 0px);        opacity: 1    }}@-moz-keyframes feiru {    from {        webkit-transform: translate(700px, 0px);        -moz-transform: translate(700px, 0px);        -ms-transform: translate(700px, 0px);        -o-transform: translate(700px, 0px);        transform: translate(700px, 0px);        opacity: 0    }    to {        -webkit-transform: translate(0px, 0px);        -moz-transform: translate(0px, 0px);        -ms-transform: translate(0px, 0px);        -o-transform: translate(0px, 0px);        transform: translate(0px, 0px);        opacity: 1    }}@-webkit-keyframes feiru {    from {        webkit-transform: translate(700px, 0px);        -moz-transform: translate(700px, 0px);        -ms-transform: translate(700px, 0px);        -o-transform: translate(700px, 0px);        transform: translate(700px, 0px);        opacity: 0    }    to {        -webkit-transform: translate(0px, 0px);        -moz-transform: translate(0px, 0px);        -ms-transform: translate(0px, 0px);        -o-transform: translate(0px, 0px);        transform: translate(0px, 0px);        opacity: 1    }}@-o-keyframes feiru {    from {        webkit-transform: translate(700px, 0px);        -moz-transform: translate(700px, 0px);        -ms-transform: translate(700px, 0px);        -o-transform: translate(700px, 0px);        transform: translate(700px, 0px);        opacity: 0    }    to {        -webkit-transform: translate(0px, 0px);        -moz-transform: translate(0px, 0px);        -ms-transform: translate(0px, 0px);        -o-transform: translate(0px, 0px);        transform: translate(0px, 0px);        opacity: 1    }}

一个简单的淡入效果:扩大并淡入

.danru {/*淡入*/    -webkit-animation: danru 1.5s;    -o-animation: danru 1.5s;    animation: danru 1.5s;    animation-delay: .5s;    -webkit-animation-delay: .5s}@keyframes danru {    0% {        webkit-transform: scale(0.7, 0.7);        -moz-transform: scale(0.7, 0.7);        -ms-transform: scale(0.7, 0.7);        -o-transform: scale(0.7, 0.7);        transform: scale(0.7, 0.7);        opacity: 0    }    100% {        -webkit-transform: translate(0px, 0px);        -moz-transform: translate(0px, 0px);        -ms-transform: translate(0px, 0px);        -o-transform: translate(0px, 0px);        transform: translate(0px, 0px);        opacity: 1    }}@-moz-keyframes danru {    0% {        webkit-transform: scale(0.7, 0.7);        -moz-transform: scale(0.7, 0.7);        -ms-transform: scale(0.7, 0.7);        -o-transform: scale(0.7, 0.7);        transform: scale(0.7, 0.7);        opacity: 0    }    100% {        -webkit-transform: translate(0px, 0px);        -moz-transform: translate(0px, 0px);        -ms-transform: translate(0px, 0px);        -o-transform: translate(0px, 0px);        transform: translate(0px, 0px);        opacity: 1    }}@-webkit-keyframes danru {    0% {        webkit-transform: scale(0.7, 0.7);        -moz-transform: scale(0.7, 0.7);        -ms-transform: scale(0.7, 0.7);        -o-transform: scale(0.7, 0.7);        transform: scale(0.7, 0.7);        opacity: 0    }    100% {        -webkit-transform: translate(0px, 0px);        -moz-transform: translate(0px, 0px);        -ms-transform: translate(0px, 0px);        -o-transform: translate(0px, 0px);        transform: translate(0px, 0px);        opacity: 1    }}@-o-keyframes danru {    0% {        webkit-transform: scale(0.7, 0.7);        -moz-transform: scale(0.7, 0.7);        -ms-transform: scale(0.7, 0.7);        -o-transform: scale(0.7, 0.7);        transform: scale(0.7, 0.7);        opacity: 0    }    100% {        -webkit-transform: translate(0px, 0px);        -moz-transform: translate(0px, 0px);        -ms-transform: translate(0px, 0px);        -o-transform: translate(0px, 0px);        transform: translate(0px, 0px);        opacity: 1    }}

旋转效果

.xuanzhuan{    animation: xuanzhuan 3s;    -moz-animation: xuanzhuan 3s;    -webkit-animation: xuanzhuan 3s;    -o-animation: xuanzhuan 3s;    animation-iteration-count: 99;    -webkit-animation-iteration-count: 99;    animation-timing-function: linear;    -webkit-animation-timing-function: linear;}@keyframes xuanzhuan {    from {        transform: rotate(0deg)    }    to {        transform: rotate(-360deg)    }}@-moz-keyframes xuanzhuan {    from {        transform: rotate(0deg)    }    to {        transform: rotate(-360deg)    }}@-webkit-keyframes xuanzhuan {    from {        transform: rotate(0deg)    }    to {        transform: rotate(-360deg)    }}@-o-keyframes xuanzhuan {    from {        transform: rotate(0deg)    }    to {        transform: rotate(-360deg)    }}

0 0