css3圣诞节喜庆文字祝福代码

css3圣诞节喜庆文字祝福代码

在这里插入图片描述


<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>css3圣诞节喜庆文字祝福代码演示_大头网</title>

<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Calistoga&amp;display=swap'>

<style>
@charset "UTF-8";
/* DaTouWang URL: www.datouwang.com */
body {
  align-content: center;
  align-items: center;
  background-color: #9f0000;
  background-blend-mode: soft-light;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAMCAYAAABr5z2BAAAEt2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS41LjAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iCiAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyIKICAgIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIKICAgIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIKICAgIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIgogICAgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIKICAgdGlmZjpJbWFnZUxlbmd0aD0iMTIiCiAgIHRpZmY6SW1hZ2VXaWR0aD0iMTYiCiAgIHRpZmY6UmVzb2x1dGlvblVuaXQ9IjIiCiAgIHRpZmY6WFJlc29sdXRpb249IjcyLjAiCiAgIHRpZmY6WVJlc29sdXRpb249IjcyLjAiCiAgIGV4aWY6UGl4ZWxYRGltZW5zaW9uPSIxNiIKICAgZXhpZjpQaXhlbFlEaW1lbnNpb249IjEyIgogICBleGlmOkNvbG9yU3BhY2U9IjEiCiAgIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiCiAgIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIKICAgeG1wOk1vZGlmeURhdGU9IjIwMTktMTItMDhUMjE6NDc6MzAtMDU6MDAiCiAgIHhtcDpNZXRhZGF0YURhdGU9IjIwMTktMTItMDhUMjE6NDc6MzAtMDU6MDAiPgogICA8eG1wTU06SGlzdG9yeT4KICAgIDxyZGY6U2VxPgogICAgIDxyZGY6bGkKICAgICAgc3RFdnQ6YWN0aW9uPSJwcm9kdWNlZCIKICAgICAgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWZmaW5pdHkgUGhvdG8gKFNlcCAyNiAyMDE5KSIKICAgICAgc3RFdnQ6d2hlbj0iMjAxOS0xMi0wOFQyMTo0NzozMC0wNTowMCIvPgogICAgPC9yZGY6U2VxPgogICA8L3htcE1NOkhpc3Rvcnk+CiAgPC9yZGY6RGVzY3JpcHRpb24+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgo8P3hwYWNrZXQgZW5kPSJyIj8+5GSwIgAAAYFpQ0NQc1JHQiBJRUM2MTk2Ni0yLjEAACiRdZHPK0RRFMc/M8ivEcXCwuIlrNCgJjbKTEJJ0xjl1+bNm19qZrzee9Jkq2wVJTZ+LfgL2CprpYiUbGysiQ3Tc543NZI5t3PP537vPad7zwVvNKNlzUo/ZHOWERkLKrNz80r1Mz5q8dJDnaqZ+kg4PElZ+7jD48SbHqdW+XP/Wn08YWrgqREe1nTDEh4Xnly1dIe3hVu0tBoXPhXuNuSCwreOHnP5xeGUy18OG9FICLxNwkrqF8d+sZY2ssLycjqymRWteB/nJb5EbmZaYrt4GyYRxgiiMMEoIQL0MSRzQLrTT6+sKJPv/8mfYllyNZl18hgskSKNRbeoK1I9ITEpekJGhrzT/799NZMD/W51XxCqnmz7rROqt6Cwadufh7ZdOIKKR7jIlfKXD2DwXfTNktaxD43rcHZZ0mI7cL4BrQ+6aqg/UoW4N5mE1xNomIPma6hbcHtW3Of4HqJr8lVXsLsHXXK+cfEbHNtnxK9FMLsAAAAJcEhZcwAACxMAAAsTAQCanBgAAAD5SURBVCiRjdG/K8VRGMfx1zm+uIrtGmQx3sHsRzFc+QuU/0Bd+QPkf5BJKaNBBhaTzSKSgZ3uYLk2CsnkGs4p33S/l3edep7P86PnPE/AIqbxhBMM+OEq+7Ml7QsrmMRjxCp2UUfL36xhAjuYj5jKgX28YKtP8SbesZf9kYgaAiKOcJO7wyvesr2NOxzmfAgFhkvCEE7RxCjaKPCAY5xjsDxSkYtCSRvDGRZwn7UGLnLTMiHm0X8zjoPcOGS73iMvFNJSejGHZemMMxU5H1H6ZxVNLFXEAjoFbvs0aEh7qqJNWtozuj3eJa4rYh3UonTn9Sz+ly428PkN26wzih1XTLkAAAAASUVORK5CYII=");
  background-repeat: repeat;
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: center;
  margin: 0;
  overflow-x: hidden;
  width: 100vw;
}
body * {
  box-sizing: border-box;
}

