图片效果 ↓（代码为粉图，生日歌自动播放）

视频效果 ↓（音乐为自动播放）

网页通过CSS写出生日倒计时（利用：日期倒计时、元素自动旋转、边框视觉按钮效果）

代码 ↓（可直接复制使用，音乐引用网易云音乐的外部链接）


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<head><meta charset="utf-8"><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>Happy Birthday to You XX生日快乐</title><link href="https://fonts.font.im/css?family=Anton" rel="stylesheet"><!-- 引用谷歌英语字体 --><script type="text/javascript">var time_now_server,time_now_client,time_end,time_server_client;time_end=new Date("2022/10/11 00:00:0");//生日填这里，此js为倒计时time_end=time_end.getTime();time_now_server=new Date();time_now_server=time_now_server.getTime();setTimeout("show_time()",1000);function show_time(){var timer = document.getElementById("timer");var hourid = document.getElementById("hour");if(!timer){return ;}timer.innerHTML =time_now_server;var time_now,time_distance,str_time;var int_day,int_hour,int_minute,int_second;var time_now=new Date();time_now=time_now.getTime();time_distance=time_end-time_now;if(time_distance>0){int_day=Math.floor(time_distance/86400000)time_distance-=int_day*86400000;int_hour=Math.floor(time_distance/3600000)time_distance-=int_hour*3600000;int_minute=Math.floor(time_distance/60000)time_distance-=int_minute*60000;int_second=Math.floor(time_distance/1000)if(int_hour < 10)int_hour="0"+int_hour;if(int_minute<10)int_minute="0"+int_minute;if(int_second<10)int_second="0"+int_second;str_time=int_day+"天"+int_hour+"小时"+int_minute+"分钟"+int_second+"秒";timer.innerHTML=str_time;setTimeout("show_time()",1000);}else{timer.innerHTML =0;}}</script><style type="text/css">*{padding: 0;margin: 0;}body{position: relative;background-color: pink;/* 整体背景色调整 */}/* 时间盒子样式，位置采用相对定位 */.time-box{position: absolute;left: 50%;top: 50%;margin-left: -290px;margin-top: 450px;width: 600px;height: 600px;font-size:50px;line-height: 600px;text-align: center;color: rgb(255, 255, 255);text-shadow:  -3px -3px 3px rgb(170, 71, 124),3px 3px 3px rgb(248, 218, 223);border-radius: 50%;box-shadow: 6px 6px 3px rgb(170, 71, 124) inset,-6px -6px 3px rgb(248, 218, 223) inset;}strong{position: absolute;left: 50%;top: 80%;margin-left: -375px;margin-top: 1250px;font-size: 40px;color: rgb(206, 147, 147);text-align: center;width: 800px;height: 200px;font-style: normal;font-family: 'Anton', sans-serif;}span{position: absolute;left: 50%;top: 80%;margin-left: -270px;margin-top: 1400px;font-size: 40px;color: rgb(206, 147, 147);line-height: 60px;text-align: center;width: 550px;height: 200px;}i{position: absolute;left: 50%;top: 10%;margin-left: -275px;text-align: center;font-size: 40px;color: rgb(206, 147, 147);line-height: 500px;}/* 时间盒子外的圈圈样式，圈圈内图片引用的新浪网站内的图片，可自定义网络图片填充 */.qq{position: absolute;left: 48%;top:0;margin-top:  720px;font-size: 40px;border: 1px dashed gray;background-color: #fff;width: 60px;/* 小圆圈尺寸 */height: 60px;overflow: hidden;border-radius: 50%;animation: music 15s;     /* 旋转一圈所用时间 */-webkit-animation: music 15s linear infinite;background: url(https://n.sinaimg.cn/sinakd20117/119/w1284h1235/20210723/895b-36cc66c8c10b46e87ba9f389a82c8501.jpg) no-repeat;/* 网络图片引用 */background-size: cover;z-index: 999;}@keyframes music{from{transform: rotate(0deg) translate(330px) rotate(0deg);}to{transform: rotate(360deg) translate(330px) rotate(0deg);}}@-webkit-keyframes music{from{transform: rotate(0deg) translate(330px) rotate(0deg);}to{transform: rotate(360deg) translate(330px) rotate(0deg);}}/* 下方音乐采用固定定位，音乐引用网易云音乐，自定义可以使用外链复制音乐地址进iframe里就可以了，音乐为自动播放 */.music-box2{position: fixed;left: 0;bottom: 30px;width: 100%;height: 66px;}iframe{height: 120px;width: 100%;}</style>
</head><body><i>距离xx生日2022.10.11倒计时</i><div id="timer" class="time-box"></div><strong>Happy birthday To You!!!</strong><span>你藏在满天星光里<br/>承认我也为你着迷</span><div class="qq"></div><div class="music-box2"><iframe src="https://music.163.com/outchain/player?type=2&id=566436186&auto=1&height=66" frameborder="0"></iframe></div></body>
</html>

