js to achieve star flash effects

This article example shares the specific code of js to achieve the star flash effect for your reference. The specific content is as follows

The effect is as follows

Ideas:

1. Prepare a picture of stars
2. Create multiple stars (you can use for loop)
3. Find the width and height of the visible web page clientWidth, clientHeight
4. Set the random coordinates of the stars using Math.random()
5. To set the scale of the star, you can use scale in CSS
6. Set the star scaling delay frequency animationDelay
7. Add animation to the stars (the stars rotate when the mouse moves)

The code is as follows

 <style>
 *{
  margin: 0;
  padding: 0;
  list-style: none;
 }

 body{
  background-color: #000;
 }

 span{
  width: 30px;
  height: 30px;
  background: url("../images_js/star.png") no-repeat;
  position: absolute;
  background-size:100% 100%;
  animation: flash 1s alternate infinite;
 }

 @keyframes flash {
  0%{opacity: 0;}
  100%{opacity: 1;}
 }

 span:hover{
  transform: scale(3, 3) rotate(180deg) !important;
  transition: all 1s;
 }
 </style>
</head>
<body>
<script>
 window.onload = function () {
 // 1. Find the screen size var screenW = document.documentElement.clientWidth;
 var screenH = document.documentElement.clientHeight;

 // 2. Dynamically create stars for(var i=0; i<150; i++){
  // 2.1 Create stars var span = document.createElement('span');
  document.body.appendChild(span);

  // 2.2 Random coordinates var x = parseInt(Math.random() * screenW);
  var y = parseInt(Math.random() * screenH);
  span.style.left = x + 'px';
  span.style.top = y + 'px';

  // 2.3 Random scaling var scale = Math.random() * 1.5;
  span.style.transform = 'scale('+ scale + ', ' + scale + ')';

  // 2.4 frequency var rate = Math.random() * 1.5;
  span.style.animationDelay = rate + 's';
 }
 }
</script>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

JS implements the star rating function example code (two methods)
js code to light up the star rating and get the parameters
js star rating effect
How to achieve star scoring effect in js
Star rating function implemented by js
JavaScript + CSS Many websites use the function of selecting stars to implement the scoring function
JS implements the star function of evaluation
js to achieve flying into the stars special effects code
AngularJS implements star rating function
JavaScript to achieve random display of star effects

<<: Tutorial on installing MySQL 5.7.18 using RPM package

>>: How to build php-nginx-alpine image from scratch in Docker

js to achieve star flash effects

webpack -v error solution

Solution to the problem that the text is on the lower left and cannot be resized when the textarea is laid out

Linux series of commonly used operation and maintenance commands (summary)

MariaDB-server installation of MySQL series

Detailed explanation of invisible indexes in MySQL 8.0

How to deploy SpringBoot project using Dockerfile

Tutorial on installing PHP on centos via yum

Copy the contents of one file to the end of another file in linux

Detailed explanation of the problem of failure to synchronize warehouse cache after changing yum source in CentOS8

MySQL-group-replication configuration steps (recommended)

Recommend

Examples of new selectors in CSS3

Summary of methods for writing judgment statements in MySQL

Example of how to identify the user using a linux Bash script

Detailed explanation of the specific use of the ENV instruction in Dockerfile

Install CentOS 7 on VMware14 Graphic Tutorial

Design and implementation of Vue cascading drop-down box

Several ways to easily traverse object properties in JS

Example of how to install nginx to a specified directory

Solve the problem of setting Chinese language pack for Docker container

Briefly explain the use of group by in sql statements

Jmeter connects to the database process diagram

A complete list of commonly used shared codes for web pages (essential for front-end)

Three implementation methods of Mysql copy table and grant analysis

How to implement scheduled automatic backup of MySQL under CentOS7

Vue3+el-table realizes row and column conversion