<!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. 如何在.net 4.0下安装TLS1.2的支持

    原始出处:www.cnblogs.com/Charltsing/p/Net4TLS12.html 作者QQ: 564955427 最近提交请求发生错误:不支持请求的协议,研究了一下TLS1.2,发现这 ...

  2. OracleSql语句学习(五)

    --数据库对象数据库对象包含:表,视图,索引,序列视图VIEN视图在SQL语句中体现的角色与表一样,但是视图并非真实存在的表,它只是对应一条查询语句的结果集 使用视图通常是为了重用子查询,简化SQL语 ...

  3. docker(六) 使用docker-maven-plugin插件构建docker镜像(已过时)

    可以参考博客:https://blog.csdn.net/aixiaoyang168/article/details/77453974 docker-maven-plugin官网推荐在新项目中使用do ...

  4. [转帖]Oracle 12cR2使用经验

    大规模升级来临,谈谈Oracle 12cR2使用经验 随着2019年2月13日,Oracle 19c (Oracle 12.2.0.3) for Exadata 版本发布,Oracle 12cR2体系 ...

  5. Kivy 中文教程 实例入门 简易画板 (Simple Paint App)：1. 自定义窗口部件 (widget)

    1. 框架代码 用 PyCharm 新建一个名为 SimplePaintApp 的项目,然后新建一个名为 simple_paint_app.py 的 Python 源文件, 在代码编辑器中,输入以下框 ...

  6. 在CENTOS上源码搭建LNMP环境

    前言 1.操作前提: CentOS Linux release 7.5.1804: sudo用户(需要root权限): 2.需要安装的组件: nginx稳定版:nginx-1.14.0: MariaD ...

  7. 打开mac上面的apache 服务器

    1. apache 服务器在系统安装的时候就默认安装了 config 文件未知:  /etc/apache2/httpd.conf 2. 编辑配置文件 httpd.conf 2.1 查找  Docum ...

  8. html5 基础入门

    html5 基础入门 前言介绍 HTML5草案的前身名为 Web Applications 1.0,于2004年被WHATWG提出,于2007年被W3C接纳,并成立了新的 HTML工作团队. 如果从狭 ...

  9. Linux交换分区使用过多的处理办法

    处理办法 echo "vm.swappiness=0" >>/etc/sysctl.conf sysctl -p swapoff -a && swapo ...

  10. 看毛片就能AC算法

    KMP && ACA KMP: 吼哇! 反正网上教程满天飞,我就不写了. 发个自己写的模板 /** freopen("in.in", "r", ...