<!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. 软件工程(FZU2015) 赛季得分榜，第11回合(beta冲刺+SE总结)

    SE_FZU目录:1 2 3 4 5 6 7 8 9 10 11 12 13 积分规则 积分制: 作业为10分制,练习为3分制:alpha30分:beta30分 团队项目分=团队得分+个人贡献分 个人 ...

  2. 数据库和SQL面试题基础知识（持续更新）

    数据库方面基础知识复习 常问小问题: 一.like查询大小写问题: sql查询结果去重 SELECT distinct name FROM 表:平均数avg 一.like查询大小写问题: ①用bina ...

  3. vue axios封装以及登录token过期跳转问题

    Axios配置JWT/封装插件/发送表单数据 首先请务必已仔细阅读 Axios 文档并熟悉 JWT: 中文文档 JWT 中文文档 安装 npm install axios npm install es ...

  4. 控制结构(7): 程序计数器（PC）

    // 上一篇:最近最少使用(LRU) // 下一篇:线性化(linearization) 程序的每一行都是一个状态,对应的行指令.同步的情况下同一个pc一直自增,异步的时候,分裂出一个新的子pc,独立 ...

  5. Windows 与Office 镜像的区别

    .SW开头是批量授权的版本. .CN开头是简体中文版镜像文件 零售版本. 其实建议使用 SW开头的镜像 可以直接使用KMS进行激活了. 转帖一个百度知道的内容: 看安装包的名称 cn开头的是零售版的, ...

  6. Flask--路由, 配置, 蓝图

    一 . 双重装饰器重名的解决办法 # 我们都知道flask中的@app.route就是一层装饰器, 当我们需要在给视图函数加装饰器的时候就两层装饰器,这里介绍一下加装饰器的先后顺序,以及遇到的问题. ...

  7. C++/CLI泛型应用

    2019年01月16日, QQ群友不知道要折腾什么, 提出了以下问题: 样例代码中的是C#语言写的, 翻译成C++/CLI就不会了, 于是我试着谢了一下, 发现可以实现, 于是就贴出来与大家分享, 源 ...

  8. flv.js怎么用？全面解读flv.js代码

    flv.js项目的代码有一定规模,如果要研究的话,我建议从demux入手,理解了demux就掌握了媒体数据处理的关键步骤,前面的媒体数据下载和后面的媒体数据播放就变得容易理解了. 先普及点背景知识,为 ...

  9. Codeforces Round #530 (Div. 2) C D

    C: *可以保留删除或者增加 ? 保留或者删除 #include<bits/stdc++.h> using namespace std; int main(){ string s; int ...

  10. 礼物（中国剩余定理+拓展gcd求逆元+分治=拓展Lucus）

    礼物 题意: 求\[C(n,m)\ \%\ p\] \(n,m,p\le 10^9\),且若\(p=\prod_{i=1}^{k}{p_i}^{c_i}\),则\(\forall i\in [1..k ...