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)
}
}
复制代码
想要图片资源可以找我!
来源:oschina
链接:https://my.oschina.net/u/4410101/blog/4275868