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

MySQL database rename fast and safe method (3 kinds)

Detailed graphic tutorial on downloading and installing VirtualBox software and installing and deploying it in Linux environment

Blog

A simple way to implement all functions of shopping cart in Vue

Use .Htaccess to prevent malicious IP attacks on websites, prohibit access to specified domain names, prohibit machine crawlers, and prohibit hotlinking

Blog

js to achieve star flash effects

MySQL database rename fast and safe method (3 kinds)

Insufficient memory problem and solution when docker starts elasticsearch

MySQL extracts Json internal fields and dumps them as numbers

LINUX Checks whether the port is occupied

Two simple ways to remove text watermarks from web pages

Detailed graphic tutorial on downloading and installing VirtualBox software and installing and deploying it in Linux environment

A simple way to implement all functions of shopping cart in Vue

Navicat cannot create function solution sharing

Node.js uses express-fileupload middleware to upload files

Use .Htaccess to prevent malicious IP attacks on websites, prohibit access to specified domain names, prohibit machine crawlers, and prohibit hotlinking

Recommend

A detailed explanation of how React Fiber works

Summary of the style modification of the input box of type="file"

JavaScript imitates Jingdong carousel effect

Detailed tutorial on installing mysql-8.0.20 under Linux

JS realizes the card dealing animation

React event binding details

Solution for installing opencv 3.2.0 in Ubuntu 18.04

How to quickly modify the host attribute of a MySQL user

Example of how to implement master-slave hot standby using Docker+keepalived+nginx

JavaScript history object explained

HTML drawing user registration page

How to create LVM for XFS file system in Ubuntu

JavaScript implements password box input verification

Detailed tutorial for installing MySQL 8.0.11 compressed version under win10

How to solve the problem of invalid left join in MySQL and the precautions for its use