超好看的前端特效HTML特效、CSS特效、JS特效(第一期)

这篇具有很好参考价值的文章主要介绍了超好看的前端特效HTML特效、CSS特效、JS特效(第一期)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

超好看的前端特效

1. 粒子组成文字动画特效

前端特效库,前端,html,css,javascript,web,jquery,canva可画

文件组成:

前端特效库,前端,html,css,javascript,web,jquery,canva可画

base.css

@import url('https://fonts.googleapis.com/css?family=Abril+Fatface|Raleway:300,400,900');

.coidea-header {
    position: fixed;
    display: block;
    width: 96%;
    width: calc( 100% - 32px );
    height: 40px;
    margin: 0 auto;
    color: #3498db;
    text-align: center;
    top: 16px; right: 16px; left: 16px;
    z-index: 1000;
}

.coidea-header .coidea-links .coidea-icon-back {
    position: absolute;
    display: block;
    width: 24px;
    height: 24px;
    padding: 7px;
    color: rgba(255, 255, 255,0.75);
    font-size: 32px;
    line-height: 34px;
    font-weight: 900;
    font-family: 'Raleway', sans-serif;
    text-decoration: none;
    outline: 0px none;
    outline: 0px;
    transition: all .3s ease;
    top: 0px;
    left: 0px;
    z-index: 2;
}

.coidea-header .coidea-links .coidea-icon-back::before {
    content: '';
    position: absolute;
    display: block;
    width: 34px;
    height: 34px;
    top: 7px;
    left: 20px;
    border-radius: 8px;
    background-color: rgba(255, 255, 255,.35);
}

.coidea-header .coidea-links .coidea-icon-back:hover {
    color: rgba(255, 255, 255,1);
}

.coidea-header .coidea-links .coidea-icon-github {
    position: absolute;
    display: block;
    width: 24px;
    height: 24px;
    padding: 7px;
    color: rgba(255, 255, 255,0.75);
    font-size: 32px;
    line-height: 34px;
    font-weight: 900;
    font-family: 'Raleway', sans-serif;
    text-decoration: none;
    outline: 0px none;
    outline: 0px;
    transition: all .3s ease;
    top: 0px;
    right: 0px;
    z-index: 2;
}
.coidea-header .coidea-links .coidea-icon-github::before {
    content: '';
    position: absolute;
    display: block;
    width: 34px;
    height: 34px;
    top: 7px;
    right: 18px;
    border-radius: 8px;
    background-color: rgba(255, 255, 255,.35);
}
.coidea-header .coidea-links .coidea-icon-github:hover {
    color: rgba(255, 255, 255,1);
}
.coidea-header .coidea-links .coidea-header {
    font-family: 'Raleway', sans-serif;
    display: inline-block;
	font-size: 14px;
	font-weight: 300;
	margin: 0;
    padding: 17px 0;
    z-index: 1;
}
@media screen and (max-width: 360px) {
    .coidea-header .coidea-links .coidea-header {
        font-size: 12px; 
    }
}