.container {
  align-items: center;
  background-color: #005e1c;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAMCAYAAABr5z2BAAAEt2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS41LjAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iCiAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyIKICAgIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIKICAgIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIKICAgIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIgogICAgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIKICAgdGlmZjpJbWFnZUxlbmd0aD0iMTIiCiAgIHRpZmY6SW1hZ2VXaWR0aD0iMTYiCiAgIHRpZmY6UmVzb2x1dGlvblVuaXQ9IjIiCiAgIHRpZmY6WFJlc29sdXRpb249IjcyLjAiCiAgIHRpZmY6WVJlc29sdXRpb249IjcyLjAiCiAgIGV4aWY6UGl4ZWxYRGltZW5zaW9uPSIxNiIKICAgZXhpZjpQaXhlbFlEaW1lbnNpb249IjEyIgogICBleGlmOkNvbG9yU3BhY2U9IjEiCiAgIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiCiAgIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIKICAgeG1wOk1vZGlmeURhdGU9IjIwMTktMTItMDhUMjE6NDc6MzAtMDU6MDAiCiAgIHhtcDpNZXRhZGF0YURhdGU9IjIwMTktMTItMDhUMjE6NDc6MzAtMDU6MDAiPgogICA8eG1wTU06SGlzdG9yeT4KICAgIDxyZGY6U2VxPgogICAgIDxyZGY6bGkKICAgICAgc3RFdnQ6YWN0aW9uPSJwcm9kdWNlZCIKICAgICAgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWZmaW5pdHkgUGhvdG8gKFNlcCAyNiAyMDE5KSIKICAgICAgc3RFdnQ6d2hlbj0iMjAxOS0xMi0wOFQyMTo0NzozMC0wNTowMCIvPgogICAgPC9yZGY6U2VxPgogICA8L3htcE1NOkhpc3Rvcnk+CiAgPC9yZGY6RGVzY3JpcHRpb24+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgo8P3hwYWNrZXQgZW5kPSJyIj8+5GSwIgAAAYFpQ0NQc1JHQiBJRUM2MTk2Ni0yLjEAACiRdZHPK0RRFMc/M8ivEcXCwuIlrNCgJjbKTEJJ0xjl1+bNm19qZrzee9Jkq2wVJTZ+LfgL2CprpYiUbGysiQ3Tc543NZI5t3PP537vPad7zwVvNKNlzUo/ZHOWERkLKrNz80r1Mz5q8dJDnaqZ+kg4PElZ+7jD48SbHqdW+XP/Wn08YWrgqREe1nTDEh4Xnly1dIe3hVu0tBoXPhXuNuSCwreOHnP5xeGUy18OG9FICLxNwkrqF8d+sZY2ssLycjqymRWteB/nJb5EbmZaYrt4GyYRxgiiMMEoIQL0MSRzQLrTT6+sKJPv/8mfYllyNZl18hgskSKNRbeoK1I9ITEpekJGhrzT/799NZMD/W51XxCqnmz7rROqt6Cwadufh7ZdOIKKR7jIlfKXD2DwXfTNktaxD43rcHZZ0mI7cL4BrQ+6aqg/UoW4N5mE1xNomIPma6hbcHtW3Of4HqJr8lVXsLsHXXK+cfEbHNtnxK9FMLsAAAAJcEhZcwAACxMAAAsTAQCanBgAAAD5SURBVCiRjdG/K8VRGMfx1zm+uIrtGmQx3sHsRzFc+QuU/0Bd+QPkf5BJKaNBBhaTzSKSgZ3uYLk2CsnkGs4p33S/l3edep7P86PnPE/AIqbxhBMM+OEq+7Ml7QsrmMRjxCp2UUfL36xhAjuYj5jKgX28YKtP8SbesZf9kYgaAiKOcJO7wyvesr2NOxzmfAgFhkvCEE7RxCjaKPCAY5xjsDxSkYtCSRvDGRZwn7UGLnLTMiHm0X8zjoPcOGS73iMvFNJSejGHZemMMxU5H1H6ZxVNLFXEAjoFbvs0aEh7qqJNWtozuj3eJa4rYh3UonTn9Sz+ly428PkN26wzih1XTLkAAAAASUVORK5CYII=");
  background-blend-mode: soft-light;
  border-bottom: 10px solid white;
  border-top: 10px double white;
  display: flex;
  justify-content: center;
  position: relative;
  width: 100%;
}
.container::after {
  text-shadow: -16em 0 white, -14.6666666667em 0 white, -13.3333333333em 0 white, -12em 0 white, -10.6666666667em 0 white, -9.3333333333em 0 white, -8em 0 white, -6.6666666667em 0 white, -5.3333333333em 0 white, -4em 0 white, -2.6666666667em 0 white, -1.3333333333em 0 white, 0em 0 white, 1.3333333333em 0 white, 2.6666666667em 0 white, 4em 0 white, 5.3333333333em 0 white, 6.6666666667em 0 white, 8em 0 white, 9.3333333333em 0 white, 10.6666666667em 0 white, 12em 0 white, 13.3333333333em 0 white, 14.6666666667em 0 white, 16em 0 white;
  color: white;
  content: "▼";
  font-size: 2em;
  left: 50%;
  position: absolute;
  top: 110%;
  transform: translate(-50%, 0);
}
.container::before {
  text-shadow: -16em 0 white, -14.6666666667em 0 white, -13.3333333333em 0 white, -12em 0 white, -10.6666666667em 0 white, -9.3333333333em 0 white, -8em 0 white, -6.6666666667em 0 white, -5.3333333333em 0 white, -4em 0 white, -2.6666666667em 0 white, -1.3333333333em 0 white, 0em 0 white, 1.3333333333em 0 white, 2.6666666667em 0 white, 4em 0 white, 5.3333333333em 0 white, 6.6666666667em 0 white, 8em 0 white, 9.3333333333em 0 white, 10.6666666667em 0 white, 12em 0 white, 13.3333333333em 0 white, 14.6666666667em 0 white, 16em 0 white;
  color: white;
  content: "⤫";
  font-size: 2em;
  left: 50%;
  position: absolute;
  bottom: 110%;
  transform: translate(-50%, 0);
}

