绚烂的烟花秀

最新推荐文章于 2024-08-26 14:18:59 发布

一条小锦吕*

最新推荐文章于 2024-08-26 14:18:59 发布

阅读量1k

点赞数 29

文章标签： css 经验分享 html

本文链接：https://blog.csdn.net/weixin_51009925/article/details/140660483

版权

绚丽的烟花秀，不是过年也能有自己的独特的浪漫：

可以发送给亲朋好友、情侣浪漫必备

部分html代码如下：

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>2024 新年快乐</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#000000">
<link rel="shortcut icon" type="image/png" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/firework-burst-icon-v2.png">
<link rel="icon" type="image/png" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/firework-burst-icon-v2.png">
<link rel="apple-touch-icon-precomposed" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/firework-burst-icon-v2.png">
<meta name="msapplication-TileColor" content="#000000">
<meta name="msapplication-TileImage" content="https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/firework-burst-icon-v2.png">
<link href="https://fonts.googleapis.com/css?family=Russo+One" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="./style.css">

</head>
<body>
<h6 align="center">Shirley 新年快乐天天开心</h6>


<div style="height: 0; width: 0; position: absolute; visibility: hidden;">
   <svg xmlns="http://www.w3.org/2000/svg">
       <symbol id="icon-play" viewBox="0 0 24 24">
           <path d="M8 5v14l11-7z"/>
       </symbol>
       <symbol id="icon-pause" viewBox="0 0 24 24">
           <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>
       </symbol>
       <symbol id="icon-close" viewBox="0 0 24 24">
           <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
       </symbol>
       <symbol id="icon-settings" viewBox="0 0 24 24">

部分css样式如下：

* {
position: relative;
box-sizing: border-box;
}

html,
body {
height: 100%;
}

html {
background-color: #000;
}

body {
overflow: hidden;
color: rgba(255, 255, 255, 0.5);
font-family: "Russo One", arial, sans-serif;
line-height: 1.25;
letter-spacing: 0.06em;
}

.hide {
opacity: 0;
visibility: hidden;
}

.remove {
display: none !important;
}

.blur {
filter: blur(12px);
}

.container {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
完整代码实现效果：