This article introduces how to use font awesome icon font library, use dynamic icons, add Web page running time, turn the whole station into black and white, mouse click effect, dynamic effect of web page title, web page Cherry Blossom effect, mouse touch music effect, and typewriter effect before. You can have a look This article
>Use font awesome icon font library
In the first step, you only need to import the css file to use its icon in the full text
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
Step 2: Usage: 1. Find the icon you like in the website and save its name XXXX
2. Insert < I class = "fa - XXXX" aria hidden = "true" > < / I >
<i class="fa fa-home" aria-hidden="true"></i>home page
The effects are as follows:
>Use dynamic icons
In the first step, you only need to import the css file to use its dynamic effects icon in the full text
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome-animation@0.2.1/dist/font-awesome-animation.min.css">
Step 2: Usage: 1. Find the dynamic effect you like in the website, save its name FAA yyyy, and combine it with the font awesome icon
2. Insert < span class = "FAA parent animated hover" > < I class = "Fa FA XXXX FAA yyyy" aria hidden = "true" > < / I ></span>
<span class="faa-parent animated-hover"><i class="fa fa-home faa-wrench animated" aria-hidden="true"></i>home page</span>
The effects are as follows:
>Web page running time
Reference from Add the website runtime code at the bottom of the website
<span id="webtime"></span>
<!-- js -->
<script type="text/javascript">function show_runtime() {
window.setTimeout("show_runtime()", 1000);
X = new Date("12/31/2019 23:59:59");
Y = new Date();
T = (Y.getTime() - X.getTime());
M = 24 * 60 * 60 * 1000;
a = T / M;
A = Math.floor(a);
b = (a - A) * 24;
B = Math.floor(b);
c = (b - B) * 60;
C = Math.floor((b - B) * 60);
D = Math.floor((c - C) * 60);
document.getElementById("webtime").innerHTML = "The site is already running: " + A + "day" + B + "hour" + C + "branch" + D + "second"
}
show_runtime();
</script>The effect is as follows
>Whole station to black and white
Reference from Whole station black and white CSS code
It is suitable for mourning on the memorial day. It is compatible with all mainstream browsers. It can take effect by directly adding it to the header or blog custom CSS. Remember to clear the cache when it is opened~
html {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}>Mouse click effect
<script type="text/javascript">
onload = function() {
var click_cnt = 0;
var $html = document.getElementsByTagName("html")[0];
var $body = document.getElementsByTagName("body")[0];
$html.onclick = function(e) {
var $elem = document.createElement("b");
$elem.style.color = "#E94F06";
$elem.style.zIndex = 9999;
$elem.style.position = "absolute";
$elem.style.select = "none";
var x = e.pageX;
var y = e.pageY;
$elem.style.left = (x - 10) + "px";
$elem.style.top = (y - 20) + "px";
clearInterval(anim);
switch (++click_cnt) {
case 10:
$elem.innerText = "OωO";
break;
case 20:
$elem.innerText = "(๑•́ ∀ •̀๑)";
break;
case 30:
$elem.innerText = "(๑•́ ₃ •̀๑)";
break;
case 40:
$elem.innerText = "(๑•̀_•́๑)";
break;
case 50:
$elem.innerText = "(￣へ￣)";
break;
case 60:
$elem.innerText = "(╯°mouth°)╯(┴—┴";
break;
case 70:
$elem.innerText = "૮( ᵒ̌Dishᵒ̌ )ა";
break;
case 80:
$elem.innerText = "╮(｡>mouth<｡)╭";
break;
case 90:
$elem.innerText = "( ง ᵒ̌Dishᵒ̌)ง⁼³₌₃";
break;
case 100:
case 101:
case 102:
case 103:
case 104:
case 105:
$elem.innerText = "(ꐦ°᷄д°᷅)";
break;
default:
$elem.innerText = "❤";
break;
}
$elem.style.fontSize = Math.random() * 10 + 8 + "px";
var increase = 0;
var anim;
setTimeout(function() {
anim = setInterval(function() {
if (++increase == 150) {
clearInterval(anim);
$body.removeChild($elem);
}
$elem.style.top = y - 20 - increase + "px";
$elem.style.opacity = (150 - increase) / 120;
}, 8);
}, 70);
$body.appendChild($elem);
};
};
</script>>Dynamic effect of web page title
Reference from JS code realizes the dynamic switching of browser web page title
<script>
jQuery(document).ready(function() {
function c() {
/* Exclude the home page (remember to modify the home page address by yourself) */
if (location.href != "https://justlovesmile.top/") { document.title = document[a] ? " (つェ⊂) eh → "+ d +": "(* ´∇ *) eh →" + d + "}
}
var a, b, d = document.title;
"undefined" != typeof document.hidden ? (a = "hidden", b = "visibilitychange") : "undefined" != typeof document.mozHidden ? (a = "mozHidden", b = "mozvisibilitychange") : "undefined" != typeof document.webkitHidden && (a = "webkitHidden", b = "webkitvisibilitychange");
"undefined" == typeof document.addEventListener && "undefined" == typeof document[a] || document.addEventListener(b, c, !1)
});
</script>The effects are as follows:
>Web cherry effect
Reference from Blog Cherry Blossom falling effect
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN/js/sakura.js"></script>
Just import js
>Mouse touch music effects
Reference from Using HTML5 Web Audio API to add sound to web page JS interaction
<button id="button">Pass me</button>
<script>
window.AudioContext = window.AudioContext || window.webkitAudioContext;
(function () {
if (!window.AudioContext) {
alert('The current browser does not support Web Audio API');
return;
}
// Button element
var eleButton = document.getElementById('button');
// Create a new audio context interface
var audioCtx = new AudioContext();
// The sound frequency data is expressed as the pitch
var arrFrequency = "880 987 1046 987 1046 1318 987 659 659 880 784 880 1046 784 659 659 698 659 698 1046 659 1046 1046 1046 987 698 698 987 987 880 987 1046 987 1046 1318 987 659 659 880 784 880 1046 784 659 698 1046 987 1046 1174 1174 1174 1046 1046 880 987 784 880 1046 1174 1318 1174 1318 1567 1046 987 1046 1318 1318 1174 784 784 880 1046 987 1174 1046 784 784 1396 1318 1174 659 1318 1046 1318 1760 1567 1567 1318 1174 1046 1046 1174 1046 1174 1567 1318 1318 1760 1567 1318 1174 1046 1046 1174 1046 1174 987 880 880 987 880".split(" ");
// The tone is incremented or decremented in turn to process the required parameters
var start = 0, direction = 1;
// The mouse hover s over our buttons
eleButton.addEventListener('mouseenter', function () {
// Current frequency
var frequency = arrFrequency[start];
// If it ends, change the change rule of tone (increase or decrease switching)
if (!frequency) {
direction = -1 * direction;
start = start + 2 * direction;
frequency = arrFrequency[start];
}
// Change the index and use it the next time
start = start + direction;
// Create an OscillatorNode, which represents a periodic waveform (oscillation), basically creating a tone
var oscillator = audioCtx.createOscillator();
// Create a GainNode that can control the total volume of audio
var gainNode = audioCtx.createGain();
// Associate volume, tone, and endpoint
oscillator.connect(gainNode);
// audioCtx.destination returns the AudioDestinationNode object, which represents the final node of all nodes in the current audio context. Generally, it represents the audio rendering device
gainNode.connect(audioCtx.destination);
// Specify the type of tone. There are also square|triangle|sawtooth
oscillator.type = 'sine';
// Set the frequency of the current playing sound, that is, the tone of the final playing sound
oscillator.frequency.value = frequency;
// Set the volume to 0 at the current time
gainNode.gain.setValueAtTime(0, audioCtx.currentTime);
// The volume is 1 after 0.01 seconds
gainNode.gain.linearRampToValueAtTime(1, audioCtx.currentTime + 0.01);
// The tone starts playing at the current time
oscillator.start(audioCtx.currentTime);
// The sound decreases slowly within 1 second, which is a good way to stop the sound
gainNode.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 1);
// Stop the sound completely after 1 second
oscillator.stop(audioCtx.currentTime + 1);
});
})();
</script>