效果
鼠标触碰按钮, 出现水墨风格动画
屏幕自适应
一份 html 文件, 一份 CSS 文件, 无 JavaScript, 上手程度: 很简单
笔记
:root
这个 CSS 伪类匹配文档树的根元素. 对于 HTML 来说,:root 表示元素, 除了优先级更高之外, 与 HTML 选择器相同.
box-sizing
属性允许您以特定的方式定义匹配某个区域的特定元素.
content-box: 在宽度和高度之外绘制元素的内边距和边框.
border-box: 在宽度和高度之内绘制元素的内边距和边框.
inherit: 从父元素继承
颜色渐变 linear-gradient
背景漂亮的深蓝 - 浅蓝效果就是这个的作用. 具体请看 developer.mozilla.org/zh-CN/docs/...
calc()
此 CSS 函数让你在声明 CSS 属性值时执行一些计算. 它可以用在如下场合:,, ,,, 或.
flex:
这是一种可以自动适应不同屏幕尺寸的布局界面. 下面的 justify-content 和 align-items 规定了应用 flex 布局的子元素的排列方式
justify-content: 设置或检索弹性盒子元素在主轴 (横轴) 方向上的对齐方式. 通俗一点就是左右方向.
align-items: 设置或检索弹性盒子元素在侧轴 (纵轴) 方向上的对齐方式. 通俗一点就是上下方向.
@media:
媒体查询, 简单来说就是可以让网页自动适应不同的设备屏幕尺寸. 例如上面意为当屏幕宽度小于 750px 时, 就让 flex 的方向改为纵轴排列.
rem:
是一个相对单位, 相对根元素字体大小的单位, 再直白点就是相对于 HTML 元素字体大小的单位. 用 px 这种绝对单位固然方便, 但当屏幕尺寸改变, 就没看看全了. rem 则是一种相对单位, 根据父元素的变化而变化, 解决了自适应的问题.
cubic-bezier:
贝塞尔曲线, 用来生成水墨效果的关键.
源码:
HTML 代码
web 前端开发学习 Q-q-u-n: 731771211, 分享学习的方法和需要注意的小细节, 不停更新最新的教程和学习方法(详细的前端项目实战教学视频, PDF)
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- CSS3 水墨风格背景动画按钮 DEMO 演示
- </title>
- <link rel="stylesheet" href="css/style.css">
- </head>
- <body>
- <svg width="0" height="0">
- <filter id="filter">
- <feTurbulence type="fractalNoise" baseFrequency=".01" numOctaves="6" />
- <feDisplacementMap in="SourceGraphic" scale="100" />
- </filter>
- </svg>
- <div class="wrapper">
- <div class="button _1">
- <span>
- hover
- </span>
- <div class="back">
- </div>
- </div>
- <div class="button _2">
- <span>
- hover
- </span>
- <div class="back">
- </div>
- </div>
- <div class="button _3">
- <span>
- hover
- </span>
- <div class="back">
- </div>
- </div>
- <div class="button _4">
- <span>
- hover
- </span>
- <div class="back">
- </div>
- </div>
- </div>
- <div style="text-align:center;clear:both;">
- <script src="/gg_bd_ad_720x90.js" type="text/javascript">
- </script>
- <script src="/follow.js" type="text/javascript">
- </script>
- </div>
- </body>
- </HTML>
CSS 代码:
Web 前端开发学习 Q-q-u-n: 731771211, 分享学习的方法和需要注意的小细节, 不停更新最新的教程和学习方法(详细的前端项目实战教学视频, PDF)
- :root {
- --height: 100px;
- --width: 200px;
- }
- * {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- }
- body {
- width: 100%;
- height: 100vh;
- background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
- font-family: sans-serif;
- }
- .wrapper {
- width: calc(4 * var(--width));
- height: calc(4 * var(--height));
- display: flex;
- justify-content: center;
- align-items: center;
- }
- .button {
- position: relative;
- width: calc(0.8 * var(--width));
- height: calc(0.7 * var(--height));
- display: flex;
- justify-content: center;
- align-items: center;
- cursor: pointer;
- overflow: hidden;
- margin: 0 0.8rem;
- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 3px 8px rgba(0, 0, 0, 0.1);
- transition: all 0.3s cubic-bezier(0, 0.22, 0.3, 1);
- }
- .button:before {
- content: '';
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background: rgba(0, 0, 0, 0.1);
- }
- .button span {
- color: #fff;
- font-size: 1rem;
- z-index: 10;
- text-transform: uppercase;
- letter-spacing: 2px;
- }
- .button._1 {
- background: #2980b9;
- }
- .button._2 {
- background: #8e44ad;
- }
- .button._3 {
- background: #16a085;
- }
- .button._4 {
- background: #e74c3c;
- }
- .button .back {
- position: absolute;
- width: 0;
- height: 0;
- filter: url(#filter);
- border-radius: 50%;
- z-index: 5;
- transition: all 2.5s cubic-bezier(0.1, 0.22, 0.3, 1);
- }
- .button._1 .back {
- left: -50%;
- top: -50%;
- background: #27ae60;
- }
- .button._2 .back {
- right: -50%;
- top: -50%;
- background: #c0392b;
- }
- .button._3 .back {
- left: -50%;
- bottom: -50%;
- background: #34495e;
- }
- .button._4 .back {
- right: -50%;
- bottom: -50%;
- background: #2980b9;
- }
- .button:hover .back {
- width: calc(2 * var(--width));
- height: calc(2 * var(--height));
- }
- @media only screen and (max-width: 750px) {
- .wrapper {
- flex-direction: column;
- }
- .button {
- margin: 0.8rem 0;
- }
- }
来源: http://www.jianshu.com/p/d7e6b000921e