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

Some notes on installing fastdfs image in docker

js to achieve star flash effects

Some notes on installing fastdfs image in docker

Install redis and MySQL on CentOS

Detailed steps for building, running, publishing, and obtaining a Docker image for the first time

Analyze the problem of transferring files and other parameters in the upload component of element-ui

Basic operations of mysql learning notes table

MySQL tutorial thoroughly understands stored procedures

Axios project with 77.9K GitHub repository: What are the things worth learning?

Implementation example of react project from new creation to deployment

Vue+element implements drop-down menu with local search function example

Solution to the problem that VMware15 virtual machine bridge mode cannot access the Internet

Recommend

Analysis of the implementation method of modifying the default network segment of Docker

MySQL 5.7.22 binary package installation and installation-free version Windows configuration method

A detailed introduction to Linux memory management and addressing

Detailed explanation of the principle and function of Vue list rendering key

Vue dynamic menu, dynamic route loading and refresh pitfalls

JQuery implements hiding and displaying animation effects

The solution to the page not refreshing after the route changes after react jumps

Detailed steps to install mysql 8.0.18-winx64 on win10

CSS3 realizes various graphic effects of small arrows

The solution to the problem that the web table or div layer is stretched in the web page

Cross-browser development experience summary (I) HTML tags

Tutorial on installing MYSQL8.X on Centos

How to use Chrome Dev Tools to analyze page performance (front-end performance optimization)

Detailed explanation of MySQL combined index method

MySQL Billions of Data Import, Export and Migration Notes