常用HTML代码

1)贴图:
2)加入连接:写上你想写的字
3)在新窗口打开连接:写上要写的字
消除连接的下划线在新窗口打开连接:
写上你想写的字
4)移动字体(走马灯):<marquee>写上你想写的字</marquee>
5)字体加粗:写上你想写的字
6)字体斜体:写上你想写的字
7)字体下划线: <u>写上你想写的字</u>
8)字体删除线: <s>写上你想写的字</s>
9)字体加大: <big>写上你想写的字</big>
10)字体控制大小:<h1>写上你想写的字</h1> (其中字体大小可从h1-h5,h1最大,h5最小)
11)更改字体颜色:<font color="#value">写上你想写的字</font>(其中value值在000000与ffffff(16位进制)之间
12)消除连接的下划线:写上你想写的字
13)贴音乐:
14)贴flash:
15)贴影视文件:
16)换行:

17)段落:<p>段落</p>
18)原始文字样式:<pre>正文</pre>
19)换帖子背景:<body background="背景图片地址">
20)固定帖子背景不随滚动条滚动:<body background="背景图片地址" body
bgproperties=fixed>
21)定制帖子背景颜色:<body bgcolor="#value">(value值见10)
22)帖子背景音乐:<bgsound="背景音乐地址" loop=infinite>
23)贴网页:


利用HTML代码制作图像滚动特效

具体操作:
选中单元格第一行所有的图像,在代码视图中,在第一个图像代码前输入 <marquee behavior="scroll" scrolldelay="160"> 在最后一个图像代码的后边输入 </marquee> 选中单元格第二行所有的图像,在代码视图中,在第一个图像代码前输入 <marquee behavior="alternate" scrolldelay="160"> 在最后一个图像代码的后边输入 </marquee> 说明: <marquee>标记用于实现文字或图像的滚动,以达到动感十足的视觉效果,使用该标记可以创建图片滚动效果。表达式为: <marquee behavior="scroll" scrolldelay="0"> <marquee>主要有下列属性 align:字幕文字对齐方式 width:字幕宽度 height:字幕高度 drection:文字滚动方向,其值可取rich up down scrolldelay:滚动延迟时间,单位为毫秒 scrollmount:滚动数量,单位为像素


网页点击爱心特效

<script>

!function(e, t, a) {
    function r() {
        for (var e = 0; e < s.length; e++) s[e].alpha <= 0 ? (t.body.removeChild(s[e].el), s.splice(e, 1)) : (s[e].y--, s[e].scale += .004, s[e].alpha -= .013, s[e].el.style.cssText = "left:" + s[e].x + "px;top:" + s[e].y + "px;opacity:" + s[e].alpha + ";transform:scale(" + s[e].scale + "," + s[e].scale + ") rotate(45deg);background:" + s[e].color + ";z-index:99999");
        requestAnimationFrame(r)
    }
    function n() {
        var t = "function" == typeof e.onclick && e.onclick;
        e.onclick = function(e) {
            t && t(),
                o(e)
        }
    }
    function o(e) {
        var a = t.createElement("div");
        a.className = "heart",
            s.push({
                el: a,
                x: e.clientX - 5,
                y: e.clientY - 5,
                scale: 1,
                alpha: 1,
                color: c()
            }),
            t.body.appendChild(a)
    }
    function i(e) {
        var a = t.createElement("style");
        a.type = "text/css";
        try {
            a.appendChild(t.createTextNode(e))
        } catch(t) {
            a.styleSheet.cssText = e
        }
        t.getElementsByTagName("head")[0].appendChild(a)
    }
    function c() {
        return "rgb(" + ~~ (255 * Math.random()) + "," + ~~ (255 * Math.random()) + "," + ~~ (255 * Math.random()) + ")"
    }
    var s = [];
    e.requestAnimationFrame = e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame ||
        function(e) {
            setTimeout(e, 1e3 / 60)
        },
        i(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),
        n(),
        r()
} (window, document);

</script>


层弹出代码

adTime=5;

chanceAd=1;

var ns=(document.layers);

var ie=(document.all);

var w3=(document.getElementById && !ie);

adCount=0;

