<!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. Tampermonkey-让百度云下载飞起来

    1. 简介Tampermonkey是一款免费的浏览器扩展程序. 我们这里用于谷歌浏览器,目的是为了让百度云里面的文件以满速下载,节约金钱. 2. 安装安装Lantern蓝灯或者其他的FQ工具. 打开F ...

  2. Win10图片打不开文件系统错误2147416359解决方法

    该问题表现为win10打开所有图片都会提示这个‘文件系统错误-2147416359’,打开其他文件没问题.此问题应该是win10自带的图片查看器出了故障. 在网上找到如下方案,但是我的服务列表里没有这 ...

  3. js 实现的页面图片放大器以及 event中的诸多 x

    背景: 淘宝.天猫等电商网站浏览图片时可以查看大图的功能: 思路: 思路很简单,两张图片,一张较小渲染在页面上,一张较大是细节图,随鼠标事件调整它的 left & top; 需要的知识点: o ...

  4. Centos7修改时区

    设置时区同样, 在 CentOS 7 中, 引入了一个叫 timedatectl 的设置设置程序. 用法很简单: # timedatectl # 查看系统时间方面的各种状态 Local time: 四 ...

  5. Java连接远程Mysql过程中遇到的各种问题

    2018-11-16 10:46 2018-11-19 21:35 前言 本篇文章记录的是本人在使用Java程序连接另一台电脑(同一局域网)上的Mysql数据库的过程中遇到的各种问题及解决方案.希望能 ...

  6. mpvue——另类支持v-html

    前言 最近在用mpvue将之前写的vue项目转化为小程序,但是不支持v-html,也不能说不支持,只不过转化为了rich-text的富文本组件,但是图片显示不全啊 本来想让后端内嵌个样式的,还是算了, ...

  7. 开篇python

    测试代码 #!/usr/bin/env python # -*- coding: UTF-8 -*- import os import sys print(os.getcwd) print(sys.v ...

  8. [JSOI2008]Blue Mary开公司[李超线段树]

    题面 bzoj luogu 好久以前听lxl讲过 咕掉了.. 竟然又遇到了 安利blog #include <cmath> #include <cstring> #includ ...

  9. pc安装完成charles成功，小米安装crt证书失败

    问题描述: 今天在学习爬虫爬取APP内容时,需要安装crt证书.根据静谧大大的书,前面都挺顺利的.但在我的小米手机上安装crt证书时,出现了错误.手机显示无法安装. 解决之道: 1.不要用小米手机自带 ...

  10. I/O模型之一：Unix的五种I/O模型

    目录: <I/O模型之一:Unix的五种I/O模型> <I/O模型之二:Linux IO模式及 select.poll.epoll详解> <I/O模型之三:两种高性能 I ...