文章正文

几个CCS动画特效整理保存

加入时间：2020/5/13 17:50:51

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>transform</title>

</head>

<style>

    body{margin: 0;padding: 0;}

@keyframes widthMove {0% {width:0;}

100% {width:100%;}

}

@-webkit-keyframes widthMove /*Safari and Chrome*/ {0% {width:0;}

100% {width:100%;}

}

@keyframes leftMove {0% {left:0;}

50% {left:-20px;}

100% {left:0;}

}

@-webkit-keyframes leftMove /*Safari and Chrome*/ {0% {left:0;}

50% {left:-20px;}

100% {left:0;}

}

@keyframes rightMove {0% {right:0;}

50% {right:-20px;}

100% {right:0;}

}

@-webkit-keyframes rightMove /*Safari and Chrome*/ {0% {right:0;}

50% {right:-20px;}

100% {right:0;}

}

@keyframes goBackMove {0% {left:0;}

50% {left:90%;}

100% {left:0;}

}

@-webkit-keyframes goBackMove /*Safari and Chrome*/ {0% {left:0;}

50% {left:90%;}

100% {left:0;}

}

@keyframes rotateMove {from {transform:rotate(0deg);-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);-ms-transform:rotate(0deg);}

to {transform:rotate(360deg);-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);}

}

@-webkit-keyframes rotateMove /*Safari and Chrome*/ {from {transform:rotate(0deg);-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);-ms-transform:rotate(0deg);}

to {transform:rotate(360deg);-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);}

}

@keyframes rotateMoveBack {from {transform:rotate(0deg);-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);-ms-transform:rotate(0deg);}

to {transform:rotate(-360deg);-webkit-transform:rotate(-360deg);-moz-transform:rotate(-360deg);-o-transform:rotate(-360deg);-ms-transform:rotate(-360deg);}

}

@-webkit-keyframes rotateMoveBack /*Safari and Chrome*/ {from {transform:rotate(0deg);-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);-ms-transform:rotate(0deg);}

to {transform:rotate(-360deg);-webkit-transform:rotate(-360deg);-moz-transform:rotate(-360deg);-o-transform:rotate(-360deg);-ms-transform:rotate(-360deg);}

}

@-webkit-keyframes fadeInMove {0% {opacity:0;}

75% {opacity:0;}

100% {opacity:1;}

}

@keyframes fadeInMove {0% {opacity:0;}

75% {opacity:0;}

100% {opacity:1;}

}

@-webkit-keyframes fadeInDownMove {0% {opacity:0;}

75% {opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);}

100% {opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}

}

@keyframes fadeInDownMove {0% {opacity:0;}

75% {opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);}

100% {opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}

}

@-webkit-keyframes fadeInUpMove {0% {opacity:0;}

75% {opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);}

100% {opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}

}

@keyframes fadeInUpMove {0% {opacity:0;}

75% {opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);}

100% {opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}

}

@keyframes lightMove {from {margin-left:-50%;}

to {margin-left:100%;}

}

@-webkit-keyframes lightMove {from {margin-left:-50%;}

to {margin-left:100%;}

}

@keyframes upAnimation{0%{transform:rotate(0deg);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}10%{transform:rotate(-12deg);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}20%{transform:rotate(12deg);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}28%{transform:rotate(-10deg);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}36%{transform:rotate(10deg);transition-timing-function:cubic-bezier(0.755,.5,.855,.06)}42%{transform:rotate(-8deg);transition-timing-function:cubic-bezier(0.755,.5,.855,.06)}48%{transform:rotate(8deg);transition-timing-function:cubic-bezier(0.755,.5,.855,.06)}52%{transform:rotate(-4deg);transition-timing-function:cubic-bezier(0.755,.5,.855,.06)}56%{transform:rotate(4deg);transition-timing-function:cubic-bezier(0.755,.5,.855,.06)}60%{transform:rotate(0deg);transition-timing-function:cubic-bezier(0.755,.5,.855,.06)}100%{transform:rotate(0deg);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}}

 