function initAd(){
if(!ns && !ie && !w3) return;

if(ie) adDiv=eval('document.all.sponsorAdDiv.style');

else if(ns) adDiv=eval('document.layers["sponsorAdDiv"]');

else if(w3) adDiv=eval('document.getElementById("sponsorAdDiv").style');

randAd=Math.ceil(Math.random()*chanceAd);

if (ie||w3)

adDiv.visibility="visible";

else

adDiv.visibility ="show";

if(randAd==1) showAd();

}

function showAd(){
if(adCount

if (ie){documentWidth =document.body.offsetWidth/2+document.body.scrollLeft-20;

documentHeight =document.body.offsetHeight/2+document.body.scrollTop-20;}

else if (ns){documentWidth=window.innerWidth/2+window.pageXOffset-20;

documentHeight=window.innerHeight/2+window.pageYOffset-20;}

else if (w3){documentWidth=self.innerWidth/2+window.pageXOffset-20;

documentHeight=self.innerHeight/2+window.pageYOffset-20;}

adDiv.left=documentWidth-200;adDiv.top =documentHeight-200;

setTimeout("showAd()",100);}else closeAd();

}

function closeAd(){
if (ie||w3)

adDiv.display="none";

else

adDiv.visibility ="hide";

}

οnlοad=initAd;


公告弹窗代码

<!-- 弹窗公告开始-->
<script src="https://cdn.bootcss.com/sweetalert/2.1.0/sweetalert.min.js";></script>
<script>
swal('小沫Blog','公告弹窗代码演示nn','success');
</script>
<!-- 弹窗公告结束-->


HTML写流星雨

<!doctype html>
<html>

<head>
    <meta charset="utf-8" />
    <title>流星雨</title>
    <meta name="keywords" content="关键词,关键字">
    <meta name="description" content="描述信息">
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>

<body>

    <!--
        <canvas>画布 画板 画画的本子
    -->
    <canvas width=400 height=400 style="background:#000000;" id="canvas"></canvas>

    <!--
        javascript
        画笔
    --> 
    <script>
                
        //获取画板
        //doccument 当前文档
        //getElement 获取一个标签
        //ById 通过Id名称的方式
        //var 声明一片空间
        //var canvas 声明一片空间的名字叫做canvas
        var canvas = document.getElementById("canvas");
        //获取画板权限 上下文
        var ctx = canvas.getContext("2d");
        //让画板的大小等于屏幕的大小
        /*
            思路:
                1.获取屏幕对象
                2.获取屏幕的尺寸
                3.屏幕的尺寸赋值给画板
        */
        //获取屏幕对象
        var s = window.screen;
        //获取屏幕的宽度和高度
        var w = s.width;
        var h = s.height;
        //设置画板的大小
        canvas.width = w;
        canvas.height = h;

        //设置文字大小 
        var fontSize = 14;
        //计算一行有多少个文字 取整数 向下取整
        var clos = Math.floor(w/fontSize);
        //思考每一个字的坐标
        //创建数组把clos 个 0 (y坐标存储起来)
        var drops = [];
        var str = "qwertyuiopasdfghjklzxcvbnm";
        //往数组里面添加 clos 个 0
        for(var i = 0;i<clos;i++) {
            drops.push(0);
        }

        //绘制文字
        function drawString() {
            //给矩形设置填充色
            ctx.fillStyle="rgba(0,0,0,0.05)"
            //绘制一个矩形
            ctx.fillRect(0,0,w,h);

            //添加文字样式
            ctx.font = "600 "+fontSize+"px 微软雅黑";
            //设置文字颜色
            ctx.fillStyle = "#00ff00";

            for(var i = 0;i<clos;i++) {
                //x坐标
                var x = i*fontSize;
                //y坐标
                var y = drops[i]*fontSize;
                //设置绘制文字
                ctx.fillText(str[Math.floor(Math.random()*str.length)],x,y);
                if(y>h&&Math.random()>0.99){
                    drops[i] = 0;
                }
                drops[i]++;
            }
                
        }
        //定义一个定时器,每隔30毫秒执行一次
        setInterval(drawString,30);
    </script>
</body>

</html>


html+css+js实现星空特效

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

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>星空特效</title>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    body{
        overflow: hidden;
        background-color: #000;
    }
    h1{
        position: absolute;
        line-height: 50px;
        letter-spacing: 5px;
        color: #fff;
        width: 300px;
        top: 40%;
        left: 50%;
        margin-left: -200px;
        font-size: 30px;
    }