网页通过CSS写出生日倒计时（利用：日期倒计时、元素自动旋转、边框视觉按钮效果）[直接复制代码即可实现、含注释]相关推荐

图片上的文字用CSS写出毛玻璃效果
图片上的文字用CSS写出毛玻璃效果 2016-10-04 08:11 网页设计标签:css 1297 发表评论半透明颜色最初的使用场景之一就是作为背景.将其叠放在照片类或其他 ...
[css] 写出主流浏览器内核私有属性的css前缀
[css] 写出主流浏览器内核私有属性的css前缀完善一下: Chrome:Blink内核 -webkit-Safari:WebKit内核 -webkit-Firefox :Gecko内核 -moz ...
[css] 写出你知道的CSS水平和垂直居中的方法
[css] 写出你知道的CSS水平和垂直居中的方法 flex布局水平垂直居中: <div class="outer"><di ...
[css] 写出你遇到过IE6/7/8/9的BUG及解决方法
[css] 写出你遇到过IE6/7/8/9的BUG及解决方法把以前兼容IE6.7学习的东西搬出来了,还以为不见了.兼容性问题 1.IE6margin双边距问题 2.IE67 li间隙问题 3.图片间 ...
[css] 写出几个初始化CSS的样式，并解释说明为什么要这样写
[css] 写出几个初始化CSS的样式,并解释说明为什么要这样写 padding:0; margin:0;为了解决各个浏览器显示不一样的问题个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容 ...
[css] 写出div在不固定高度的情况下水平垂直居中的方法？
[css] 写出div在不固定高度的情况下水平垂直居中的方法? 我知道的有两种方法<!DOCTYPE html> <html><head><meta char ...
[css] 写出在不固定宽高的元素在固定高度的情况下水平垂直居中的方法
[css] 写出在不固定宽高的元素在固定高度的情况下水平垂直居中的方法 flex布局:还有就是可以用定位也可以实现等等: flex:父div:{display:flex: justify-conten ...
[css] 写出固定子容器在固定的父容器下水平垂直居中的布局
[css] 写出固定子容器在固定的父容器下水平垂直居中的布 1.父容器 position: relative,子元素 position: absolute;left: 50%;top: 50%;tra ...
用css写出的水滴形状
使用css写出水滴效果要用到css的阴影和动画效果 1.那就开始第一步首先要一个div盒子放小水滴 <div class="box"></div> 然后在 ...

网页通过CSS写出生日倒计时（利用：日期倒计时、元素自动旋转、边框视觉按钮效果）[直接复制代码即可实现、含注释]

图片效果 ↓（代码为粉图，生日歌自动播放）

视频效果 ↓（音乐为自动播放）

代码 ↓（可直接复制使用，音乐引用网易云音乐的外部链接）

网页通过CSS写出生日倒计时（利用：日期倒计时、元素自动旋转、边框视觉按钮效果）[直接复制代码即可实现、含注释]相关推荐

最新文章

热门文章