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) CSS3 水墨风格背景动画按钮DEMO演示
hover
hover
hover
hover
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; } }

本文章由javascript技术分享原创和收集

发表评论 (审核通过后显示评论):