js to achieve star flash effects

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

Recommend

WeChat applet implements search box function

This article example shares the specific code for...

How to use Dayjs to calculate common dates in Vue

When using vue to develop projects, the front end...

Vue calls the computer camera to realize the photo function

This article example shares the specific code of ...

Detailed usage of kubernetes object Volume

Overview Volume is the abstraction and virtualiza...

Comparison of the advantages of vue3 and vue2

Table of contents Advantage 1: Optimization of di...

Linux hardware configuration command example

Hardware View Commands system # uname -a # View k...

The latest version of MySQL 8.0.22 download and installation super detailed tutorial (Windows 64 bit)

Table of contents Preface 1. Download MySQL 8.0.2...

Nginx solves cross-domain issues and embeds third-party pages

Table of contents Preface difficulty Cross-domain...

Installation and use of Apache stress testing tools

1. Download Go to the Apache official website htt...

MySQL 5.5.27 installation graphic tutorial

1. Installation of MYSQL 1. Open the downloaded M...

What is JavaScript anti-shake and throttling

Table of contents 1. Function debounce 1. What is...

React Router V6 Updates

Table of contents ReactRouterV6 Changes 1. <Sw...

Summarize the common properties of BigIn functions in JavaScript

Table of contents 1. Overview 2. Attributes 1. Ma...

A brief discussion on several situations where MySQL returns Boolean types

mysql returns Boolean type In the first case, ret...

Build a stable and highly available cluster based on mysql+mycat, load balancing, master-slave replication, read-write separation operation

Database performance optimization generally adopt...