css3像卷轴一样展开

问题描述

问 题

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

解决方案

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

<div class="map"></div>

.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;｝
}

Demo:http://runjs.cn/code/u7rh5ocy

这篇关于css3像卷轴一样展开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！