web前台入门到实战：html5网页特效-水墨动画
效果
- 鼠标触碰按钮，出现水墨风格动画
- 屏幕自适应
- 一份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; }}说明
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » web前台入门到实战：html5网页特效-水墨动画
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » web前台入门到实战：html5网页特效-水墨动画
