1 从上而下出现:
animation:dafuzi_anim_puffIn 2s 3s both 1; 延时三秒执行两秒
@keyframes dafuzi_anim_puffIn
{
0% {
opacity: 0;
transform: translateY(100%);
}
100% {
opacity: 1;
transform: translateY(0);
}
从上而下消失:
@keyframes dafuzi_anim_sahngssheng
{
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(-100%);
}
}
2 从下而上出现:
@keyframes dafuzi_anim_puffIn
{
0% {
opacity: 0;
transform: translateY(-100%);
}
100% {
opacity: 1;
transform: translateY(0);
}
// 从上而下出现 一开始 transform:translateY(-100%);
@keyframes fadeInY0
{
0%{opacity: 0;}
100%{opacity: 1;transform:translateY(0%);}
}
3随机从上而下飞花朵
@keyframes fallDown1
{
0%{top:0%;left:10%;}
10%{top:10%;left:10%;}
20%{top:20%;left:20%;}
30%{top:30%; left:30%;}
40%{top:40%;left:40%;}
50%{top:50%;left:50%;}
60%{top:60%;left:60%;}
70%{top:70%;left:70%;}
80%{top:80%;left:80%;}
90%{top:90%;left:90%;}
100%{top:100%;left:100%;}
}
@keyframes fallDown2
{
0%{top: 0%;left:10%;}
10%{top: 10%;left:10%;}
20%{top: 20%;left:20%;}
30%{top: 30%;left:30%;}
40%{top: 40%; left:40%;}
50%{top:50%;left:50%;}
60%{top:60%;left:40%;}
70%{top:70%;left:30%;}
80%{top:80%;left:20%;}
90%{top:90%;left:10%;}
100%{top:100%;left:0%;}
}
@keyframes fallDown3
{
0%{top: 0%;left:40%;}
10%{top: 10%;left:50%;}
20%{top: 20%;left:60%;}
30%{top:30%;left:70%;}
40%{top:40%;left:80%;}
50%{top: 50%;left:90%;}
60%{top:60%;left:80%;}
70% {top:70%;left:70%;}
80%{top: 80%;left:60%;}
90%{top:90%;left:50%;}
100%{top:100%;left:40%;}
}
@keyframes fallDown4
{
0% {top:0%;left:80%;}
10%{top:10%;left:70%;}
20%{top:20%;left:60%;}
30%{top:30%;left:50%;}
40%{top:40%;left:40%;}
50%{top:50%;left:30%;}
60%{top:60%;left:20%;}
70%{top:70%;left:10%;}
80%{top:80%;left:0%;}
90%{top: 90%;left:10%;}
100%{top:100%;left:20%;}
}
@keyframes fallDown5
{
0% {top:0%;left:30%;}
10%{top:10%;left:40%;}
20%{top:20%;left:50%;}
30%{top:30%;left:60%;}
40%{top:40%;left:70%;}
50%{top:50%;left:80%;}
60%{top:60%;left:90%;}
70%{top:70%;left:80%;}
80%{top:80%;left:70%;}
90%{top: 90%;left:60%;}
100%{top:100%;left:50%;}
}
@keyframes fallDown6
{
0% {top:0%;left:10%;}
10%{top:10%;left:20%;}
20%{top:20%;left:30%;}
30%{top:30%;left:40%;}
40%{top:40%;left:50%;}
50%{top:50%;left:60%;}
60%{top:60%;left:70%;}
70%{top:70%;left:80%;}
80%{top:80%;left:80%;}
90%{top: 90%;left:90%;}
100%{top:100%;left:80%;}
}
@keyframes fallDown7
{
0% {top:0%;left:90%;}
10%{top:10%;left:90%;}
20%{top:20%;left:80%;}
30%{top:30%;left:80%;}
40%{top:40%;left:70%;}
50%{top:50%;left:70%;}
60%{top:60%;left:60%;}
70%{top:70%;left:60%;}
80%{top:80%;left:50%;}
90%{top: 90%;left:50%;}
100%{top:100%;left:40%;}
}
@keyframes fallDown8
{
0% {top:0%;left:10%;}
10%{top:10%;left:10%;}
20%{top:20%;left:20%;}
30%{top:30%;left:20%;}
40%{top:40%;left:30%;}
50%{top:50%;left:30%;}
60%{top:60%;left:40%;}
70%{top:70%;left:40%;}
80%{top:80%;left:50%;}
90%{top: 90%;left:50%;}
100%{top:100%;left:60%;}
}
4 音乐播放器转圈
@keyframes musicPlay
{
0%{-webkit-transform:rotate(0deg);}
10%{-webkit-transform:rotate(36deg);}
20%{-webkit-transform:rotate(72deg);}
30%{-webkit-transform:rotate(108deg);}
40%{-webkit-transform:rotate(144deg);}
50%{-webkit-transform:rotate(180deg);}
60%{-webkit-transform:rotate(216deg);}
70%{-webkit-transform:rotate(252deg);}
80%{-webkit-transform:rotate(288deg);}
90%{-webkit-transform:rotate(324deg);}
100%{-webkit-transform:rotate(360deg);}
}
5 垂直旋转
@keyframes renwu_roateY360
{
// 0%{transform:scale(0.5) rotateZ(0deg) translateY(100%);}
100%{transform: rotate3d(1,1,1,360deg); /* 绕X轴顺时针旋转45度 */}
}
6 灯笼左右摇摆
animation:denglongLeftRightDong 1.5s linear 0.8s both infinite;transform-origin: 50% 0%;
@keyframes denglongLeftRightDong
{
0%, 100%{
-webkit-transform: rotate(-10deg);
}
50%{
-webkit-transform: rotate(10deg);
}
}
灯笼放大缩小
@keyframes denglongLeftRightDong
{
0%, 100%{
-webkit-transform: scale(1);
}
50%{
-webkit-transform: scale(1.5);
}
}
7 图片放大或者缩小消失(放大给人出屏幕的感觉 缩小给人进入屏幕的感觉)
position: absolute;width:100vw;height:100vh;left: 0%;top:0%;animation: puffOut 2.5s ease 3.0s both 1;
@keyframes puffOut
{
0%{opacity: 1;scale:1}
100%{opacity: 0;scale:2}
}
Three.js的几何形状
2024-02-01 10:50:06 34 阅读