How to make the mainframe price list with beautiful drawing effect by CSS3
This article mainly introduces CSS3 how to make a beautiful painting effect of the host price list, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor with you to understand.
The code is as follows:
Entry-level VPS
¥149 / month
Small business, personal first choice
Dual core Xeon processor
1G DDR3 ECC > span > High Speed error Correction memory
10g + 20g > span > high-speed enterprise hard disk
1m > span > Direct Connect bandwidth
1 > span > independent public network IP
Click to buy
.... Multiple duplicate li
CSS
We use CSS to arrange several li into a line, use CSS3 to achieve shadow, fillet and mouse slide animation effects, the following is a copy of part of the css code. You can download the source package to see the complete code, of course, you can also use css3 to construct a responsive layout.
Copy the code
The code is as follows:
# plans,#plans ul,#plans ul li {
Margin: 0
Padding: 0
List-style: none
}
# pricePlans:after {
Content:''
Display: table
Clear: both
}
# pricePlans {
Zoom: 1
}
# pricePlans {
Max-width: 69em
Margin: 2em auto
}
# pricePlans # plans .plan {
Background: # fff
Float: left
Text-align: center
Border-radius: 5px
Border:1px solid # d3d3d3
-webkit-box-shadow: 0 1px 3px rgba (0pc0re0pc0pl 0.1)
Box-shadow: 0 1px 3px rgba (0pc0pl 0pl 0.1)
Width: 23%
Margin: 0 1.33% 20px 0
-webkit-transition: all .25s
-moz-transition: all .25s
-ms-transition: all .25s
-o-transition: all .25s
Transition: all .25s
}
# pricePlans # plans .plan: hover {
-webkit-transform: scale
-moz-transform: scale
-ms-transform: scale
-o-transform: scale
Transform: scale (1.04)
}
.planContainer .title h3 {
Font-size: 2.125em
Font-weight: 300
Color: # 3e4f6a
Margin: 0
Padding: .6em 0
}
.planContainer .title h3.bestPlanTitle {
Background: # 3e4f6a
Background:-webkit-linear-gradient (top, # 475975, # 364761)
Background:-moz-linear-gradient (top, # 475975, # 364761)
Background:-o-linear-gradient (top, # 475975, # 364761)
Background:-ms-linear-gradient (top, # 475975, # 364761)
Background: linear-gradient (top, # 475975, # 364761)
Color: # fff
Border-radius: 5px 5px 0 0
}
.planContainer .price p {
Background: # 3e4f6a
Background:-webkit-linear-gradient (top, # 475975, # 364761)
Background:-moz-linear-gradient (top, # 475975, # 364761)
Background:-o-linear-gradient (top, # 475975, # 364761)
Background:-ms-linear-gradient (top, # 475975, # 364761)
Background: linear-gradient (top, # 475975, # 364761)
Color: # fff
Font-size: 1.2em
Font-weight: 700
Height: 2.6em
Line-height: 2.6em
Margin: 0 0 1em
}
.planContainer .price p.bestPlanPrice {
Background: # f7814d
}
.planContainer .price p span {
Color: # 8394ae
}
Thank you for reading this article carefully. I hope the article "how to make a beautiful mainframe price list with CSS3" shared by the editor will be helpful to everyone. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!
