Shulou(Shulou.com)06/01 Report--

Editor to share with you how to use pure CSS to achieve iPhone price information map, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Code interpretation

Define dom. The container contains 3 elements. H2 is the chart title, .back represents the background wall, .side represents the side wall, and both .back and .side contain an unordered list, the background wall display price, and the side wall display name:

IPhonePriceComparison

$1099 million 1449

$999 yuan 1349

$749 yuan 899

$999 million 1149

IPhoneXSMax

IPhoneXS

IPhoneXR

IPhoneX

Centered display:

Body {

Margin:0

Height:100vh

Display:flex

Align-items:center

Justify-content:center

Background:linear-gradient (lightblue,skyblue)

}

Define the container size:

.wall {

Width:60em

Height:40em

Border:1emsolidrgba (255pr. 255pr. 05)

Border-radius:2em

Font-size:10px

}

Using the grid layout, divide the container into 2 parts, with 80% background walls on the left and 20% side walls on the right:

.wall {

Display:grid

Grid-template-columns:04fr1fr

}

Set the background color of the background wall and the side wall respectively:

.back {

Background:linear-gradient (

Toright

# 555

# ddd

);

}

.side {

Background:

Radial-gradient (

At0%50%

/ * tomato25%

Yellow90%*/

Rgba (0, 0, 0, 0. 2) 25%

Rgba (0, 0) 90%

),

Linear-gradient (

Toright

# ddd

# ccc

)

}

Use the flex layout settings to align the list vertically:

.back

.side {

Display:flex

Align-items:center

}

.back {

Justify-content:flex-end

}

Ul {

List-style-type:none

Padding:0

}

Set the title style:

H2 {

Position:relative

Width:20em

Margin:1em

Color:white

Font-family:sans-serif

}

Set the height and color of the list item:

.backul {

Width:75%

}

.sideul {

Width:100%

}

Ulli {

Height:5em

Background-color:var (--c)

}

Ulli:nth-child (1) {

-- c:tomato

}

Ulli:nth-child (2) {

-- c:coral

}

Ulli:nth-child (3) {

-- c:lightsalmon

}

Ulli:nth-child (4) {

-- c:deepskyblue

}

At this point, the overall layout is complete. Next, set the bar style for the left background wall.

The width of the bar is proportional to the upper limit price of the commodity-high-price, with the most expensive price-max-price as the full length, and the width of other stripes as the percentage of the maximum price:

Ul {

Display:flex

Flex-direction:column

}

.backul {

Align-items:flex-end

}

Ul {

-- max-price:1449

}

Ulli.xs-max {

-- high-price:1449

}

Ulli.xs {

-- high-price:1349

}

Ulli.xr {

-- high-price:899

}

Ulli.x {

-- high-price:1149

}

.backulli {

Width:calc (var (--high-price) / var (--max-price) * 100%)

}

Distinguish the location of the price-low-price in the bar and fill it with a darker color than the area where the price is higher:

Ulli.xs-max {

-- low-price:1099

-- c2:orangered

}

Ulli.xs {

-- low-price:999

-- c2:tomato

}

Ulli.xr {

-- low-price:749

-- c2:coral

}

Ulli.x {

-- low-price:999

-- c2:dodgerblue

}

.backulli {

-- percent:calc (var (--low-price) / var (--high-price) * 100%)

Background:linear-gradient (

Toleft

Var (--c) var (--percent)

Var (--c2) var (--percent)

);

}

Draw a triangle to the left at the top of the horizontal line:

.backulli {

Position:relative

}

.backulli:: before {

Content:''

Position:absolute

Width:0

Height:0

Transform:translateX (- 3em)

Border-right:3emsolidvar (--c2)

Border-top:2.5emsolidtransparent

Border-bottom:2.5emsolidtransparent

}

Set the price text style:

.backullispan {

Position:absolute

Width:95%

Text-align:right

Color:white

Font-size:1.25em

Line-height:4em

Font-family:sans-serif

}

Add shadows to each bar to enhance the three-dimensional feeling:

Ulli.xs-max {

Z-index:5

}

Ulli.xs {

Z-index:4

}

Ulli.xr {

Z-index:3

}

Ulli.x {

Z-index:2

}

.backulli {

Filter:drop-shadow (01em1emrgba (0re0j0p0pl 0.3))

}

At this point, the horizontal bar of the background wall is complete. Next, style the side wall.

To create a stereoscopic effect, you need to set the depth of field of the side wall and tilt the list:

.side {

Perspective:1000px

}

.sideul {

Transform-origin:left

Transform:rotateY (- 75deg) scaleX (4)

}

Set the text style for the side wall:

.wall {

Overflow:hidden

}

.sideulli {

Padding-right:30%

Text-align:right

Color:white

Font-family:sans-serif

Line-height:5em

}

At this point, the static visual effect is complete. Finally, the entrance animation effect is added:

Ulli {

Animation:show1slinearforwards

Transform-origin:right

Transform:scaleX (0)

}

@ keyframesshow {

To {

Transform:scaleX (1)

}

}

.backulli {

Animation-delay:1s

}

The above is "how to use pure CSS to achieve iPhone price information map" all the content of this article, thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.