好看漂亮的html5网页特效学习笔记(1)_水墨动画

habren 发布于2019-08-30 15:44 / 1034人阅读

摘要：对于来说，表示元素，除了优先级更高之外，与选择器相同。从父元素继承颜色渐变背景漂亮的深蓝浅蓝效果就是这个的作用。媒体查询，简单来说就是可以让网页自动适应不同的设备屏幕尺寸。具体请看贝塞尔曲线，用来生成水墨效果的关键。

效果

鼠标触碰按钮，出现水墨风格动画

屏幕自适应

一份html文件，一份css文件，无javascript，上手程度：很简单

欢迎来我的博客看此文章：http://clatterrr.com/archives...

源码

演示地址：https://clatterrr.github.io/i...

源码：https://github.com/clatterrr/...

笔记 :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的方向改为纵轴排列。具体请看https://www.runoob.com/cssref...

rem：

是一个相对单位，相对根元素字体大小的单位，再直白点就是相对于html元素字体大小的单位。用px这种绝对单位固然方便，但当屏幕尺寸改变，就没看看全了。rem则是一种相对单位，根据父元素的变化而变化，解决了自适应的问题。具体请看https://blog.csdn.net/ernijie...

cubic-bezier:

贝塞尔曲线，用来生成水墨效果的关键。但博主具体原理不是很懂。参考https://www.jianshu.com/p/d99...

源码：

html代码





CSS3 水墨风格背景动画按钮DEMO演示
 

 


 

 

   hover
    
  
   hover
    
  
   hover
    
  
   hover

css代码：

: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;
  }
}

GPU云服务器云服务器好看的js网页好看的js网页游戏 html的动画特效 html5好看音乐

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116322.html

好看漂亮的html5网页特效学习笔记(1)_水墨动画

摘要：对于来说，表示元素，除了优先级更高之外，与选择器相同。从父元素继承颜色渐变背景漂亮的深蓝浅蓝效果就是这个的作用。媒体查询，简单来说就是可以让网页自动适应不同的设备屏幕尺寸。具体请看贝塞尔曲线，用来生成水墨效果的关键。 showImg(https://segmentfault.com/img/bVbwNaj); 效果鼠标触碰按钮，出现水墨风格动画屏幕自适应一份html文件，一份c...

Null 2019-08-26 10:58 评论0 收藏0
好看漂亮的html5网页特效学习笔记(4)_canvas实现火焰跟随鼠标

摘要：好看漂亮的网页特效学习笔记猜猜下一个颜色是什么分步详细解释第一步很简单的初始化函数。绘制新的火焰红色的圆以及火花之前元素，即新的火焰红色的圆以及火花的生命周期未完的话，就继续更新它，否则就删除它第五步以火焰为粒子。 showImg(https://segmentfault.com/img/bVbwV8z?w=376&h=388); 效果：逼真的火焰跟随鼠标，还冒出火花，照亮背景文字...

SwordFly 2019-08-30 15:44 评论0 收藏0
好看漂亮的html5网页特效学习笔记(5)_弧形菜单

摘要：定义标准的文本。然后看看函数的定义自启动来按下按钮的时差不能超过最大持续时间重新绘制菜单项的位置先用确定按下按钮的时间，储存在中。如果到了规定时间的话，就执行。然后再把取下的第一个当成第十三个接在最后面，又成了新的菜单排列。 showImg(https://segmentfault.com/img/bVbw1zV?w=818&h=479); 效果：弧形菜单，文字按规则变形以及变换透...

Guakin_Huang 2019-08-30 15:44 评论0 收藏0
好看漂亮的html5网页特效学习笔记(3)_猜猜下一个颜色是什么？

摘要：如字体页面推荐的那样，把下面这段代码在添加到页面标签内，即可嵌入相应的字体。但这还不是我们要的效果。它相对的不是父节点或者页面的根节点。而是由视窗大小来决定的，单位，代表视窗的。具体请看属性用来设置如何处理元素中的空白。 showImg(http://www.googlefonts.net/); 效果：根据给出的两个连续颜色，玩家需要猜出下一个是什么颜色随机关卡使用vw,vh,...

robin 2019-08-30 15:44 评论0 收藏0
好看漂亮的html5网页特效学习笔记(3)_猜猜下一个颜色是什么？

摘要：如字体页面推荐的那样，把下面这段代码在添加到页面标签内，即可嵌入相应的字体。但这还不是我们要的效果。它相对的不是父节点或者页面的根节点。而是由视窗大小来决定的，单位，代表视窗的。具体请看属性用来设置如何处理元素中的空白。 showImg(http://www.googlefonts.net/); 效果：根据给出的两个连续颜色，玩家需要猜出下一个是什么颜色随机关卡使用vw,vh,...

YancyYe 2019-08-26 11:00 评论0 收藏0