Apply the css clip attribute to: extend the coverage effect.

Online demonstration: we want to demonstrate how to use the CSS3 clip attribute to create a simple and neat extension effect. When you click a box element, a smooth transition is achieved. This idea is to achieve a certain superposition effect, as if it is actually under each element. Click one of the elements to create a cut-off image, and display another layer that is expanded in width. For more information about front-end technologies, please pay attention to how to use geek labels? First, we need to create a project list, which will look like a box filled with different city names: each box will contain an element (covering layer), and the position of the element will be fixed. In fact, this element will fill the whole page, but we will not see it, because the transparency opacity will be set to 0. When we click a box, we will use clip: rect () to trim their internal fixed elements. Then we will dynamically display all the overlapping widths and heights as the entire window: Click the close button to reverse this effect and minimize and disappear the list items. So, let's start with HTML! Tag: We will use an unordered list for these boxes. Each list item has an icon class and an optional "span" class, which controls the width of the box. Some text and overwrite layers will be added. The stacked parts will contain a column layout structure. Because we chose a virtual weather application as the topic, we will display the weather forecast for the next seven days. Each "day" column contains several spans, which are used for daily work, weather icons, and temperatures: <ul id = "rb-grid" class = "rb-grid clearfix"> <li class = "icon-clima-1 rb-span-2">