<!DOCTYPE html>

<html lang="en" >

<head>

<meta charset="UTF-8">

<title>纯CSS3项目价格表切换代码 - 站长素材</title>

<style>

	@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300);

* {

  padding: 0;

  margin: 0;

  box-sizing: border-box;

}

.frame {

  position: absolute;

  top: 50%;

  left: 50%;

  width: 400px;

  height: 400px;

  margin-top: -200px;

  margin-left: -200px;

  border-radius: 2px;

  box-shadow: 4px 8px 16px 0 rgba(0, 0, 0, 0.1);

  overflow: hidden;

  background: #12c2e9;

  background: linear-gradient(45deg, #f64f59, #c471ed, #12c2e9);

  color: #333;

  font-family: 'Open Sans', Helvetica, sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}

.center {

  position: absolute;

  top: 50%;

  left: 50%;

  -webkit-transform: translate(-50%, -50%);

          transform: translate(-50%, -50%);

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

}

p {

  text-align: center;

  color: #666;

  font-size: 0.7rem;

  margin-bottom: 10px;

}

p.title {

  font-size: 0.8rem;

  font-weight: 700;

  background: #12c2e9;

  color: #f0f0f0;

  padding: 10px 0;

}

p .cost {

  display: block;

  font-weight: 700;

  font-size: 2rem;

}

hr {

  color: #eee;

  border: 0;

  height: 0;

  border-top: 3px solid rgba(0, 0, 0, 0.1);

  border-bottom: 4px solid rgba(255, 255, 255, 0.3);

  width: 60%;

  margin: 2px auto;

}

hr:nth-of-type(2n+2) {

  width: 50%;

}

.pack {

  width: 110px;

  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);

  background: #fff;

  height: 160px;

  display: flex;

  flex-direction: column;

  transition: all 0.5s ease;

}

.pack:hover {

  -webkit-transform: scale(1.1);

          transform: scale(1.1);

}

.pack:hover .title {

  background: #c471ed;

}

.pack.pro {

  margin: 0 10px;

}

.pack.pro:hover ~ .stats .users .progress .value {

  width: 50%;

}

.pack.pro:hover ~ .stats .space .progress .value {

  width: 66%;

}

.pack.pro:hover ~ .stats .projects .progress .value {

  width: 42%;

}

.pack.basic:hover ~ .stats .users .progress .value {

  width: 2%;

}

.pack.basic:hover ~ .stats .space .progress .value {

  width: 5%;

}

.pack.basic:hover ~ .stats .projects .progress .value {

  width: 7%;

}

.pack.premium:hover ~ .stats .users .progress .value {

  width: 100%;

}

.pack.premium:hover ~ .stats .space .progress .value {

  width: 100%;

}

.pack.premium:hover ~ .stats .projects .progress .value {

  width: 100%;

}

.stats {

  width: 350px;

  height: 160px;

  background: rgba(255, 255, 255, 0.4);

  font-size: 0.7rem;

  color: #333;

  margin-top: 20px;

  padding: 10px;

}

.stats > div {

  display: flex;

  flex-direction: column;

}

.stats > div .labels {

  display: flex;

  justify-content: space-between;

}

.stats > div .progress {

  width: 100%;

  height: 10px;

  background: #ddd;

  margin-top: 5px;

  border-radius: 5px;

}

