Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/73.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html 如何设置从顶部俯冲并旋转的动画?_Html_Css - Fatal编程技术网

Html 如何设置从顶部俯冲并旋转的动画?

Html 如何设置从顶部俯冲并旋转的动画?,html,css,Html,Css,大家好,我正在尝试制作一个像手机一样的动画,当它到达底部时,它会从顶部掉落,旋转和倾斜,使它看起来像是3d形状,但当它达到100%的关键帧时,我制作的动画似乎一直在闪烁,有人能给我演示一个技巧、提示或示例,我如何实现这一点吗?谢谢,这是我的代码,希望对你有所帮助 .电话{ 宽度:600px; 高度:1080px; 背景色:黑色; 边界半径:9%; 利润率:50%自动; 位置:相对位置; 动画:向前弹跳2秒,轻松进出; } @关键帧反弹{ 0%{transform:translateY(-50

大家好,我正在尝试制作一个像手机一样的动画,当它到达底部时,它会从顶部掉落,旋转和倾斜,使它看起来像是3d形状,但当它达到100%的关键帧时,我制作的动画似乎一直在闪烁,有人能给我演示一个技巧、提示或示例,我如何实现这一点吗?谢谢,这是我的代码,希望对你有所帮助


.电话{
宽度:600px;
高度:1080px;
背景色:黑色;
边界半径:9%;
利润率:50%自动;
位置:相对位置;
动画:向前弹跳2秒,轻松进出;
}
@关键帧反弹{
0%{transform:translateY(-500px);}
50%{transform:translateY(0);}
70%{transform:translateY(-200px);}
100%{
变换:translateY(-50px)旋转(30度)倾斜(5度,347度);;
}
}
.内线电话{
宽度:553px;
高度:1039px;
背景色:#f5f7fa;
位置:绝对位置;
左:9px;
顶部:14px;
边界半径:9%;
溢出:隐藏;
}
.内部电话:之前{
内容:“;
宽度:200px;
高度:10px;
背景色:黑色;
位置:绝对位置;
底部:50px;
左:0;
右:0;
保证金:自动;
边界半径:50px;
z指数:1;
}       
.内滑块{
宽度:330px;
高度:170px;
位置:相对位置;
左边距:201px;
边缘顶部:30px;
透视图:1400px;
变换样式:保留-3d;
z指数:10;
}
.圆圈{
位置:绝对位置;
宽度:150px;
文本对齐:居中;
高度:150像素;
左:0;
排名:0;
颜色:白色;
字体大小:粗体;
边界半径:50%;
光标:指针;
转换:转换400ms轻松;
背景色:红色;
盒影:013px26pxRGBA(0,0,0,0.3),012px6pxRGBA(0,0,0,0.2);
转换:translate3d(0%,0,0px);
过渡:0.5s缓进缓出;
}
.圆形标签{
线高:10px;
}
.图标{
显示器:flex;
对齐项目:居中;
证明内容:中心;
边缘顶端:44px;
字体大小:30px;
}
.一{
背景:番茄;
转换:translate3d(0%,0,0px);
}
.二{
背景:黄绿色;
转换:translate3d(73%,0,-450px);
}
.三{
背景:道奇蓝;
转换:translate3d(148%,0,-1045px);
}
.4{
背景:石板蓝;
转换:translate3d(-239%,0,-1045px);
}
.5{
背景:紫罗兰色;
转换:translate3d(-110%,0,-450px);
}
.内屏幕{
宽度:100%;
身高:100%;
}
.聊天屏幕{
宽度:100%;
身高:100%;
位置:绝对位置;
排名:0;
}
.容器聊天{
宽度:100%;
身高:100%;
位置:绝对位置;
显示器:flex;
过渡:所有0.5s的轻松过渡;
}
.聊天项目{
最小宽度:100%;
}
.ci1{
背景色:番茄;
}
.ci2{
背景颜色:黄绿色;
}
.ci3{
背景色:淡蓝色;
}
.ci4{
背景色:石板蓝;
}
.ci5{
背景色:紫罗兰色;
}
#包装纸{
宽度:100%;
利润率:200px自动;
}
身体{
字体系列:Arial;
背景:#fff;
}
.聊天室{
边际:0px;
填充:0px;
列表样式:无;
}
.留言时间到了{
显示:块;
字体大小:12px;
文本对齐:左对齐;
左侧填充:30px;
垫面:4px;
颜色:#ccc;
字体系列:信使;
}
.留言对。留言时间{
显示:块;
字体大小:12px;
文本对齐:右对齐;
右边填充:20px;
垫面:4px;
颜色:#ccc;
字体系列:信使;
}
.留言{
文本对齐:左对齐;
边缘底部:16px;
}
.留言左.留言文字{
最大宽度:80%;
显示:内联块;
背景:#fff;
填充:15px;
字体大小:14px;
颜色:#999;
边界半径:30px;
字号:100;
线高:1.5em;
}
.留言权{
文本对齐:右对齐;
边缘底部:16px;
}
.message右。消息文本{
线高:1.5em;
显示:内联块;
背景:#5ca6fa;
填充:15px;
字体大小:14px;
颜色:#fff;
边界半径:30px;
线高:1.5em;
字号:100;
文本对齐:左对齐;
}
.聊天{
填充:20px;
}
.聊天室容器{
高度:400px;
溢出:滚动;
溢出y:隐藏;
溢出x:隐藏;
右边填充:16px;
}
.我说得对{
显示:内联块;
填充:15px 20px;
字体大小:14px;
边界半径:30px;
线高:1.25em;
字号:100;