</style>

</head>
<body>

<h1>
  
</h1>
<canvas></canvas>
<script>
    var canvas=document.querySelector("canvas");
        ctx=canvas.getContext("2d");
        w=canvas.width=window.innerWidth;
        h=canvas.height=window.innerHeight;
        var canvas2=document.createElement("canvas");
            ctx2=canvas2.getContext("2d");
            canvas2.width=100;
            canvas2.height=100;
        var a=canvas2.width/2;
    var grandient=ctx.createRadialGradient(a,a,0,a,a,a);
        grandient.addColorStop(0.025,'#fff');
        grandient.addColorStop(0.1, 'hsl(220,59%,18%)');
        grandient.addColorStop(0.025, 'hsl(220,60%,33%)');
        grandient.addColorStop(1,"transparent");
        ctx2.fillStyle=grandient;
        ctx2.beginPath();
        ctx2.arc(a,a,a,0,Math.PI*2);
        ctx2.fill();
        ctx2.closePath();
        var stars=[];
        var count=0;
        function Star(){
            this.pos=Math.floor(Math.random()* w/2-100);
            this.r=Math.floor(Math.random()*100);
            this.dx=w/2;
            this.dy=h/2;
            this.rand=Math.floor(Math.random()*360);
            this.speed=this.pos/100000;
            stars[count]=this;
            count ++;
        }
        Star.prototype.draw=function(){
            var x=Math.sin(this.rand+1)* this.pos+this.dx;
                y=Math.cos(this.rand)*this.pos/2+this.dy;
            ctx.drawImage(canvas2,x-this.r/2,y-this.r/2,this.r,this.r);
            this.rand=this.rand+this.speed;
        }
        for(var i=0;i<1000;i++){
            new Star();
        }
        function anmit(){
            ctx.clearRect(0,0,w,h);
            for(var i=0;i<stars.length;i++){
                stars[i].draw();
            }
            requestAnimationFrame(anmit);
        }
        anmit();
        var oH=document.getElementsByTagName("h1")[0];
        var arr=["这世间过于俗气","不像你一般","浩瀚星辰,温柔婉转"],
            index=0,
            arrLen=arr.length,
            strLen=arr[0].length;
            pos=0,
            row=0,
            str="",
            timer=null;
        function print() {
            while(row<index){
                str=str+arr[row]+"<br>";
                row++;
            }
            oH.innerHTML=str+arr[index].substring(0,pos);
            if(pos==strLen){
                index++;
                pos =0;
                if(index<arr.length){
                    strLen=arr[index].length;
                    timer=setTimeout(print,250);
                }
            }else{
                pos++;
                timer=setTimeout(print,250);
            }
        }
        setTimeout(print,250);
</script>

</body>
</html>


烟花源代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas烟花</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">

body{
    padding: 0;
    margin: 0;
    background: #000;
}

</style>
</head>
<body>

