美文网首页网页开发专刊
使用 CSS3 实现超炫的div模块动画效果

使用 CSS3 实现超炫的div模块动画效果

作者: 老牛圣斗士 | 来源:发表于2016-06-18 13:29 被阅读950次

    HTML 代码:<div class="spinner"></div>

    效果1  css

    .spinner {

    width:60px;

    height:60px;

    background-color:#67CF22;

    margin:100pxauto;

    -webkit-animation: rotateplane1.2s infinite ease-in-out;

    animation: rotateplane1.2s infinite ease-in-out;

    }

    @-webkit-keyframes rotateplane {

    0%{ -webkit-transform: perspective(120px) }

    50%{ -webkit-transform: perspective(120px) rotateY(180deg) }

    100%{ -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }

    }

    @keyframes rotateplane {

    0%{

    transform: perspective(120px) rotateX(0deg) rotateY(0deg);

    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)

    }50%{

    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);

    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)

    }100%{

    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);

    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);

    }

    }

    效果2css

    .spinner {

    margin:100pxauto;

    width:32px;

    height:32px;

    position:relative;

    }

    .cube1, .cube2{

    background-color:#67CF22;

    width:30px;

    height:30px;

    position:absolute;

    top:0;

    left:0;

    -webkit-animation: cubemove1.8s infinite ease-in-out;

    animation: cubemove1.8s infinite ease-in-out;

    }

    .cube2{

    -webkit-animation-delay:-0.9s;

    animation-delay:-0.9s;

    }

    @-webkit-keyframes cubemove {

    25%{ -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) }

    50%{ -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) }

    75%{ -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) }

    100%{ -webkit-transform: rotate(-360deg) }

    }

    @keyframes cubemove {

    25%{

    transform: translateX(42px) rotate(-90deg) scale(0.5);

    -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);

    }50%{

    transform: translateX(42px) translateY(42px) rotate(-179deg);

    -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);

    }50.1%{

    transform: translateX(42px) translateY(42px) rotate(-180deg);

    -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);

    }75%{

    transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);

    -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);

    }100%{

    transform: rotate(-360deg);

    -webkit-transform: rotate(-360deg);

    }

    }

    效果3css

    .spinner {

    width:40px;

    height:40px;

    margin:100pxauto;

    background-color:#333;

    border-radius:100%;

    -webkit-animation: scaleout1.0s infinite ease-in-out;

    animation: scaleout1.0s infinite ease-in-out;

    }

    @-webkit-keyframes scaleout {

    0%{ -webkit-transform: scale(0.0) }

    100%{

    -webkit-transform: scale(1.0);

    opacity:0;

    }

    }

    @keyframes scaleout {

    0%{

    transform: scale(0.0);

    -webkit-transform: scale(0.0);

    }100%{

    transform: scale(1.0);

    -webkit-transform: scale(1.0);

    opacity:0;

    }

    }

    相关文章

      网友评论

        本文标题:使用 CSS3 实现超炫的div模块动画效果

        本文链接:https://www.haomeiwen.com/subject/omzvdttx.html