Beautiful HTML 5 page special effects learning notes ink animation

Posted by gateway69 on Sat, 24 Aug 2019 07:08:23 +0200

Effect

Mouse touch button, appear ink style animation
Screen adaptation
An html file, a css file, no javascript, easy to use
Welcome to my blog to read this article: http://clatterrr.com/archives...

Source code

Demonstration address: https://clatterrr.github.io/i...
Source code: https://github.com/clatterrr/...

note

:root

This CSS pseudoclass matches the root element of the document tree. For HTML, root represents elements that are the same as HTML selectors except for higher priority.

box-sizing

Properties allow you to define specific elements that match a region in a specific way.

content-box: Draws the inner margins and borders of elements beyond width and height.
border-box: Draws the inner margins and borders of elements within width and height.
Inherit: inherit from the parent element
Color Gradient Line-Gradient
This is the effect of the beautiful dark blue-light blue effect. See developer.mozilla.org/zh-CN/docs/...

calc()

This CSS function lets you perform some calculations when declaring CSS attribute values. It can be used in the following situations:,,,,,, or.

flex:

This is a layout interface that can automatically adapt to different screen sizes. The following justify-content and align-items specify the arrangement of child elements that apply flex layout

Jusify-content: Sets or retrieves the alignment of elastic box elements in the direction of the main axis (horizontal axis). Popular point is left and right direction.
align-items: Sets or retrieves alignment of elastic box elements in the lateral (longitudinal) direction. Popular point is up and down direction.
@media:
Media queries, in short, allow the web page to automatically adapt to different device screen sizes. For example, when the screen width is less than 750px, the flex direction is changed to vertical alignment. See for details https://www.runoob.com/cssref...

rem:

It's a relative unit, a unit of font size relative to the root element, and then a straight white dot is a unit of font size relative to the html element. It's convenient to use absolute units like px, but when the screen size changes, you can't see all of them. rem is a relative unit, which changes according to the change of the parent element and solves the problem of self-adaptation. See for details https://blog.csdn.net/ernijie...

cubic-bezier:

Bessel curve is the key to the formation of ink effect. But the blogger's specific principle is not very clear. Reference resources https://www.jianshu.com/p/d99...

Source code:

html code

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CSS3 Ink style background animation button DEMO Demonstration</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 code:

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

Topics: Front-end Javascript github Attribute less

Programmer Think