@keyframes bubble-up {

        100% {

            box-shadow: 10em -11em 0 .01em, 20em -17em 0 .01em, 30em -20em 0 .01em, 40em -30em 0 .01em, 12em -12em 0 .01em, 17em -5em 0 .01em, 25em -16em 0 .01em, 37em -22em 0 .01em, -10em -32em 0 .01em, -20em -12em 0 .01em, -30em -11em 0 .01em, -40em -13em 0 .01em, -12em -15em 0 .01em, -17em -9em 0 .01em, -25em -14em 0 .01em, -37em -21em 0 .01em, 10em -17em 0 .01em, 20em -21em 0 .01em, 30em -11em 0 .01em, 40em -19em 0 .01em, 17em -23em 0 .01em, 17em -10em 0 .01em, 25em -14.5em 0 .01em, 37em -12.9em 0 .01em, -11em -21.3em 0 .01em, -20em -22.4em 0 .01em, -30em -15.3em 0 .01em, -40em -19.2em 0 .01em, -15em -21.3em 0 .01em, -17em -22.4em 0 .01em, -25em -10.3em 0 .01em, -37em -9.3em 0 .01em, -11em -22.4em 0 .01em, 10.6em -20.4em 0 .01em, 12.5em -6.9em 0 .01em, 13.6em -8.3em 0 .01em, -5em -21.4em 0 .01em, -6em -13em 0 .01em, -7.4em -15em 0 .01em, -9.2em -22em 0 .01em, 5em -30em 0 .01em, 6em -24em 0 .01em, 7.4em -11em 0 .01em, 9.2em -9.4em 0 .01em, 1em -22em 0 .01em, 2em -14em 0 .01em, 4em -21em 0 .01em, 3.2em -16em 0 .01em, -1em -21em 0 .01em, -2em -19em 0 .01em, -4em -17em 0 .01em, -3.2em -15em 0 .01em;

            bottom: 200px;

            opacity: 0;

        }

    }

.box{width:200px;border:1px #ccc dotted;border-radius: 50%;height:200px;position: relative;animation: rotateMove 2s infinite linear;}

.box:after{content: '';display: block;width:10px;height:10px;background: #c00;border-radius: 50%;position: absolute;left:50%;top:-5px;}

.lineshowbox{width: 197px;height:235px;}

.lineshowl{background: url(qie.png) left no-repeat;width: 197px;height:235px;animation: widthMove 2s  linear;overflow: hidden;}

.lineshowr{background: url(qie.png) right no-repeat;width: 197px;height:235px;animation: widthMove 2s  linear;overflow: hidden;}

.showup{background: url(qie.png) center no-repeat;width: 197px;height:235px;animation: upAnimation 2s infinite linear;overflow: hidden;margin:50px}

.left{float: left;}

.right{float: right;}

.bubble {

    position: absolute;

    bottom: 2px;

    left: 50%;

    width: 10px;

    height: 10px;

    background: #1e2438;

    color: #1e2438;

    box-shadow: 10em 0 0 0.01em, 20em 0 0 0.01em, 30em 0 0 0.01em, 40em 0 0 0.01em, 12em 0 0 0.01em, 17em 0 0 0.01em, 25em 0 0 0.01em, 37em 0 0 0.01em, -10em 0 0 0.01em, -20em 0 0 0.01em, -30em 0 0 0.01em, -40em 0 0 0.01em, -12em 0 0 0.01em, -17em 0 0 0.01em, -25em 0 0 0.01em, -37em 0 0 0.01em, 10em -0.1em 0 0.01em, 20em -0.2em 0 0.01em, 30em -0.3em 0 0.01em, 40em -0.1em 0 0.01em, 17em -0.3em 0 0.01em, 17em -0.2em 0 0.01em, 25em -0.1em 0 0.01em, 37em -0.2em 0 0.01em, -11em -0.5em 0 0.01em, -20em -0.3em 0 0.01em, -30em -0.2em 0 0.01em, -40em -0.1em 0 0.01em, -15em -0.2em 0 0.01em, -17em -0.3em 0 0.01em, -25em -0.4em 0 0.01em, -37em -0.2em 0 0.01em, -11em 0 0 0.01em, 10.6em 0 0 0.01em, 12.5em 0 0 0.01em, 13.6em 0 0 0.01em, -5em 0 0 0.01em, -6em 0 0 0.01em, -7.4em 0 0 0.01em, -9.2em 0 0 0.01em, 5em 0 0 0.01em, 6em 0 0 0.01em, 7.4em 0 0 0.01em, 9.2em 0 0 0.01em, 1em 0 0 0.01em, 2em 0.1em 0 0.01em, 4em 0.2em 0 0.01em, 3.2em 0.5em 0 0.01em, -1em 0.5em 0 0.01em, -2em 0.3em 0 0.01em, -4em 0.1em 0 0.01em, -3.2em 0.2em 0 0.01em;

    border-radius: 50%;

}

.footer{height:500px;background: #000;position: relative;clear: both;}

.footer:hover .bubble{  animation: 2s bubble-up infinite}

</style>

<body>

    <div class="box"></div>

    

    <div class="showup"></div>

    <div class="left lineshowbox">

        <div class="lineshowl left"></div>

    </div>    

    <div class="right lineshowbox">

        <div class="lineshowr right"></div>

    </div>    

 

    <div class="footer">

        <div class="bubble"></div>

    </div>

</body>

</html>

字体大小[ 大 中 小 ]

版权所有：有信心——uxinxin 我的个人网站欢迎常来！手机版（新站开启，请多多关照） 豫ICP备12017930号-1
 豫公网安备 41910102000493号