js+css实现可交互带音效空调遥控开关调节温度制冷制热动画效果代码
代码语言:html
所属分类:布局界面
代码描述:js+css实现可交互带音效空调遥控开关调节温度制冷制热动画效果代码,开机有吹风的音效,调节按钮也有叮当的声音,非常逼真,温度还能显示调节。
代码标签: js css 交互 音效 空调 遥控 开关 调节 温度 制冷 制热 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="zh-CN"> <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"> <style> @font-face { font-family: 'led regular'; src: url('//repo.bfw.wiki/bfwrepo/font/DS-DIGI.TTF'); } *{ padding: 0; margin: 0; box-sizing: border-box; } body{ height: 100vh; display: flex; justify-content: center; align-items: center; background-color: rgb(241, 241, 241); } .container{ position: relative; width: 400px; height: 500px; /* border: 1px solid rgb(201, 201, 201); */ } .air{ position: relative; margin: 0 auto; width: 300px; height: 120px; background-color: rgb(255, 255, 255); border-radius: 10px 10px 0 0; filter: drop-shadow(0 2px 4px rgb(145, 145, 145)); } .air::after{ content: ''; position: absolute; bottom: -21px; left: 0; height: 20px; width: 300px; background-color: rgb(255, 255, 255); border-radius: 0 0 20px 20px; } .picture{ position: absolute; top: 10px; left: 10px; width: 40px; height: 65px; border-radius: 5px; } .pattern{ position: absolute; top: 25px; right: 35px; width: 20px; height: 20px; opacity: 0; transition: all 0.3s; } .font{ /* 引用LED字体 */ font-family: "led regular"; position: absolute; right: 30px; top: 45px; width: 50px; height: 30px; line-height: 30px; font-size: 25px; color: rgb(184, 184, 184); opacity: 0; transition: all 0.3s; } .logo{ position: absolute; left: 50%; bottom: 3px; transform: translateX(-50%); font-size: 10px; color: rgb(139, 139, 139); } .dot{ position: absolute; bottom: -8px; right: 12px; width: 5px; height: 5px; border-radius: 50%; background-color: rgb(19, 221, 53); z-index: 1; opacity: 0; transition: all 0.3s; } .wind{ position: relative; top: 30px; width: 250px; height: 60px; margin: 0 auto; opacity: 0; transition: all 1.2s; animation: move 1.5s ease-in-out infinite; } @keyframes move{ 0%,100%{ transform: translateY(0px); } 50%{ transform: translateY(5px); } } .wind>span{ position: absolute; width: 5px; height: 40px; background-color: rgb(206, 206, 206); } .wind1{ left: 20%; transform: rotate(20deg); } .wind2{ left: 50%; } .wind3{ left: 80%; transform: rotate(-20deg); } .btn{ position: relative; top: 50px; margin:0 auto; width: 100px; height: 150px; display: flex; justify-content: space-around; flex-wrap: wrap; align-items: center; } .btn>div{ width: 35px; height: 35px; border-radius: 50%; font-size: 12px; line-height: 35px; text-align: center; background-color: rgb(204, 204, 204); box-shadow: 0 2px 4px rgb(151, 151, 151); cursor: pointer; user-select: none; } .btn>div:active{ background-color: rgb(240, 240, 240); } .........完整代码请登录后点击上方下载按钮下载查看
网友评论0