<!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. Quick Sort(Java)

    public static void main(String[] args) { Scanner input = new Scanner(System.in); int n = input.nextI ...

  2. 如何伪造IP(转）

    要明白伪装IP的原理,首先要回顾一下TCP的三次握手. 总所周知在链接初始化的阶段, 需要一次三次握手来建立链接, 之后客户端和服务端会依据初始的这个IP地址来通信. 从这个角度上来说, 想真正的伪装 ...

  3. deb包转化为rpm包

    deb文件格式本是ubuntu的安装文件,那么我想要在fedora中安装,需要把deb格式转化成rpm格式,我们用skype举例: 1.下载转换工具alien_8.78.tar.gz 2.deb转化成 ...

  4. JAVA ==号和equals()的区别

    ==号和equals()方法都是比较是否相等的方法,那它们有什么区别和联系呢? 首先,==号在比较基本数据类型时比较的是值,而用==号比较两个对象时比较的是两个对象的地址值: int x = 10; ...

  5. sql sever基本命令

    创建表: create table stu_info( id ,) not null primary key clustered, name ) not null, score numeric not ...

  6. Tensorflow 大规模数据集训练方法

    本文转自:Tensorflow]超大规模数据集解决方案:通过线程来预取 原文地址:https://blog.csdn.net/mao_xiao_feng/article/details/7399178 ...

  7. python提取浏览器Cookie

    在用浏览器进行网页访问时,会向网页所在的服务器发送http协议的GET或者POST等请求,在请求中除了指定所请求的方法以及URI之外,后面还跟随着一段Request Header.Request He ...

  8. Linux查看文件以及磁盘空间大小管理(转)

    (1)查看文件大小  查看当前文件夹下所有文件大小(包括子文件夹)    du -sh   # du -h15M     ./package16K     ./.fontconfig4.0K    . ...

  9. AttributeError type object 'deprecated' has no attribute 'ROCKY'

    AttributeError type object 'deprecated' has no attribute 'ROCKY' 在使用kolla安装docker的时候遇到了AttributeErro ...

  10. mongodb 3.6 集群搭建：分片+副本集

    mongodb是最常用的nosql数据库,在数据库排名中已经上升到了前六.这篇文章介绍如何搭建高可用的mongodb(分片+副本)集群. 在搭建集群之前,需要首先了解几个概念:路由,分片.副本集.配置 ...