.stats > div .progress .value {

  background: linear-gradient(to right, #00d2ff, #3a7bd5);

  height: 100%;

  border-radius: 5px;

  width: 0;

  transition: all 0.7s ease;

}

.stats .space {

  margin: 20px 0;

}

</style>

</head>

<body>

<div class="frame">

  <div class="center">

				<div class="pack basic">

				<p class="title">Basic</p>

				<p><span class="cost">$5</span> per month</p>

				<div class="hr">

				<hr><hr><hr><hr>

				</div>

			</div>

			<div class="pack pro">

				<p class="title">Pro</p>

				<p><span class="cost">$10</span> per month</p>

				<div class="hr"><hr><hr><hr><hr></div>

			</div>

			<div class="pack premium">

				<p class="title">Premium</p>

				<p><span class="cost">$20</span> per month</p>

				<div class="hr"><hr><hr><hr><hr></div>

			</div>

		<div class="stats">

			<div class="users">

				<div class="labels">

					<span class="min">5 Users</span>

					<span class="max">100 Users</span>

				</div>

				<div class="progress">

					<div class="value"></div>

				</div>

			</div>

			<div class="space">

				<div class="labels">

					<span class="min">20GB</span>

					<span class="max">200GB</span>

				</div>

				<div class="progress">

					<div class="value"></div>

				</div>

			</div>

			<div class="projects">

				<div class="labels">

					<span class="min">1 Project</span>

				<span class="max">50 Projects</span>

				</div>

				<div class="progress">

					<div class="value"></div>

				</div>

			</div>

		</div>

  </div>

</div>

</body>

</html>

　　

linear-gradient 纯CSS3项目价格表切换代码的更多相关文章

  1. 【CSS3】纯CSS3制作页面切换效果

    此前写的那个太复杂了,来点简单的核心 <html> <head> <title></title> <style type="text/c ...

  2. 8个纯CSS3制作的动画应用及源码

    对于一个复杂的图形或者动画来说,之前我们的处理方式是图片叠加或者利用CSS+JavaScript的方法,然而随着CSS3标准的不断成熟,我们甚至完全可以利用CSS3来绘制一些图片和制作丰富的动画特效. ...

  3. 纯CSS3打造非常炫的加载动画

    纯css3打造的一款非常炫的加载图.用在需要一定时间加载的地方非常合适.先上效果图: 点击这里在线预览 代码非常简单.没有用任何javascript代码.纯css3实现. html代码: <di ...

  4. 推荐10款纯css3实现的实用按钮

    在2014年的双11即将来临之季,爱编程小编为大家整理10款纯css3实现的按钮.希望这对坚守在前端的码农们有所帮助.亲,如果你有好的资源也可在本文留言,让从事编码的程序员们抱团.工作更轻松. No1 ...

  5. 纯CSS3实现漂亮的价格表样式代码

    分享一款纯CSS3实现漂亮的价格表样式代码是一款常见的主机商发布产品价格信息页.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="main" ...

  6. 纯css3艺术文字样式效果代码

    效果:http://hovertree.com/texiao/css3/1/ 本效果主要使用text-shadow实现.参考:http://hovertree.com/h/bjaf/css3_text ...

  7. 纯css3手机页面图标样式代码

    全部图标:http://hovertree.com/texiao/css/19/ 先看效果: 或者点这里:http://hovertree.com/texiao/css/19/hoverkico.ht ...

  8. 纯CSS3实现轮播切换效果

    使用纯css3实现与轮播器一样的功能. HTML代码: <div class="slide-container"> <input type="radio ...

  9. 纯CSS3悬停图标旋转导航动画代码

    分享一款纯CSS3悬停图标旋转导航动画代码.这是一款鼠标移到图标上动画旋转显示导航菜单.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="x_con ...

随机推荐

  1. python中打印中文

    python中打印中文 在python 2.x版本中,默认是ASCII编码方式,在有业务需要输入中文时,就会出现乱码的情况.解决这种问题的一个方式就是设置py文件的编码方式.实现方式如下: 在py文件 ...

  2. 【学习总结】GirlsInAI ML-diary day-10-if条件执行

    [学习总结]GirlsInAI ML-diary 总 原博github链接-day10 认识if条件执行 一般条件执行 分支执行 链式条件执行 嵌套条件执行 1-if一般条件执行 格式:如果(满足这个 ...

  3. Flask中使用数据库连接池 DBUtils ——（4）

    DBUtils是Python的一个用于实现数据库连接池的模块. 此连接池有两种连接模式: 模式一:为每个线程创建一个连接,线程即使调用了close方法,也不会关闭,只是把连接重新放到连接池,供自己线程 ...

  4. 通过CONN_MAX_AGE优化Django的数据库连接

    上周对我们用Django+Django-rest-framework提供的一套接口进行了压力测试.压测的过程中,收到DBA通知——数据库连接数过多,希望我们优化下程序.具体症状就是,如果设置mysql ...

  5. [模板] 笛卡尔树 && RMQ

    话说我noip之前为什么要学这种东西... 简介 笛卡尔树(Cartesian Tree) 是一种二叉树, 且同时具有以下两种性质: 父亲节点的值大于/小于子节点的值; 中序遍历的结果为原序列. 笛卡 ...

  6. nginx之安装、多虚拟主机、反向代理和负载均衡

    一.web服务器与web框架 1.web服务器简介 Web 网络服务是一种被动访问的服务程序,即只有接收到互联网中其他主机发出的请求后才会响应,最终用于提供服务程序的Web服务器会通过 HTTP(超文 ...

  7. Zookeeper 启蒙

    2018-12-14 关键词: Zookeeper入门介绍 . Zookeeper是什么.Zookeeper架构解析.Zookeeper应用场景.Zookeeper有什么用 本篇文章系笔者依据当前所掌 ...

  8. Codeforces 1077F2 Pictures with Kittens (hard version)（DP+单调队列优化）

    题目链接:Pictures with Kittens (hard version) 题意:给定n长度的数字序列ai,求从中选出x个满足任意k长度区间都至少有一个被选到的最大和. 题解:数据量5000, ...

  9. 欧拉筛法模板and 洛谷 P3383 【模板】线性筛素数（包括清北的一些方法）

    题目描述 如题,给定一个范围N,你需要处理M个某数字是否为质数的询问(每个数字均在范围1-N内) 输入格式 第一行包含两个正整数N.M,分别表示查询的范围和查询的个数. 接下来M行每行包含一个不小于1 ...

  10. 洛谷P5289 皮配

    解:观察一波部分分. 首先小数据直接暴力4n,然后考虑背包.设f[i][a][b][c]表示前i个学校中前三位导师分别有多少人,第四位导师可以直接推出来. 然后暴力枚举每一个人放在哪进行背包. 进一步 ...