.diamond {
  animation: rotate 1.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) alternate infinite;
  border: 8.75px solid white;
  flex-shrink: 0;
  height: 25px;
  transform: rotate(45deg);
  width: 25px;
}

.seasons-greetings {
  color: white;
  font-family: Calistoga, serif;
  font-size: 8vw;
  font-weight: bold;
  letter-spacing: 0.05em;
  margin: 1em;
  text-align: center;
  width: 100%;
}

.star {
  animation: grow 1.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) alternate infinite;
  flex-shrink: 0;
  height: 100px;
  margin: 25px;
  position: relative;
  width: 100px;
}
.star .star-half {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.star .star-half::before {
  background-color: white;
  bottom: 50%;
  box-shadow: 37.3333333333px 20.6666666667px 0 white;
  content: "";
  height: 16.666%;
  left: -4px;
  position: absolute;
  transform: skew(45deg);
  transform-origin: top left;
  width: 33.333%;
}
.star .star-half::after {
  background-color: white;
  bottom: 50%;
  box-shadow: -37.3333333333px 20.6666666667px 0 white;
  content: "";
  height: 16.666%;
  right: -4px;
  position: absolute;
  transform: skew(-45deg);
  transform-origin: top left;
  width: 33.333%;
}
.star .star-half:nth-child(2) {
  transform: rotate(90deg);
  transform-origin: 50% calc(50% + 2px);
}

@keyframes grow {
  from {
    transform: scale(0.5);
  }
  to {
    transform: scale(1);
  }
}
@keyframes rotate {
  from {
    transform: rotate(45deg) scale(1);
  }
  to {
    transform: rotate(135deg) scale(0.5);
  }
}
</style>

</head>
<body>

<div class="container">
    <div class="diamond"></div>
    <div class="star">
        <div class="star-half"></div>
        <div class="star-half"></div>
    </div>
    <div class="diamond"></div>
    <div class="star">
        <div class="star-half"></div>
        <div class="star-half"></div>
    </div>
    <div class="diamond"></div>
    <div class="star">
        <div class="star-half"></div>
        <div class="star-half"></div>
    </div>
    <div class="diamond"></div>
    <div class="star">
        <div class="star-half"></div>
        <div class="star-half"></div>
    </div>
    <div class="diamond"></div>
    <div class="star">
        <div class="star-half"></div>
        <div class="star-half"></div>
    </div>
    <div class="diamond"></div>    
</div>
<h1 class="seasons-greetings">Merry Christmas!</h1>
<div class="container">
	<div class="diamond"></div>
    <div class="star">
        <div class="star-half"></div>
        <div class="star-half"></div>
    </div>
    <div class="diamond"></div>
    <div class="star">
        <div class="star-half"></div>
        <div class="star-half"></div>
    </div>
    <div class="diamond"></div>
    <div class="star">
        <div class="star-half"></div>
        <div class="star-half"></div>
    </div>
    <div class="diamond"></div>
    <div class="star">
        <div class="star-half"></div>
        <div class="star-half"></div>
    </div>
    <div class="diamond"></div>
    <div class="star">
        <div class="star-half"></div>
        <div class="star-half"></div>
    </div>
    <div class="diamond"></div>    
</div>

</body>
</html>
圣诞节 祝福网站 全部源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <!--design by www.618cc.com--> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>圣诞节祝福! 西安工程大学艺纺论坛</title> <style type="text/css"> <!-- body { margin: 0px; padding:0px; background:url(img/bbgg.jpg) repeat-x; } img {border:none;} form { padding:0; margin:0} a:link { color: #FF3366; text-decoration: none; } a:visited { text-decoration: none; color: #FF3366; } a:hover { text-decoration: underline; color: #999999; } a:active { text-decoration: none; } .STYLE1 {color: #003366} --> </style> <script> function click() { if (event.button==2) { alert('艺纺论坛祝大家梦想成真!www.efangbbs.com ') } } document.onmousedown=click </script> <SCRIPT> <!-- var lusername =location.search.split("=")[1]; if(!lusername){ lusername="艺纺论坛"; } else{ lusername=unescape(lusername); } function check(obj){ if (obj.stra.value.length>28) { alert('晕,咋还有这么长啊?~'); return false; } if (obj.stra.value.length==0) { alert('还没填姓名呀'); return false; } var url ="http://"+location.host+location.pathname+"?stra="+escape(obj.stra.value); window.clipboardData.setData("Text",url); alert('网址已生成并替您复制好了,直接按 Ctrl+V 粘贴到QQ / MSN等即时通信工具或邮箱就可以了!'); window.location.replace(url); return false; } --> </SCRIPT> <!--SCRIPT language=JavaScript src="snow.js"></SCRIPT--> <BGSOUND loop=infinite src="jinbells.mid" tppabs="jinbells.mid"> </head> <body> <div style="width:1000px; margin:0 auto; height:auto"> <div style="height:626px;"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td style="height:626px; width:104px;" rowspan="2"><img src="img/01.jpg" width="104" height="626" /></td> <td valign="top" style="height:350px; width:792px; background:url(img/001.gif) no-repeat"> <div style="padding-left:95px; padding-top:190px; font-weight:bold; font-size:30px; color:#CC3366; font-family:"黑体";">亲爱的:<font color="#1E9AFF"><SCRIPT> var b=document;var c=lusername;b.write(c); </SCRIPT></font></div> </td> <td style="height:626px; width:104px;" rowspan="2"><img src="img/003.jpg" width="104" height="626" /></td> </tr> <tr> <td valign="top" style="height:276px; width:792px; background:url(img/002.jpg) no-repeat"> <div style="padding-left:180px; padding-top:230px; font-weight:bold; font-size:14px; color:#CC3366;">亲爱的:<SCRIPT> var b=document;var c=lusername;b.write(c); </SCRIPT>,圣诞快乐!</div> </td> </tr> </table> </div> <div style="background:url(img/bg.gif) repeat-y; height:auto; text-align:center; padding-top:20px;"><img src="img/004.gif" /></div> <div style="background:url(img/bg.gif) repeat-y; height:auto; text-align:center; padding-top:25px;"><img src="img/005.gif" /></div> <div style=" background:url(img/006.gif) no-repeat; height:343px;"> <div style="padding-left:250px; padding-top:60px; font-weight:bold; line-height:18px; font-size:12px; color:#CC3366;">圣诞节快要到了,赶快在第一时间给你的朋友们送上你的祝福吧,<br /> 他们一定会很惊喜的!在下面填入你朋友的姓名,点击获得祝福网页,<br /> 就可以得到一个属于你的祝福网页,里面就是你朋友的名字哦!<br /> 赶紧发送给他们让他们得到一个意想不到的惊喜吧! <br /> <form name="newinfo_form" id="newinfo_form" onSubmit="return check(this)"> <strong><font color=red>在此输入您要祝福人的姓名:</font></strong> <input name="stra" type="text" id="stra" tabindex="1" value="" size="16" style="width:100px;">   <input type="submit" value="点此提交" name="Submit" /> </form></div> <div style="padding-right:120px; padding-top:80px; font-size:12px; text-align:right; color:#CC3366;">你可以直接发送网址:http://www.efangbbs.com/happy/?stra=<span class="STYLE1">###</span> 给你朋友 (把<span class="STYLE1">###</span>替换成你朋友名字即可)<br /> <br /> <br /> <br /> <br /> <br /> 创意支持:<a href="http://www.efangbbs.com" target="_blank">西安工程大学艺纺论坛</a> <a href="http://www.mutoulee.cn" target="_blank">体无完肤</a><br /> </div> </div> </div> <div style="position:absolute; left:0px; top:0px; z-index:99; height:auto"><script type="text/javascript"> var swf_width=1000; var swf_height=1100; swf_width=document.documentElement.clientWidth; document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="'+ swf_width +'" height="'+ swf_height +'">'); document.write('<param name="movie" value="http://www.wzfzl.cn/flash/01/23.swf"><param name="quality" value="high">'); document.write('<param name="wmode" value="transparent">'); document.write('<embed src="http://www.wzfzl.cn/flash/01/23.swf" quality="high" width="'+ swf_width +'" height="'+ swf_height +'" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />'); document.write('</object>'); </script></div> </body> </html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

X W F

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值