<canvas id="canvas">Canvas is not supported in your browser.</canvas>
<script type="text/javascript">
    window.requestAnimationFrame = (function(){
        return window.requestAnimationFrame ||
               window.webkitRequestAnimationFrame ||
               window.mozRequestAnimationFrame ||
               function(callback){
                    window.setTimeout(callback,1000/60);
               }
    })();

    var canvas = document.getElementById("canvas"),
        ctx = canvas.getContext("2d"),
        cw = window.innerWidth,
        ch = window.innerHeight,
        fireworks = [], 
        particles = [], 
        hue = 120, 
        timerTotal = 80, 
        timerTick = 0;

    canvas.width = cw;
    canvas.height = ch;
    function random(min,max){
        return Math.random()*(max-min)+min;
    }

    function caculateDistance(sx,sy,tx,ty){
        var xDistance = sx-tx,
            yDistance = sy-ty;
        return Math.sqrt(Math.pow(xDistance,2)+Math.pow(yDistance,2));
    }

    function Firework(sx,sy,tx,ty){
        this.x = sx; 
        this.y = sy; 
        this.sx = sx; 
        this.sy = sy; 
        this.tx= tx; 
        this.ty = ty; 
        this.distanceToTarget = caculateDistance(sx,sy,tx,ty); 
        this.distanceTraveled = 0; 
        this.coordinates = []; 
        this.coordinatesCount = 3;
        while(this.coordinatesCount--){
            this.coordinates.push([this.x,this.y]);
        }
        this.angle = Math.atan2(ty-sy,tx-sx); 
        this.speed = 2; 
        this.acceleration = 1.05 
        this.brightness = random(50,70); 
        this.targetRadius = 1; 
    }

    Firework.prototype.update = function(index){
        this.coordinates.pop(); 
        this.coordinates.unshift([this.x,this.y]);

        if(this.targetRadius<8) {
            this.targetRadius += 0.3;
        } else {
            this.targetRadius = 1;
        }
        this.speed *= this.acceleration; 
        var vx = Math.cos(this.angle)*this.speed,
            vy = Math.sin(this.angle)*this.speed; 
        this.distanceTraveled = caculateDistance(this.sx,this.sy,this.x+vx,this.y+vy); 
        if(this.distanceTraveled>=this.distanceToTarget){
            createParticles(this.tx,this.ty);
            fireworks.splice(index,1);
        }else{
            this.x += vx;
            this.y += vy;
        }
    }

    Firework.prototype.draw = function(){

        ctx.beginPath();
        ctx.moveTo(this.coordinates[this.coordinates.length-1][0],this.coordinates[this.coordinates.length-1][1]);
        ctx.lineTo(this.x,this.y);
        ctx.strokeStyle = 'hsl('+hue+',100%,'+this.brightness+'%)';
        ctx.stroke();

        ctx.beginPath();
        ctx.arc(this.tx,this.ty,this.targetRadius,0,Math.PI*2);
        ctx.stroke();
    }

    function Particle(x,y){
        this.x = x;
        this.y = y;
        this.coordinates = [];
        this.coordinatesCount = 5;
        while(this.coordinatesCount--){
            this.coordinates.push([this.x,this.y]);
        }
        this.angle = random(0,2*Math.PI); 
        this.speed = random(1,10); 
        this.friction = 0.95 
        this.gravity = 1; 
        this.hue = random(hue-20,hue+20); 
        this.brightness = random(50,80); 
        this.alpha = 1; 
        this.decay = random(0.015,0.03); 
    }

    Particle.prototype.update = function(index){
        this.coordinates.pop(); 
        this.coordinates.unshift([this.x,this.y]);
        this.speed *= this.friction;
        this.x += Math.cos(this.angle) * this.speed;
        this.y += Math.sin(this.angle) * this.speed + this.gravity;
        this.alpha -= this.decay;
        if(this.alpha<=this.decay){
            particles.splice(index,1);
        }
    }

    Particle.prototype.draw = function(){
        ctx.beginPath();
        ctx.moveTo(this.coordinates[this.coordinates.length-1][0],this.coordinates[this.coordinates.length-1][1]);
        ctx.lineTo(this.x,this.y);
        ctx.strokeStyle = 'hsla('+this.hue+',100%,'+this.brightness+'%,'+this.alpha+')';
        ctx.stroke();
    }

    function createParticles(x,y){
        var particleCount = 30;
        while(particleCount--) {
            particles.push(new Particle(x,y));
        }
    }

    function loop(){
        requestAnimationFrame(loop);
        hue += 0.5;
        ctx.globalCompositeOperation = 'destination-out';
        ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
        ctx.fillRect( 0, 0, cw, ch );
        ctx.globalCompositeOperation = 'lighter';
        var i = fireworks.length;
        while(i--) {
            fireworks[i].draw();
            fireworks[i].update(i);
        }
        var i = particles.length;
        while(i--) {
            particles[i].draw();
            particles[i].update(i);
        }
        if(timerTick >= timerTotal) {
            fireworks.push(new Firework(cw/2,ch,random(0,cw),random(0,ch/2)));
            timerTick = 0;
        } else {
            timerTick++;
        }
    }
    window.onload = loop;
</script>

</body>
</html>


html爱心特效代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
html, body {
height: 100%;
padding: 0;
margin: 0;
background: #000;
}
canvas {
position: absolute;
width: 100%;
height: 100%;
}
</style>
</HEAD>

<BODY>
<canvas id="pinkboard"></canvas>
<script>
/*

  • Settings
    */

var settings = {
particles: {

length:   500, // maximum amount of particles
duration:   2, // particle duration in sec
velocity: 100, // particle velocity in pixels/sec
effect: -0.75, // play with this for a nice effect
size:      30, // particle size in pixels

},
};

