css3像卷轴一样展开-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

css3像卷轴一样展开

高洛峰 2016-11-07 14:07:58

[CSS3讨论组]

1546

请问如何让一个元素从中间开始向两边展开？像卷轴一样？

高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。网络人气名人讲师，...

全部回复(1)

三叔2016-11-07 14:08:35 1楼

刚才想了下，最简单的使用position的left和right就能实现

.map{
    height:100px;
    background:url('https://sf-static.b0.upaiyun.com/v-5798d230/global/img/logo-b.svg') center center no-repeat;
    animation:spread 5s linear forwards;
    position:absolute;
    left:50%;
    right:50%;
    text-align:center;
}

@keyframes spread{
    form{}
    to{left:0;right:0;｝
}