demo.css

  body {
    background-color: #000000;
    margin: 0;
    overflow: hidden;
    font-size: 0;
  }
  body section {
    background: url(../img/bcg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width: 100vw;
    height: 100vh;
    font-weight: 700;
  }
  body section canvas {
    width: 100vw;
    height: 100vh;
  }

bcg.jpg

前端特效库,前端,html,css,javascript,web,jquery,canva可画

demo.js

var canvas = document.querySelector("#canvas"),
    ctx = canvas.getContext("2d"),
    link = document.createElement('link');
    particles = [],
    amount = 0,
    mouse = { x: -9999, y: -9999 },
    radius = 1,
    colors = [
      "rgba(252,248,254,0.85)", 
      "rgba(220,203,255,0.75)", 
      "rgba(154,112,124,0.85)", 
      "rgba(192,213,255,0.85)", 
      "rgba(244,223,254,0.75)"
    ],
    headline = document.querySelector("#headline"),
    ww = window.innerWidth,
    wh = window.innerHeight;

function Particle(x, y) {

  this.x = Math.random() * ww;
  this.y = Math.random() * wh;
  this.dest = { x: x, y: y };
  this.r = Math.random() * 2 * Math.PI;
  this.vx = (Math.random() - 0.5) * 25;
  this.vy = (Math.random() - 0.5) * 25;
  this.accX = 0;
  this.accY = 0;
  this.friction = Math.random() * 0.025 + 0.94;
  this.color = colors[Math.floor(Math.random() * 2.75)];
}

Particle.prototype.render = function() {

  this.accX = (this.dest.x - this.x) / 1000;
  this.accY = (this.dest.y - this.y) / 1000;
  this.vx += this.accX;
  this.vy += this.accY;
  this.vx *= this.friction;
  this.vy *= this.friction;
  this.x += this.vx;
  this.y += this.vy;

  ctx.fillStyle = this.color;
  ctx.beginPath();
  ctx.arc(this.x, this.y, this.r, Math.PI * 2, false);
  ctx.fill();

  var a = this.x - mouse.x;
  var b = this.y - mouse.y;

  var distance = Math.sqrt(a * a + b * b);
  if (distance < (radius * 75)) {

    this.accX = (this.x - mouse.x) / 100;
    this.accY = (this.y - mouse.y) / 100;
    this.vx += this.accX;
    this.vy += this.accY;
  }
}

function onMouseMove(e) {

  mouse.x = e.clientX;
  mouse.y = e.clientY;
  }

  function onTouchMove(e) {

  if (e.touches.length > 0) {

    mouse.x = e.touches[0].clientX;
    mouse.y = e.touches[0].clientY;
  }
}

function onTouchEnd(e) {

  mouse.x = -9999;
  mouse.y = -9999;
}

function initScene() {

  ww = canvas.width = window.innerWidth;
  wh = canvas.height = window.innerHeight;

  ctx.clearRect(0, 0, canvas.width, canvas.height);

  link.rel = 'stylesheet';
  link.type = 'text/css';
  link.href = 'https://fonts.googleapis.com/css?family=Abril+Fatface';
  document.getElementsByTagName('head')[0].appendChild(link);

  ctx.font = 'bold 16vw "Abril Fatface"';
  ctx.textAlign = "center";
  ctx.fillText(headline.innerHTML, ww / 2, wh / 1.6);

  var data = ctx.getImageData(0, 0, ww, wh).data;

  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.globalCompositeOperation = "screen";

  particles = [];
  for (var i = 0; i < ww; i += Math.round(ww / 200)) {
    for (var j = 0; j < wh; j += Math.round(ww / 200)) {
      if (data[((i + j * ww) * 4) + 3] > 200) {
      
        particles.push(new Particle(i, j));
      }
    }
  }
  amount = particles.length;
}

function render(a) {

  requestAnimationFrame(render);
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (var i = 0; i < amount; i++) {

    particles[i].render();
  }
}

headline.addEventListener("keyup", initScene);
window.addEventListener("resize", initScene);
window.addEventListener("mousemove", onMouseMove);
window.addEventListener("touchmove", onTouchMove);
window.addEventListener("touchend", onTouchEnd);
initScene();
requestAnimationFrame(render);

demo.scss

@import url('https://fonts.googleapis.com/css?family=Abril+Fatface');

body {
  background-color: #000000;
  margin: 0;
  overflow: hidden;
  font-size: 0;
  section {
    background: url(https://images.unsplash.com/photo-1528722828814-77b9b83aafb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width: 100vw;
    height: 100vh;
    canvas {
      width: 100vw;
      height: 100vh;
    }
  }
}

index.html

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>粒子组成文字动画特效</title>
	<link rel="stylesheet" type="text/css" href="assets/css/base.css" />
    <link rel="stylesheet" type="text/css" href="assets/css/demo.css" />
</head>
<body>
    <section id="ci-particles">
      <canvas id="canvas"></canvas>
      <h1 id="headline">神奇的布欧</h1>
    </section>
	
	<script src="assets/js/demo.js"></script>
</body>
</html>

2. 爱心表白特效

前端特效库,前端,html,css,javascript,web,jquery,canva可画

文件组成:

前端特效库,前端,html,css,javascript,web,jquery,canva可画

heart.svg

<svg xmlns="http://www.w3.org/2000/svg" width="473.8px" height="408.6px" viewBox="0 0 473.8 408.6"><path fill="#d32932" d="M404.6,16.6C385.4,6.1,363.5,0,340,0c-41.5,0-78.5,18.9-103,48.5C212.3,18.9,175.3,0,133.8,0 c-23.3,0-45.3,6.1-64.5,16.6C27.9,39.5,0,83.4,0,133.9c0,14.4,2.4,28.3,6.6,41.2C29.6,278.4,237,408.6,237,408.6 s207.2-130.2,230.2-233.5c4.3-12.9,6.6-26.8,6.6-41.2C473.8,83.4,445.9,39.6,404.6,16.6z"/></svg>

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>七夕520爱心表白</title>
	<style>
		*{margin:0; padding:0;}
		body{ background-color: #1E1E1E; 		}
	</style>
</head>
<body>

	<canvas id="drawHeart"></canvas>

	<script>
		var hearts = [];
		var canvas = document.getElementById('drawHeart');
		var wW = window.innerWidth;
		var wH = window.innerHeight;
		// 创建画布
		var ctx = canvas.getContext('2d');
		// 创建图片对象
		var heartImage = new Image();
		heartImage.src = 'img/heart.svg';
		var num = 100;

		init();

		window.addEventListener('resize', function(){
			 wW = window.innerWidth;
			 wH = window.innerHeight;
		});
		// 初始化画布大小
		function init(){
			canvas.width = wW;
			canvas.height = wH;
			for(var i = 0; i < num; i++){
				hearts.push(new Heart(i%5));
			}
			requestAnimationFrame(render);
		}

		function getColor(){
			var val = Math.random() * 10;
			if(val > 0 && val <= 1){
				return '#00f';
			} else if(val > 1 && val <= 2){
				return '#f00';
			} else if(val > 2 && val <= 3){
				return '#0f0';
			} else if(val > 3 && val <= 4){
				return '#368';
			} else if(val > 4 && val <= 5){
				return '#666';
			} else if(val > 5 && val <= 6){
				return '#333';
			} else if(val > 6 && val <= 7){
				return '#f50';
			} else if(val > 7 && val <= 8){
				return '#e96d5b';
			} else if(val > 8 && val <= 9){
				return '#5be9e9';
			} else {
				return '#d41d50';
			}
		}

		function getText(){
			var val = Math.random() * 10;
			if(val > 1 && val <= 3){
				return '爱你一辈子';
			} else if(val > 3 && val <= 5){
				return '感谢你';
			} else if(val > 5 && val <= 8){
				return '喜欢你';
			} else{
				return 'I Love You';
			}
		}

		function Heart(type){
			this.type = type;
			// 初始化生成范围
			this.x = Math.random() * wW;
			this.y = Math.random() * wH;

			this.opacity = Math.random() * .5 + .5;

			// 偏移量
			this.vel = {
				x: (Math.random() - .5) * 5,
				y: (Math.random() - .5) * 5
			}

			this.initialW = wW * .5;
			this.initialH = wH * .5;
			// 缩放比例
			this.targetScale = Math.random() * .15 + .02; // 最小0.02
			this.scale = Math.random() * this.targetScale;

			// 文字位置
			this.fx = Math.random() * wW;
			this.fy = Math.random() * wH;
			this.fs = Math.random() * 10;
			this.text = getText();

			this.fvel = {
				x: (Math.random() - .5) * 5,
				y: (Math.random() - .5) * 5,
				f: (Math.random() - .5) * 2
			}
		}

		Heart.prototype.draw = function(){
			ctx.save();
			ctx.globalAlpha = this.opacity;
			ctx.drawImage(heartImage, this.x, this.y, this.width, this.height);
			ctx.scale(this.scale + 1, this.scale + 1);
  			if(!this.type){
  				// 设置文字属性
				ctx.fillStyle = getColor();
	  			ctx.font = 'italic ' + this.fs + 'px sans-serif';
	  			// 填充字符串
	  			ctx.fillText(this.text, this.fx, this.fy);
  			}
			ctx.restore();
		}
		Heart.prototype.update = function(){
			this.x += this.vel.x;
			this.y += this.vel.y;

			if(this.x - this.width > wW || this.x + this.width < 0){
				// 重新初始化位置
				this.scale = 0;
				this.x = Math.random() * wW;
				this.y = Math.random() * wH;
			}
			if(this.y - this.height > wH || this.y + this.height < 0){
				// 重新初始化位置
				this.scale = 0;
				this.x = Math.random() * wW;
				this.y = Math.random() * wH;
			}

			// 放大
			this.scale += (this.targetScale - this.scale) * .1;
			this.height = this.scale * this.initialH;
			this.width = this.height * 1.4;

			// -----文字-----
			this.fx += this.fvel.x;
			this.fy += this.fvel.y;
			this.fs += this.fvel.f;

			if(this.fs > 50){
				this.fs = 2;
			}

			if(this.fx - this.fs > wW || this.fx + this.fs < 0){
				// 重新初始化位置
				this.fx = Math.random() * wW;
				this.fy = Math.random() * wH;
			}
			if(this.fy - this.fs > wH || this.fy + this.fs < 0){
				// 重新初始化位置
				this.fx = Math.random() * wW;
				this.fy = Math.random() * wH;
			}
		}

		function render(){
			ctx.clearRect(0, 0, wW, wH);
			for(var i = 0; i < hearts.length; i++){
				hearts[i].draw();
				hearts[i].update();
			}
			requestAnimationFrame(render);
		}
	</script>
</body>
</html>

3. 爱心跟随鼠标

前端特效库,前端,html,css,javascript,web,jquery,canva可画

index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>html5情人节爱心背景动画特效</title>

<style>
body{
  overflow: hidden;
  margin: 0;
}
h1{
  position: fixed;
  top: 50%;
  left: 0;
  width: 100%;
  text-align: center;
  transform:translateY(-50%);
  font-family: 'Love Ya Like A Sister', cursive;
  font-size: 40px;
  color: #c70012;
  padding: 0 20px;
}
h2{
  position: fixed;
  top: 10%;
  left: 0;
  width: 100%;
  text-align: center;
  transform:translateY(-50%);
  font-family: 'Love Ya Like A Sister', cursive;
  font-size: 20px;
  color: #c70012;
  padding: 0 20px;
}
@media (min-width:1200px){
  h1{
    font-size: 60px;
  }
}
</style>

</head>
<body>

<canvas></canvas>
<h1>情人节快乐!</h1>

<script>
var canvas = document.querySelector("canvas"),
  ctx = canvas.getContext("2d");

var ww,wh;

function onResize(){
  ww = canvas.width = window.innerWidth;
  wh = canvas.height = window.innerHeight;
}

ctx.strokeStyle = "red";
ctx.shadowBlur = 25;
ctx.shadowColor = "hsla(0, 100%, 60%,0.5)";

var precision = 100;
var hearts = [];
var mouseMoved = false;
function onMove(e){
  mouseMoved = true;
  if(e.type === "touchmove"){
    hearts.push(new Heart(e.touches[0].clientX, e.touches[0].clientY));
    hearts.push(new Heart(e.touches[0].clientX, e.touches[0].clientY));
  }
  else{
    hearts.push(new Heart(e.clientX, e.clientY));
    hearts.push(new Heart(e.clientX, e.clientY));
  }
}

var Heart = function(x,y){
  this.x = x || Math.random()*ww;
  this.y = y || Math.random()*wh;
  this.size = Math.random()*2 + 1;
  this.shadowBlur = Math.random() * 10;
  this.speedX = (Math.random()+0.2-0.6) * 8;
  this.speedY = (Math.random()+0.2-0.6) * 8;
  this.speedSize = Math.random()*0.05 + 0.01;
  this.opacity = 1;
  this.vertices = [];
  for (var i = 0; i < precision; i++) {
    var step = (i / precision - 0.5) * (Math.PI * 2);
    var vector = {
      x : (15 * Math.pow(Math.sin(step), 3)),
      y : -(13 * Math.cos(step) - 5 * Math.cos(2 * step) - 2 * Math.cos(3 * step) - Math.cos(4 * step)) 
    }
    this.vertices.push(vector);
  }
}

Heart.prototype.draw = function(){
  this.size -= this.speedSize;
  this.x += this.speedX;
  this.y += this.speedY;
  ctx.save();
  ctx.translate(-1000,this.y);
  ctx.scale(this.size, this.size);
  ctx.beginPath();
  for (var i = 0; i < precision; i++) {
    var vector = this.vertices[i];
    ctx.lineTo(vector.x, vector.y);
  }
  ctx.globalAlpha = this.size;
  ctx.shadowBlur = Math.round((3 - this.size) * 10);
  ctx.shadowColor = "hsla(0, 100%, 60%,0.5)";
  ctx.shadowOffsetX = this.x + 1000;
  ctx.globalCompositeOperation = "screen"
  ctx.closePath();
  ctx.fill()
  ctx.restore();
};


function render(a){
  requestAnimationFrame(render);
  
  hearts.push(new Heart())
  ctx.clearRect(0,0,ww,wh);
  for (var i = 0; i < hearts.length; i++) {
    hearts[i].draw();
    if(hearts[i].size <= 0){
      hearts.splice(i,1);
      i--;
    }
  }
}


onResize();
window.addEventListener("mousemove", onMove);
window.addEventListener("touchmove", onMove);
window.addEventListener("resize", onResize);
requestAnimationFrame(render);
</script>

</body>
</html>

4. 满屏漂浮爱心

前端特效库,前端,html,css,javascript,web,jquery,canva可画

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>实现满屏的漂浮爱心</title>
    <style>
      html,
      body {
        margin: 0px;
        padding: 0px;
        background-color: #312;
        font-family: sans-serif;
        font-size: 48px;
        overflow: hidden;
      }

      #logo {
        position: absolute;
        right: 0px;
        bottom: 0px;
      }

      p {
        color: #aeb7c0;
      }
      canvas {
        background-color: #312;
      }
    </style>
  </head>

  <body>
    <div>
      <canvas id="testCanvas" width="550" height="500"></canvas>
    </div>
    <script src="https://code.createjs.com/1.0.0/easeljs.min.js"></script>
    <script>
      var canvas;
      var stage;
      var container;
      var captureContainers;
      var captureIndex;

      function init() {
        // create a new stage and point it at our canvas:
        canvas = document.getElementById("testCanvas");
        // 创建stage
        stage = new createjs.Stage(canvas);
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        var w = canvas.width;
        var h = canvas.height;

        container = new createjs.Container();
        stage.addChild(container);

        captureContainers = [];
        captureIndex = 0;

        // create a large number of slightly complex vector shapes, and give them random positions and velocities:
        for (var i = 0; i < 100; i++) {
          var heart = new createjs.Shape();
          heart.graphics.beginFill(
            createjs.Graphics.getHSL(
              Math.random() * 30 - 45,
              100,
              50 + Math.random() * 30
            )
          );
          heart.graphics
            .moveTo(0, -12)
            .curveTo(1, -20, 8, -20)
            .curveTo(16, -20, 16, -10)
            .curveTo(16, 0, 0, 12);
          heart.graphics
            .curveTo(-16, 0, -16, -10)
            .curveTo(-16, -20, -8, -20)
            .curveTo(-1, -20, 0, -12);
          heart.y = -100;

          container.addChild(heart);
        }

        var text = new createjs.Text(
          "the longer I'm with you\nthe more I love you",
          "bold 24px Arial",
          "#312"
        );
        text.textAlign = "center";
        text.x = w / 2;
        text.y = h / 2 - text.getMeasuredLineHeight();
        stage.addChild(text);

        for (i = 0; i < 100; i++) {
          var captureContainer = new createjs.Container();
          captureContainer.cache(0, 0, w, h);
          captureContainers.push(captureContainer);
        }

        // start the tick and point it at the window so we can do some work before updating the stage:
        createjs.Ticker.timingMode = createjs.Ticker.RAF;
        createjs.Ticker.on("tick", tick);
      }

      function tick(event) {
        var w = canvas.width;
        var h = canvas.height;
        var l = container.numChildren;

        captureIndex = (captureIndex + 1) % captureContainers.length;
        stage.removeChildAt(0);
        var captureContainer = captureContainers[captureIndex];
        stage.addChildAt(captureContainer, 0);
        captureContainer.addChild(container);

        // iterate through all the children and move them according to their velocity:
        for (var i = 0; i < l; i++) {
          var heart = container.getChildAt(i);
          if (heart.y < -50) {
            heart._x = Math.random() * w;
            heart.y = h * (1 + Math.random()) + 50;
            heart.perX = (1 + Math.random() * 2) * h;
            heart.offX = Math.random() * h;
            heart.ampX = heart.perX * 0.1 * (0.15 + Math.random());
            heart.velY = -Math.random() * 2 - 1;
            heart.scaleX = heart.scaleY = Math.random() * 2 + 1;
            heart._rotation = Math.random() * 40 - 20;
            heart.alpha = Math.random() * 0.75 + 0.05;
            heart.compositeOperation =
              Math.random() < 0.33 ? "lighter" : "source-over";
          }
          var int = ((heart.offX + heart.y) / heart.perX) * Math.PI * 2;
          heart.y += (heart.velY * heart.scaleX) / 2;
          heart.x = heart._x + Math.cos(int) * heart.ampX;
          heart.rotation = heart._rotation + Math.sin(int) * 30;
        }

        captureContainer.updateCache("source-over");

        // draw the updates to stage:
        // 将更新绘制到舞台
        stage.update(event);
      }

      init();
    </script>
  </body>
</html>

5. 黑客帝国矩阵雨

前端特效库,前端,html,css,javascript,web,jquery,canva可画

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>实现黑客帝国矩阵雨效果</title>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <style>
    /*basic reset*/
    * {
      margin: 0;
      padding: 0;
    }

    /*adding a black bg to the body to make things clearer*/
    body {
      background: black;
    }

    canvas {
      display: block;
    }
  </style>
</head>
<body>
  <canvas id="c"></canvas>
  <script src="cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script>
    var c = document.getElementById("c");
    var ctx = c.getContext("2d");

    //making the canvas full screen | 让画布全屏
    c.height = window.innerHeight;
    c.width = window.innerWidth;

    //chinese characters - taken from the unicode charset | 汉字 - 取自unicode字符集
    var chinese =
      "田由甲申甴电甶男甸甹町画甼甽甾甿畀畁畂畃畄畅畆畇畈畉畊畋界畍畎畏畐畑";
    //converting the string into an array of single characters | 将字符串转换为单个字符数组
    chinese = chinese.split("");

    var font_size = 10;
    var columns = c.width / font_size; //number of columns for the rain | 雨水柱数
    //an array of drops - one per column | 雨滴的阵列 - 每列一个
    var drops = [];
    //x below is the x coordinate | 下面的x是x坐标
    //1 = y co-ordinate of the drop(same for every drop initially) | 雨滴的y坐标(最初每一滴相同)
    for (var x = 0; x < columns; x++) drops[x] = 1;

    //drawing the characters | 绘制字符
    function draw() {
      //Black BG for the canvas | 画布黑色背景
      //translucent BG to show trail | 半透明背景显示轨迹
      ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
      ctx.fillRect(0, 0, c.width, c.height);

      ctx.fillStyle = "#0F0"; //green text
      ctx.font = font_size + "px arial";
      //looping over drops | 在雨滴上循环
      for (var i = 0; i < drops.length; i++) {
        //a random chinese character to print | 要打印的随机汉字
        var text = chinese[Math.floor(Math.random() * chinese.length)];
        //x = i*font_size, y = value of drops[i]*font_size
        ctx.fillText(text, i * font_size, drops[i] * font_size);

        //sending the drop back to the top randomly after it has crossed the screen | 在水滴越过屏幕后,将其随机发送回顶部
        //adding a randomness to the reset to make the drops scattered on the Y axis | 将随机性添加到重置,以使液滴分散在Y轴上
        if (drops[i] * font_size > c.height && Math.random() > 0.975)
          drops[i] = 0;

        //incrementing Y coordinate | 递增Y坐标
        drops[i]++;
      }
    }
    setInterval(draw, 33);
  </script>
</body>
</html>

6. 2024新年快乐动画特效

前端特效库,前端,html,css,javascript,web,jquery,canva可画

文件目录:

前端特效库,前端,html,css,javascript,web,jquery,canva可画

style.css

* {
  /* 采用怪异模式下的盒模型:元素的总高度和宽度包含内边距和边框(padding与border)  */
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  /* 没有滚动条 */
  overflow: hidden;
}

.section {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  min-height: 100vh;
  background: linear-gradient(135deg, #111, #222, #111);
}
.section::before {
  content: "";
  position: absolute;
  width: 30vw;
  height: 30vw;
  /* 红色边框 */
  border: 5vw solid #ff1062;
  /* 圆形边框 */
  border-radius: 50%;
  /* 为边框添加2个下拉阴影 */
  box-shadow: 0 0 0 1vw #222, 0 0 0 1.3vw #fff;
}
.section .section__title {
  position: absolute;
  transform: skewY(-7deg);
  z-index: 10;
  color: #fff;
  text-align: center;
  font-size: 9vw;
  line-height: 2em;
  text-shadow: 1px 1px 0 #ccc, 2px 2px 0 #ccc, 3px 3px 0 #ccc, 4px 4px 0 #ccc,
    5px 5px 0 #ccc, 10px 10px 0 rgba(0, 0, 0, 0.2);
  animation: floating 5s ease-in-out infinite;
}
.section .section__title span {
  text-shadow: 1px 1px 0 #ccc, 2px 2px 0 #ccc, 3px 3px 0 #ccc, 4px 4px 0 #ccc,
    5px 5px 0 #ccc, 6px 6px 0 #ccc, 7px 7px 0 #ccc, 8px 8px 0 #ccc,
    9px 9px 0 #ccc, 20px 20px 0 rgba(0, 0, 0, 0.2);
  font-weight: 700;
  font-size: 3em;
}
.section i {
  position: absolute;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 40px #fff, 0 0 80px #fff;
  animation: animate linear infinite;
}

@keyframes floating {
  0%,
  100% {
    transform: skewY(-7deg) translate(0, -20px);
  }
  50% {
    transform: skewY(-7deg) translate(0, 20px);
  }
}
/* 利用透明度设置星星明暗变化的动画效果 */
@keyframes animate {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

script.js

const stars = () => {
  const count = 200;
  const section = document.querySelector('.section');
  let i = 0;
  while (i < count) {
    // 在内存中创建一个新的空元素对象,如i或是div
    const star = document.createElement('i');
    // 定义变量x和y :通过Math.random()方法随机的使星星出现在不同位置,当然星星的定位要在文档显示区内
    const x = Math.floor(Math.random() * window.innerWidth);
    const y = Math.floor(Math.random() * window.innerHeight);
    const size = Math.random() * 4;
    // 让星星始终会在网页最左最顶端出现,通过想x和y的定位,我们要让它出现在页面各个不同的位置
    star.style.left = x + 'px';
    star.style.top = y + 'px';
    // 利用Math.random()这个方法来随机取星星的大小:为每颗星星设置随机的宽高范围为[0,5)
    star.style.width = 1 + size + 'px';
    star.style.height = 1 + size + 'px';
    
    const duration = Math.random() * 2;
    
    // 设置持续时间
    // js中除了减法计算之外,不允许随便写-。因为会混淆。所以,DOM标准规定,所有带-的css属性名,一律去横线变驼峰
    // css属性animation-duration,在js中改写为驼峰形式:animationDuration
    star.style.animationDuration = 2 + duration + 's';
    // 设置延迟 
    star.style.animationDelay = 2 + duration + 's';
    // 将新元素添加到DOM树:把新创建的节点追加到父元素下所有直接子元素的结尾
    section.appendChild(star);
    i++;
  }
}
// 调用函数
stars();

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>2024新年快乐动画特效</title>
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <section class="section">
      <h2 class="section__title">Happy New Year<br /><span>2024</span></h2>
    </section>
    <script src="js/script.js"></script>
  </body>
</html>

7. 表白特效2

前端特效库,前端,html,css,javascript,web,jquery,canva可画

代码文件过多可以私我!这里不贴出来了,需要可以私信我!

8. 新年快乐特效

前端特效库,前端,html,css,javascript,web,jquery,canva可画

文件目录:

前端特效库,前端,html,css,javascript,web,jquery,canva可画

style.css

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #161929;
    position: relative;
    overflow: hidden;
    user-select: none;
}

audio {
    opacity: 0;
}

.message {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    width: 160px;
    background-color: rgba(0, 0, 0, 0.52);
    padding: 0px 17px;
    top: 25px;
    border-radius: 6px;
    overflow: hidden;
    z-index: 1000;
    opacity: 0;
}

/* 消息提示框内容样式 */
.message p {
    line-height: 1;
    font-size:14px;
    color: #ffffff;
}

.spark {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    position: absolute;
    background-color: rgba(231, 200, 160, 0.8);
    box-shadow: 0 0 40px 0 rgba(231, 200, 160, 0.8);
    animation: glow 5s infinite;
}

.medium-spark {
    width: 7px;
    height: 7px;
}

.big-spark {
    width: 10px;
    height: 10px;
    box-shadow: 0 0 40px 0 #e9c9a0, 0 0 20px 0 #FFFFFF, inset 0 0 4px #FFFFFF;
}

.meteor {
    width: 6px;
    height: 6px;
    background-color: rgba(255, 255, 255, 0.6);
    box-shadow: 0 0 40px 0 #e9c9a0, 0 0 20px 0 #FFFFFF, inset 0 0 8px rgba(255, 255, 255, 0.6);
    top: 0;
    left: 80%;
    opacity: 0.3;
    transform: rotate(-45deg) translate(0, -50px);
    animation: meteor 7s infinite;
}

.meteor:after {
    content: '';
    width: 20vw;
    height: 6px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 20px rgba(231, 200, 160, 0.4);
    position: absolute;
    top: 0;
    left: 0;
}

@keyframes glow {
    0% {
        opacity: 0.9;
    }

    50% {
        opacity: 0.2;
    }

    100% {
        opacity: 0.9;
    }
}

@keyframes meteor {
    0% {
        transform: rotate(-45deg) translateX(0);
        opacity: 0.3;
    }

    10% {
        opacity: 1;
    }

    20% {
        transform: rotate(-45deg) translateX(-100vw);
        opacity: 0;
    }

    100% {
        transform: rotate(-45deg) translateX(-100vw);
        opacity: 0;
    }
}

main.js

// 初始化内容
var wH = window.innerHeight;
var wW = window.innerWidth;
let backgroundRendering = document.getElementById("backgroundRendering");
var generateStars = function generateStars(f) {
    for (var e = 0; e < f; e++) {
        var single = document.createElement("div");
        single.className = e % 20 == 0 ? "spark big-spark" : e % 9 == 0 ? "spark medium-spark" : "star";
        single.setAttribute("style", "top:" + Math.round(Math.random() * wH) + "px;left:" + Math.round(Math.random() * wW) + "px;animation-duration:" + (Math.round(Math.random() * 3000) + 3000) + "ms;animation-delay:" + Math.round(Math.random() * 3000) + "ms;");
        backgroundRendering.appendChild(single);
    }
};
generateStars(getRandom(140, 240));


// 全局变量 提供内容/对象存储
let fireworksCanvas = document.getElementById("fireworks");
let currentFireworks = document.createElement("canvas");
let currentObject = currentFireworks.getContext("2d");
let fireworksObject = fireworksCanvas.getContext("2d");

currentFireworks.width = fireworksCanvas.width = window.innerWidth;
currentFireworks.height = fireworksCanvas.height = window.innerHeight;
let fireworksExplosion = [];
let autoPlayFlag = false;

// 自动加载烟花动画
window.onload = function () {
    drawFireworks();
    lastTime = new Date();
    animationEffect();
    // 背景音乐
    let audio = document.getElementById('bgm');
    document.querySelector("body").onclick = function () {
        if (!autoPlayFlag) {
            audio.play();
            autoPlayFlag = true;
        }
    }
    for (let i = 0; i <= 10; i++) {
        setTimeout(function () {
            document.querySelector("body > div.message").style.opacity = i / 10;
        }, i * 60 + 2000)
    };
    for (let i = 0; i <= 10; i++) {
        setTimeout(function () {
            document.querySelector("body > div.message").style.opacity = 1 - i / 10;
            if (i == 10) {
                document.querySelector("body > div.message > p").innerHTML = "点击屏幕可快速释放烟花"
            }
        }, i * 60 + 8000)
    };
    for (let i = 0; i <= 10; i++) {
        setTimeout(function () {
            document.querySelector("body > div.message").style.opacity = i / 10;
        }, i * 60 + 8600)
    };
    for (let i = 0; i <= 10; i++) {
        setTimeout(function () {
            document.querySelector("body > div.message").style.opacity = 1 - i / 10;
        }, i * 60 + 16600)
    };
};

let lastTime;


// 烟花动画效果
function animationEffect() {
    fireworksObject.save();
    fireworksObject.fillStyle = "rgba(0,5,25,0.1)";
    fireworksObject.fillRect(0, 0, fireworksCanvas.width, fireworksCanvas.height);
    fireworksObject.restore();
    let newTime = new Date();
    if (newTime - lastTime > getRandom(10, 1600) + (window.innerHeight - 767) / 2) {
        let random = Math.random() * 100 > 15;
        let x = getRandom(0, (fireworksCanvas.width));
        let y = getRandom(0, 400);
        if (random) {
            let bigExplode = new explode(
                getRandom(0, fireworksCanvas.width),
                getRandom(1, 3),
                "#FFF",
                {
                    x: x,
                    y: y,
                }
            );
            fireworksExplosion.push(bigExplode);

        } else {
            let x = getRandom(fireworksCanvas.width / 2 - 300, fireworksCanvas.width / 2 + 300);
            let y = getRandom(0, 350);
            let bigExplode = new explode(
                getRandom(0, fireworksCanvas.width),
                getRandom(1, 3),
                "#FFF",
                {
                    x: x,
                    y: y,
                },
                document.querySelectorAll(".shape")[
                parseInt(getRandom(0, document.querySelectorAll(".shape").length))
                ]
            );
            fireworksExplosion.push(bigExplode);
        }
        lastTime = newTime;
    }
    sparks.foreach(function () {
        this.paint();
    });
    fireworksExplosion.foreach(function () {
        let that = this;
        if (!this.dead) {
            this._move();
            this._drawLight();
        } else {
            this.explodes.foreach(function (index) {
                if (!this.dead) {
                    this.moveTo();
                } else {
                    if (index === that.explodes.length - 1) {
                        fireworksExplosion[fireworksExplosion.indexOf(that)] = null;
                    }
                }
            });
        }
    });
    setTimeout(animationEffect, 16);
}

Array.prototype.foreach = function (callback) {
    for (let i = 0; i < this.length; i++) {
        if (this[i] !== null) {
            callback.apply(this[i], [i]);
        }
    }
};

fireworksCanvas.onclick = function (evt) {
    let x = evt.clientX;
    let y = evt.clientY;
    let explode1 = new explode(
        getRandom(fireworksCanvas.width / 3, (fireworksCanvas.width * 2) / 3),
        2,
        "#FFF",
        {
            x: x,
            y: y,
        }
    );
    fireworksExplosion.push(explode1);
};

let explode = function (x, r, c, explodeArea, shape) {
    this.explodes = [];
    this.x = x;
    this.y = fireworksCanvas.height + r;
    this.r = r;
    this.c = c;
    this.shape = shape || false;
    this.explodeArea = explodeArea;
    this.dead = false;
    this.ba = parseInt(getRandom(80, 200));
};
explode.prototype = {
    _paint: function () {
        fireworksObject.save();
        fireworksObject.beginPath();
        fireworksObject.arc(this.x, this.y, this.r, 0, 2 * Math.PI);
        fireworksObject.fillStyle = this.c;
        fireworksObject.fill();
        fireworksObject.restore();
    },
    _move: function () {
        let dx = this.explodeArea.x - this.x,
            dy = this.explodeArea.y - this.y;
        this.x = this.x + dx * 0.01;
        this.y = this.y + dy * 0.01;
        if (Math.abs(dx) <= this.ba && Math.abs(dy) <= this.ba) {
            if (this.shape) {
                this._shapeExplode();
            } else {
                this._explode();
            }
            this.dead = true;
        } else {
            this._paint();
        }
    },
    _drawLight: function () {
        fireworksObject.save();
        fireworksObject.fillStyle = "rgba(255,228,150,0.3)";
        fireworksObject.beginPath();
        fireworksObject.arc(this.x, this.y, this.r + 3 * Math.random() + 1, 0, 2 * Math.PI);
        fireworksObject.fill();
        fireworksObject.restore();
    },
    _explode: function () {
        let embellishmentNum = getRandom(30, 200);
        let style = getRandom(0, 10) >= 5 ? 1 : 2;
        let color;
        if (style === 1) {
            color = {
                a: parseInt(getRandom(128, 255)),
                b: parseInt(getRandom(128, 255)),
                c: parseInt(getRandom(128, 255)),
            };
        }
        let fullRange = parseInt(getRandom(300, 400));
        for (let i = 0; i < embellishmentNum; i++) {
            if (style === 2) {
                color = {
                    a: parseInt(getRandom(128, 255)),
                    b: parseInt(getRandom(128, 255)),
                    c: parseInt(getRandom(128, 255)),
                };
            }
            let a = getRandom(-Math.PI, Math.PI);
            let x = getRandom(0, fullRange) * Math.cos(a) + this.x;
            let y = getRandom(0, fullRange) * Math.sin(a) + this.y;
            let radius = getRandom(0, 2);
            let embellishment = new newEmbellishment(this.x, this.y, radius, color, x, y);
            this.explodes.push(embellishment);
        }
    },
    _shapeExplode: function () {
        let that = this;
        putValue(currentFireworks, currentObject, this.shape, 5, function (dots) {
            let dx = fireworksCanvas.width / 2 - that.x;
            let dy = fireworksCanvas.height / 2 - that.y;
            let color;
            for (let i = 0; i < dots.length; i++) {
                color = {
                    a: dots[i].a,
                    b: dots[i].b,
                    c: dots[i].c,
                };
                let x = dots[i].x;
                let y = dots[i].y;
                let radius = 1;
                let embellishment = new newEmbellishment(that.x, that.y, radius, color, x - dx, y - dy);
                that.explodes.push(embellishment);
            }
        });
    },
};

function putValue(fireworks, context, ele, dr, callback) {
    context.clearRect(0, 0, fireworksCanvas.width, fireworksCanvas.height);
    let img = new Image();
    let dots;
    if (ele.innerHTML.indexOf("img") >= 0) {
        img.src = ele.getElementsByTagName("img")[0].src;
        implode(img, function () {
            context.drawImage(
                img,
                fireworksCanvas.width / 2 - img.width / 2,
                fireworksCanvas.height / 2 - img.width / 2
            );
            let dots = gettingData(fireworks, context, dr);
            callback(dots);
        });
    } else {
        let text = ele.innerHTML;
        context.save();
        let fontSize = getRandom(3, 11);
        context.font = fontSize + "vw 宋体 bold";
        context.textAlign = "center";
        context.textBaseline = "middle";
        context.fillStyle =
            "rgba(" +
            parseInt(getRandom(128, 255)) +
            "," +
            parseInt(getRandom(128, 255)) +
            "," +
            parseInt(getRandom(128, 255)) +
            " , 1)";
        context.fillText(text, fireworksCanvas.width / 2, fireworksCanvas.height / 2);
        context.restore();
        dots = gettingData(fireworks, context, dr);
        callback(dots);
    }
}

function implode(img, callback) {
    if (img.complete) {
        callback.call(img);
    } else {
        img.onload = function () {
            callback.call(this);
        };
    }
}

function gettingData(fireworks, context, dr) {
    let imgData = context.getImageData(0, 0, fireworksCanvas.width, fireworksCanvas.height);
    context.clearRect(0, 0, fireworksCanvas.width, fireworksCanvas.height);
    let dots = [];
    for (let x = 0; x < imgData.width; x += dr) {
        for (let y = 0; y < imgData.height; y += dr) {
            let i = (y * imgData.width + x) * 4;
            if (imgData.data[i + 3] > 128) {
                let dot = {
                    x: x,
                    y: y,
                    a: imgData.data[i],
                    b: imgData.data[i + 1],
                    c: imgData.data[i + 2],
                };
                dots.push(dot);
            }
        }
    }
    return dots;
}

function getRandom(a, b) {
    return Math.random() * (b - a) + a;
}

let maxRadius = 1,
    sparks = [];

function drawFireworks() {
    for (let i = 0; i < 100; i++) {
        let spark = new newSpark();
        sparks.push(spark);
        spark.paint();
    }
}

// 新建星火位置
let newSpark = function () {
    this.x = Math.random() * fireworksCanvas.width;

    this.y = Math.random() * 2 * fireworksCanvas.height - fireworksCanvas.height;

    this.r = Math.random() * maxRadius;

};

newSpark.prototype = {
    paint: function () {
        fireworksObject.save();
        fireworksObject.beginPath();
        fireworksObject.arc(this.x, this.y, this.r, 0, 2 * Math.PI);
        fireworksObject.fillStyle = "rgba(255,255,255," + this.r + ")";
        fireworksObject.fill();
        fireworksObject.restore();
    },
};
// 烟花点缀生成
let newEmbellishment = function (centerX, centerY, radius, color, tx, ty) {
    this.tx = tx;
    this.ty = ty;
    this.x = centerX;
    this.y = centerY;
    this.dead = false;
    this.radius = radius;
    this.color = color;
};
newEmbellishment.prototype = {
    paint: function () {
        fireworksObject.save();
        fireworksObject.beginPath();
        fireworksObject.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
        fireworksObject.fillStyle =
            "rgba(" + this.color.a + "," + this.color.b + "," + this.color.c + ",1)";
        fireworksObject.fill();
        fireworksObject.restore();
    },
    moveTo: function () {
        this.ty = this.ty + 0.3;
        let dx = this.tx - this.x,
            dy = this.ty - this.y;
        this.x = Math.abs(dx) < 0.1 ? this.tx : this.x + dx * 0.1;
        this.y = Math.abs(dy) < 0.1 ? this.ty : this.y + dy * 0.1;
        if (dx === 0 && Math.abs(dy) <= 80) {
            this.dead = true;
        }
        this.paint();
    },
};

index.html文章来源地址https://www.toymoban.com/news/detail-827410.html

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>新年烟花</title>
        <link rel="icon" type="image/x-icon" href="https://pic.imgdb.cn/item/61f794ad2ab3f51d91b07a1e.png">
        <link rel="stylesheet" href="static/css/style.css">
        <link rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.3/gh-fork-ribbon.min.css" />

    </head>

    <body onselectstart="return false">
        <!-- 消息提示 -->
        <div class="message">
            <p>请单击屏幕开启背景音乐</p>
        </div>
        <!-- 流星与星火 -->
        <div id="backgroundRendering" style="z-index: 0;"></div>

        <!--烟花-->
        <canvas id="fireworks" style="z-index: 9999;">
            您的浏览器不支持canvas标签。
        </canvas>

        <!-- 背景音乐 -->
        <audio id="bgm" src="static/mp3/bgm.mp3" loop autoplay>
            您的浏览器不支持 audio 标签。
        </audio>

        <!-- 自定义内容弹窗 -->
        <div style="display: none">
            <div class="shape">🏮2024新年快乐🏮</div>
            <div class="shape">🏮恭喜发财🏮</div>
            <div class="shape">🏮万事如意🏮</div>
            <div class="shape">🏮吉庆有余🏮</div>
            <div class="shape">🏮心想事成🏮</div>
            <div class="shape">🏮喜气盈门🏮</div>
            <div class="shape">🏮阖家欢乐🏮</div>
            <div class="shape">🏮财源广进🏮</div>
        </div>
        <a class="github-fork-ribbon" href="https://github.com/uiuing/NewYearFireworks" data-ribbon="Fork me on GitHub"
            title="Fork me on GitHub">Fork me on GitHub</a>
        <script src="static/js/main.js"></script>
    </body>

</html>

到了这里,关于超好看的前端特效HTML特效、CSS特效、JS特效(第一期)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • HTML+CSS+JS做一个好看的个人网页—web网页设计作业

    个人网页(html+css+js)——网页设计作业 带背景音乐(The way I still Love you)、樱花飘落效果、粒子飘落效果 页面美观,样式精美 涉及(html+css+js),下载后可以根据自己需求进行修改 完整源码在这里获取https://download.csdn.net/download/weixin_61370021/87240400 主页 博客页面 视频页面

    2024年02月03日
    浏览(47)
  • html、css、javascript简单三剑客实现樱花飘落\雪花飘落特效汇总

    素材来源于网络稍作修改 侵删 如果觉得复制下面运行有问题或者嫌麻烦 可以直接下载源代码 欢迎fork、star 预览 话不多说,直接上代码 预览 预览

    2024年02月14日
    浏览(61)
  • HTML5+CSS3+JS小实例:快捷菜单图标按钮交互特效

    实例:快捷菜单图标按钮交互特效 技术栈:HTML+CSS+JS 字体图标库:font-awesome 效果: 源码: 【html】

    2024年02月17日
    浏览(45)
  • 前端全集Ⅰ---- HTML/CSS/JavaScript

    Web:全球广域网,也称万维网,能够通过浏览器访问的网站 Web网站的工作流程:(前后端分离模式) 网页有哪些组成? 文字、图片、视频、音频、超链接 前端代码通过浏览器的解析和渲染变成用户看到的页面,对网页进行解析渲染的部分就是浏览器的内核 Web标准 不同的浏

    2024年02月15日
    浏览(72)
  • 情人节程序员用HTML网页表白【可爱的节日贺卡ui动画特效】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript

    这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看。 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个TA站在眼前都不敢向前表白。说不出口的话就用网页告诉

    2024年02月02日
    浏览(59)
  • 前端三剑客 HTML+CSS+JavaScript ② HTML相关概念

    他们这样形容我 是暴雨浇不灭的火                                                       —— 24.4.18 学习目标         理解                 HTML的概念                 HTML的分类                 HTML的关系                 HTML的语义化         应用

    2024年04月23日
    浏览(55)
  • 前端= 结构(HTML)+ 样式(CSS)+ 行为(JavaScript)

    前端开发确实涵盖了行为(JavaScript)、样式(CSS)和结构(HTML)这三个主要方面。这三个方面在前端开发中密切协作,共同构建用户界面和用户体验。 结构(Structure):HTML 是用于定义页面结构的标记语言。通过使用 HTML 标签,可以创建网页的基本骨架,包括标题、段落、

    2024年02月13日
    浏览(59)
  • 圣诞节酷炫特效合集【含十几个HTML+CSS前端特效+34个桌面酷炫圣诞程序】

    ❤️源码获取:订阅后见文末 ❤️内容介绍:包含HTML+CSS等十几个圣诞特效;以及三十四个桌面酷炫圣诞树合集 ❤️订阅后所得如下: ❤️HTML圣诞+桌面圣诞程序效果如下: 下方展示代码仅举例其中几个 所有效果源码及文件订阅后找博主获取即可

    2024年02月04日
    浏览(49)
  • 前端随笔:HTML/CSS/JavaScript和Vue

    最近因为工作需要,需要接触一些前端的东西。之前虽然大体上了解过 HTML 、 CSS 和 JavaScript ,也知道 HTML 定义了内容、 CSS 定义了样式、 JavaScript 定义了行为,但是却没有详细的学习过前端三件套的细节。而最近的工作中需要使用 Vue ,并且想到未来的工作中使用 Vue 能够更

    2024年02月16日
    浏览(41)
  • [前端开发] 常见的 HTML CSS JavaScript 事件

    代码示例指路 常见的 HTML、CSS、JavaScript 事件代码示例 在 Web 开发中,事件是用户与网页交互的重要方式之一。通过事件,用户可以与页面元素进行交互,触发相应的功能或效果。本文将介绍常见的 HTML、CSS、JavaScript 事件,以及事件对象和事件代理的概念。 鼠标事件 鼠标事

    2024年02月19日
    浏览(53)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包