/*

  • RequestAnimationFrame polyfill by Erik Möller
    */

(function(){var b=0;var c=["ms","moz","webkit","o"];for(var a=0;a<c.length&&!window.requestAnimationFrame;++a){window.requestAnimationFrame=window[c[a]+"RequestAnimationFrame"];window.cancelAnimationFrame=window[c[a]+"CancelAnimationFrame"]||window[c[a]+"CancelRequestAnimationFrame"]}if(!window.requestAnimationFrame){window.requestAnimationFrame=function(h,e){var d=new Date().getTime();var f=Math.max(0,16-(d-b));var g=window.setTimeout(function(){h(d+f)},f);b=d+f;return g}}if(!window.cancelAnimationFrame){window.cancelAnimationFrame=function(d){clearTimeout(d)}}}());

/*

  • Point class
    */

var Point = (function() {
function Point(x, y) {

this.x = (typeof x !== 'undefined') ? x : 0;
this.y = (typeof y !== 'undefined') ? y : 0;

}
Point.prototype.clone = function() {

return new Point(this.x, this.y);

};
Point.prototype.length = function(length) {

if (typeof length == 'undefined')
  return Math.sqrt(this.x * this.x + this.y * this.y);
this.normalize();
this.x *= length;
this.y *= length;
return this;

};
Point.prototype.normalize = function() {

var length = this.length();
this.x /= length;
this.y /= length;
return this;

};
return Point;
})();

/*

  • Particle class
    */

var Particle = (function() {
function Particle() {

this.position = new Point();
this.velocity = new Point();
this.acceleration = new Point();
this.age = 0;

}
Particle.prototype.initialize = function(x, y, dx, dy) {

this.position.x = x;
this.position.y = y;
this.velocity.x = dx;
this.velocity.y = dy;
this.acceleration.x = dx * settings.particles.effect;
this.acceleration.y = dy * settings.particles.effect;
this.age = 0;

};
Particle.prototype.update = function(deltaTime) {

this.position.x += this.velocity.x * deltaTime;
this.position.y += this.velocity.y * deltaTime;
this.velocity.x += this.acceleration.x * deltaTime;
this.velocity.y += this.acceleration.y * deltaTime;
this.age += deltaTime;

};
Particle.prototype.draw = function(context, image) {

function ease(t) {
  return (--t) * t * t + 1;
}
var size = image.width * ease(this.age / settings.particles.duration);
context.globalAlpha = 1 - this.age / settings.particles.duration;
context.drawImage(image, this.position.x - size / 2, this.position.y - size / 2, size, size);

};
return Particle;
})();

/*

  • ParticlePool class
    */

var ParticlePool = (function() {
var particles,

  firstActive = 0,
  firstFree   = 0,
  duration    = settings.particles.duration;

function ParticlePool(length) {

// create and populate particle pool
particles = new Array(length);
for (var i = 0; i < particles.length; i++)
  particles[i] = new Particle();

}
ParticlePool.prototype.add = function(x, y, dx, dy) {

particles[firstFree].initialize(x, y, dx, dy);

// handle circular queue
firstFree++;
if (firstFree   == particles.length) firstFree   = 0;
if (firstActive == firstFree       ) firstActive++;
if (firstActive == particles.length) firstActive = 0;

};
ParticlePool.prototype.update = function(deltaTime) {

var i;

// update active particles
if (firstActive < firstFree) {
  for (i = firstActive; i < firstFree; i++)
    particles[i].update(deltaTime);
}
if (firstFree < firstActive) {
  for (i = firstActive; i < particles.length; i++)
    particles[i].update(deltaTime);
  for (i = 0; i < firstFree; i++)
    particles[i].update(deltaTime);
}

// remove inactive particles
while (particles[firstActive].age >= duration && firstActive != firstFree) {
  firstActive++;
  if (firstActive == particles.length) firstActive = 0;
}

};
ParticlePool.prototype.draw = function(context, image) {

// draw active particles
if (firstActive < firstFree) {
  for (i = firstActive; i < firstFree; i++)
    particles[i].draw(context, image);
}
if (firstFree < firstActive) {
  for (i = firstActive; i < particles.length; i++)
    particles[i].draw(context, image);
  for (i = 0; i < firstFree; i++)
    particles[i].draw(context, image);
}

};
return ParticlePool;
})();

