几个不成熟的动画,求大神赐教了。

半世苍凉 提交于 2020-08-09 21:12:32

emm~ 实在不太会写动画,求大家提提意见。我好优化优化。

摇骰子动画

摇骰子动画

<div class="randoms">
    <div class="random"></div>
</div>
复制代码
.randoms {
    width: 100px;
    height: 97px;
    margin: 0 auto;
    margin-top: 100px;
    position: relative;
    animation: moves 0.8s linear;
    animation-iteration-count: 5;
}
.random {
    width: 100px;
    height: 97px;
    background: url("../../assets/random.png") no-repeat;
    background-size: 100% auto;
    position: relative;
    animation: doRandom 1s steps(9, end);
    animation-iteration-count: 4;
}
@keyframes doRandom {
    0% {
        background-position: center 0px;
    }
    100% {
        background-position: center -876px;
    }
}
@keyframes moves {
    0% {
        transform: rotate(360deg) translate(0px, 0px);
    }
    25% {
        transform: rotate(270deg) translate(-5px, 5px);
    }
    50% {
        transform: rotate(180deg) translate(0px, 10px);
    }
    75% {
        transform: rotate(90deg) translate(5px, 5px);
    }
    100% {
        transform: rotate(0deg) translate(0px, 0px);
    }
}
复制代码

摇摇蛋

摇摇蛋

<div class="page">
    <img class="egg" src="../../assets/egg.jpg">
</div>
复制代码
.egg{
    width: 200px;
    animation-name: shakeEgg;
    transform-origin: center bottom;
    animation-duration: 2s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-delay: .5s
}
@keyframes shakeEgg {
    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)
    }
}
复制代码

扔漂流瓶

扔漂流瓶

<div class="pages">
    <div class="bottle animated rotateIn" >
        <img src="../../assets/imgs/pingzi.png">
    </div>
</div>
复制代码
.pages{
    width: 100%;
    height: 100vh;
    background: #f6f6f6;
    position: relative;
    .bottle{
        width: 100px;
        height: 70px;
        transform: translate(0px, 0px);
        position: absolute;
        right: 0;
        bottom: 0;
        img{
            display: block;
            width: 100%;
            height: 100%;
        }
    }
}
.animated {
    transform: scale(0)!important;
    animation: rotateIn 1.7s linear;
}
@keyframes rotateIn {
    0%{
        transform: translate(0px, 0px) rotate(0) scale(1);
    }
    25%{
        transform: translate(-30px, -100px) rotate(270deg) scale(0.75);
    }
    50%{
        transform: translate(-60px, -200px) rotate(540deg) scale(0.5);
    }
    75%{
        transform: translate(-90px, -300px) rotate(810deg) scale(0.3);
    }
    100%{
         transform: translate(-110px, -280px) rotate(1080deg) scale(0);
    }
}
复制代码

背景浮动

背景浮动

<div class="swiper-slide page">
    <img src="../../assets/imgs/demon1.png" class="dot demon"/>
    <img src="../../assets/imgs/demon2.png" class="dot yellow"/>
    <img src="../../assets/imgs/demon2.png" class="dot yellow"/>
    <img src="../../assets/imgs/demon2.png" class="dot yellow"/>
    <img src="../../assets/imgs/demon2.png" class="dot yellow"/>
    <img src="../../assets/imgs/demon5.png" class="dot demon"/>
    <img src="../../assets/imgs/demon4.png" class="dot demon"/>
    <img src="../../assets/imgs/demon6.png" class="dot demon"/>
    <img src="../../assets/imgs/demon4.png" class="dot demon"/>
    <img src="../../assets/imgs/demon2.png" class="dot yellow"/>
    <img src="../../assets/imgs/demon2.png" class="dot yellow"/>
    <img src="../../assets/imgs/demon3.png" class="dot demon"/>
</div>
复制代码
.page{
    width: 100%;
    height: 100vh;
    background: #000;
}
.page .dot{
    position: absolute;
}
.page .demon{
    width: 1.5rem;
    height: 1.64rem;
    left: 0;
    top: -2rem;
    animation: go 3.5s 1s infinite linear;
}
.page .yellow:nth-of-type(2){
    width: 1.2rem;
    height: 1.2rem;
    left: 5rem;
    top: -1.5rem;
    animation: go 3.6s 2s infinite linear;
}
.page .yellow:nth-of-type(3){
    width: 1rem;
    height: 2rem;
    left: 6rem;
    top: -2rem;
    animation: go 3.7s 1s infinite linear;
}
.page .yellow:nth-of-type(4){
    width: 0.7rem;
    height: 0.7rem;
    left: 7rem;
    top: -2rem;
    animation: go 4.2s 1.3s infinite linear;
}
.page .yellow:nth-of-type(5){
    width: 1.2rem;
    height: 1.2rem;
    left: 2rem;
    top: -3rem;
    animation: go 4s 1.5s infinite linear;
}
.page .demon:nth-of-type(6){
    width: 1.1rem;
    height:1.1rem;
    left: 2.5rem;
    top: -2rem;
    animation: go 5.5s 5s infinite linear;
}
.page .demon:nth-of-type(7){
    width: 0.5rem;
    height: 0.5rem;
    left: 2.5rem;
    top: -2rem;
    animation: go 4s 0.5s infinite linear;
}
.page .demon:nth-of-type(8){
    width: 0.4rem;
    height: 0.4rem;
    left: 5rem;
    top: -1rem;
    animation: go 5s 1.5s infinite linear;
}
.page .demon:nth-of-type(9){
    width: 0.4rem;
    height: 0.4rem;
    left: 1rem;
    top: -2rem;
    animation: go 5.5s 3.5s infinite linear;
}
.page .yellow:nth-of-type(10){
    width: 0.7rem;
    height: 0.7rem;
    left: 6.5rem;
    top: -2rem;
    animation: go 3.2s 1.3s infinite linear;
}
.page .yellow:nth-of-type(11){
    width: 1rem;
    height: 1rem;
    left: 0.5rem;
    top: -2rem;
    animation: go 3.2s 3s infinite linear;
}
.page .demon:nth-of-type(12){
    width: 0.25rem;
    height: 0.25rem;
    left: 5rem;
    top: -2rem;
    animation: go 3.5s 3.5s infinite linear;
}
@keyframes go{
    0%{
        transform: translateX(-1rem) translateY(18rem) rotateY(0)translateZ(-100px);
    }
    25%{
        transform: translateX(0.4rem) translateY(13rem) rotateY(45deg)translateZ(-100px)
    }
    50%{
        transform: translateX(1rem) translateY(9rem) rotateY(0)translateZ(-100px)
    }
    75%{
        transform: translateX(-0.4rem) translateY(4.5rem) rotateY(-45deg)translateZ(-100px)
    }
    100%{
        transform: translateX(-1rem) translateY(-0.5rem) rotateY(0)translateZ(-100px)
    }
}
复制代码

想要图片资源可以找我!

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!