- CSS3动画,在IOS出现了跳帧和溢出的问题?
在写CSS3动画时,放在IOS苹果机子上,会出现图层溢出和跳帧现象。代码链接:https://developers.weixin.qq.com/s/Qplg8kmt7dcZ[图片] [代码]body{[代码][代码] [代码][代码]/*position: flex;*/[代码][代码] [代码][代码]width[代码][代码]: [代码][代码]100%[代码][代码];[代码][代码]height[代码][代码]: [代码][代码]100%[代码][代码];[代码][代码] [代码][代码]/*overflow: hidden;*/[代码][代码]}[代码][代码].ktdm-apply-takename{[代码][代码] [代码][代码]width[代码][代码]: [代码][代码]100%[代码][代码];[代码][代码]height[代码][代码]: [代码][代码]1150[代码][代码]rpx;[代码][代码] [代码][代码]background-color[代码][代码]: [代码][代码]#F0F0F0[代码][代码];[代码][代码] [代码][代码]z-index[代码][代码]: [代码][代码]1[代码][代码];[代码][代码]}[代码][代码]/*制作出球形div*/[代码][代码].ktdm-apply-takename-time{[代码][代码] [代码][代码]width[代码][代码]: [代码][代码]474[代码][代码]rpx;[代码][代码]height[代码][代码]: [代码][代码]474[代码][代码]rpx;[代码][代码] [代码][代码]margin[代码][代码]: [代码][代码]0[代码] [代码]auto[代码][代码];[代码][代码] [代码][代码]position[代码][代码]:[代码][代码]relative[代码][代码];[代码][代码] [代码][代码]border-radius: [代码][代码]50%[代码][代码];[代码][代码] [代码][代码]top[代码][代码]: [代码][代码]80[代码][代码]rpx;[代码][代码] [代码][代码]overflow[代码][代码]: [代码][代码]hidden[代码][代码];[代码][代码] [代码][代码]text-align[代码][代码]: [代码][代码]center[代码][代码];[代码][代码]}[代码][代码]/*水球图片*/[代码][代码].apply-time-image{[代码][代码] [代码][代码]width[代码][代码]: [代码][代码]495[代码][代码]rpx;[代码][代码]height[代码][代码]: [代码][代码]495[代码][代码]rpx;[代码][代码]}[代码][代码].ktdm-apply-takename-blq{[代码][代码] [代码][代码]width[代码][代码]: [代码][代码]500[代码][代码]rpx;[代码][代码]height[代码][代码]: [代码][代码]500[代码][代码]rpx;[代码][代码] [代码][代码]position[代码][代码]: [代码][代码]relative[代码][代码];[代码][代码] [代码][代码]left[代码][代码]: [代码][代码]-14[代码][代码]rpx;[代码][代码] [代码][代码]text-align[代码][代码]: [代码][代码]center[代码][代码];[代码][代码]}[代码][代码].apply-time-water{[代码][代码] [代码][代码]width[代码][代码]: [代码][代码]500[代码][代码]rpx;[代码][代码]height[代码][代码]: [代码][代码]500[代码][代码]rpx;[代码][代码] [代码][代码]border-radius: [代码][代码]50%[代码][代码];[代码][代码] [代码][代码]position[代码][代码]:[代码][代码]relative[代码][代码];[代码][代码] [代码][代码]top[代码][代码]: [代码][代码]-250[代码][代码]rpx;[代码][代码] [代码][代码]/*background-color: red;*/[代码][代码]}[代码][代码].apply-time-water-png{[代码][代码] [代码][代码]width[代码][代码]: [代码][代码]2100[代码][代码]rpx;[代码][代码]height[代码][代码]: [代码][代码]300[代码][代码]rpx;[代码][代码] [代码][代码]position[代码][代码]: [代码][代码]absolute[代码][代码];[代码][代码] [代码][代码]top[代码][代码]: [代码][代码]-30[代码][代码]rpx;[代码][代码] [代码][代码]right[代码][代码]: [代码][代码]0[代码][代码];[代码][代码] [代码][代码]animation: apply-time-water-png [代码][代码]6.2[代码][代码]s linear infinite;[代码][代码]}[代码][代码]@keyframes apply-time-water-png{[代码][代码] [代码][代码]from {transform: translateX([代码][代码]-15[代码][代码]rpx);}[代码][代码] [代码][代码]to {transform: translatex([代码][代码]925[代码][代码]rpx);}[代码][代码]}[代码][图片]
2019-10-23 - CSS3动画在IOS系统不行?
[代码]@keyframes rotlogo{[代码][代码] [代码][代码]0%[代码][代码]{[代码][代码] [代码][代码]rotate: [代码][代码]0[代码][代码]deg;[代码][代码] [代码][代码]}[代码][代码] [代码][代码]100%[代码][代码]{[代码][代码] [代码][代码]rotate: [代码][代码]360[代码][代码]deg;[代码][代码] [代码][代码]}[代码][代码]}[代码][代码].logo image{[代码][代码] [代码][代码]width[代码][代码]: [代码][代码]180[代码][代码]rpx;[代码][代码]height[代码][代码]: [代码][代码]180[代码][代码]rpx;[代码][代码] [代码][代码]border-radius:[代码][代码]50%[代码][代码]; [代码][代码]}[代码][代码].keyinput{[代码][代码] [代码][代码]width[代码][代码]: [代码][代码]100%[代码][代码];[代码][代码] [代码][代码]height[代码][代码]: [代码][代码]100%[代码][代码];[代码][代码] [代码][代码]flex: [代码][代码]1[代码][代码];[代码][代码] [代码][代码]display[代码][代码]: flex;[代码][代码] [代码][代码]flex-[代码][代码]direction[代码][代码]: column;[代码][代码] [代码][代码]position[代码][代码]: [代码][代码]relative[代码][代码];[代码][代码] [代码][代码]align-items: stretch;[代码][代码] [代码][代码]animation: keyinput-rise [代码][代码]2[代码][代码]s cubic-bezier([代码][代码]0.23[代码][代码],[代码][代码]1[代码][代码],[代码][代码]0.32[代码][代码],[代码][代码]1[代码][代码]) .[代码][代码]75[代码][代码]s forwards;[代码][代码] [代码][代码]opacity: [代码][代码]0[代码][代码];[代码][代码]}[代码][代码]@keyframes keyinput-rise{[代码][代码] [代码][代码]from {opacity: [代码][代码]0[代码][代码]; transform: translate[代码][代码]3[代码][代码]d([代码][代码]0[代码][代码],[代码][代码]60[代码][代码]rpx,[代码][代码]0[代码][代码]); }[代码][代码] [代码][代码]to {opacity: [代码][代码]1[代码][代码]; transform: translate[代码][代码]3[代码][代码]d([代码][代码]0[代码][代码],[代码][代码]0[代码][代码],[代码][代码]0[代码][代码]); }[代码][图片]CSS3动画,电脑模拟器,安卓正常。就是IOS,动画显示不出效果。。。
2019-09-01