/*

  • Putting it all together
    */

(function(canvas) {
var context = canvas.getContext('2d'),

  particles = new ParticlePool(settings.particles.length),
  particleRate = settings.particles.length / settings.particles.duration, // particles/sec
  time;

// get point on heart with -PI <= t <= PI
function pointOnHeart(t) {

return new Point(
  160 * Math.pow(Math.sin(t), 3),
  130 * Math.cos(t) - 50 * Math.cos(2 * t) - 20 * Math.cos(3 * t) - 10 * Math.cos(4 * t) + 25
);

}

// creating the particle image using a dummy canvas
var image = (function() {

var canvas  = document.createElement('canvas'),
    context = canvas.getContext('2d');
canvas.width  = settings.particles.size;
canvas.height = settings.particles.size;
// helper function to create the path
function to(t) {
  var point = pointOnHeart(t);
  point.x = settings.particles.size / 2 + point.x * settings.particles.size / 350;
  point.y = settings.particles.size / 2 - point.y * settings.particles.size / 350;
  return point;
}
// create the path
context.beginPath();
var t = -Math.PI;
var point = to(t);
context.moveTo(point.x, point.y);
while (t < Math.PI) {
  t += 0.01; // baby steps!
  point = to(t);
  context.lineTo(point.x, point.y);
}
context.closePath();
// create the fill
context.fillStyle = '#ea80b0';
context.fill();
// create the image
var image = new Image();
image.src = canvas.toDataURL();
return image;

})();

// render that thing!
function render() {

// next animation frame
requestAnimationFrame(render);

// update time
var newTime   = new Date().getTime() / 1000,
    deltaTime = newTime - (time || newTime);
time = newTime;

// clear canvas
context.clearRect(0, 0, canvas.width, canvas.height);

// create new particles
var amount = particleRate * deltaTime;
for (var i = 0; i < amount; i++) {
  var pos = pointOnHeart(Math.PI - 2 * Math.PI * Math.random());
  var dir = pos.clone().length(settings.particles.velocity);
  particles.add(canvas.width / 2 + pos.x, canvas.height / 2 - pos.y, dir.x, -dir.y);
}

// update and draw particles
particles.update(deltaTime);
particles.draw(context, image);

}

// handle (re-)sizing of the canvas
function onResize() {

canvas.width  = canvas.clientWidth;
canvas.height = canvas.clientHeight;

}
window.onresize = onResize;

// delay rendering bootstrap
setTimeout(function() {

onResize();
render();

}, 10);
})(document.getElementById('pinkboard'));
</script>
</BODY>
</HTML>


html跳动的心实现代码

<style>

    .box{
        width: 200px;
        height: 400px;
        position: relative;
        margin: 30px auto;
        transform: all 0.5s;

    }
    @keyframes moves{
        from{box-shadow: 0 0 0 transparent;}
        30%{box-shadow: 0 0 50px rgb(236, 57, 57);}
        60%{box-shadow: 0 0 80px rgb(241, 97, 97);}
    }
    .box>div{
        animation: moves 1s infinite;
        transition-delay: 1s;
    }
    .box_1{
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: red;
        border-bottom: 0;

    }
    div:nth-child(2){
        position: absolute;
        top: 0;
        left:80px;
    }
    .box_2{
        width: 100px;
        height: 130px;
        background: red;
        transform: rotateZ(57deg);
       
    }
    .box>div:nth-child(3){
        position: absolute;
        top: 2px;
        right: 31px;
        background-color: red;
        border-radius: 50% 50% 0% 0;
        box-shadow: 0 0 0 transparent !important;
    }
    .box>div:last-child{
        position: absolute;
        top: 4px;
        left: 12px;
        transform: rotateZ(122deg);
        border-radius: 0 0% 50% 50%;
    }
    /* .box:hover>div{
        box-shadow: 0 0 10px rgb(241, 97, 97);
    } */
</style>

</head>
<body>

<div class="box">
    <div class="box_1"></div>
    <div class="box_1"></div>
    <div class="box_2"></div>
    <div class="box_2"></div>
</div>

</body>
</html>

最后修改:2021 年 08 月 15 日 07 : 57 AM
如果觉得我的文章对你有用,请随意赞赏