![CSS如何显示一个从左上角开始展开的弹窗,最终是显示在屏幕中间,思路是什么,请大神指导下。,第1张 CSS如何显示一个从左上角开始展开的弹窗,最终是显示在屏幕中间,思路是什么,请大神指导下。,第1张](/aiimages/CSS%E5%A6%82%E4%BD%95%E6%98%BE%E7%A4%BA%E4%B8%80%E4%B8%AA%E4%BB%8E%E5%B7%A6%E4%B8%8A%E8%A7%92%E5%BC%80%E5%A7%8B%E5%B1%95%E5%BC%80%E7%9A%84%E5%BC%B9%E7%AA%97%EF%BC%8C%E6%9C%80%E7%BB%88%E6%98%AF%E6%98%BE%E7%A4%BA%E5%9C%A8%E5%B1%8F%E5%B9%95%E4%B8%AD%E9%97%B4%EF%BC%8C%E6%80%9D%E8%B7%AF%E6%98%AF%E4%BB%80%E4%B9%88%EF%BC%8C%E8%AF%B7%E5%A4%A7%E7%A5%9E%E6%8C%87%E5%AF%BC%E4%B8%8B%E3%80%82.png)
思路应该是一个从0%到100%的动画展开的效果,大概需要写0%,50%,100%三个样式。
弹窗的css代码大概是:position: fixedz-index: 2000left: 0top: 0这样弹窗的左上角原点在页面最左上角,如果要调整位置要用CSS变换特效(transform)的平移translate函数达到目的: translate(x, y)(长度值或者百分比):在水平方向、垂直方向平移元素。 translateX(value):水平方向平移。 translateY(value):垂直方向平移。 scale(x, y)、scaleX(value)、scaleY(value):在水平方向、垂直方向或者两个方向上缩放元素。 rotate()、rotateX()、rotateY()、rotateZ():rotate支持3D效果,可在x、y、z轴上旋转元素。 skew()、skewX()、skewY():在水平方向、垂直方向或者两个方向倾斜一定的角度。 另外弹窗展开的动画要用到css3的动画属性: animation-delay:设置动画开始前的延迟时间。 animation-direction:设置动画循环播放的时候是否方向播放,包含normal和alternate两个值。 animation-duration:设置动画播放持续的时间。 animation-interacion-count:设置动画的播放次数,可以为具体数据或者无限循环关键字infinite。 animation-name:指定动画名称。 animation-play-state:允许动画暂停和重新播放,包含running、paused。 animation-timing-function:指定如何计算中间动画值,要创建 CSS3 动画,你需要了解 @keyframes 规则。
@keyframes 规则是创建动画。
@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。