庄泽峰
<CSS3字体随机变化颜色>

要让字体随机变化颜色，可以参考下面例子，我们定义了一个名为colorful-text的CSS类，通过animation属性设置了一个颜色变化的动画效果。在@keyframes中，我们定义了不同时间点的...

标签: CSS3
2024-1-23 15:17 
评论(0)  浏览(78)  AI

庄泽峰
<CSS3文字闪烁效果>

Hello，GPT，请你用html5+CSS3来实现： 动感有创意的文字“Hello, GPT”。以下是一个使用HTML5和CSS3实现动感有创意的文字“Hello, GPT”的示例代码： <!...

标签: CSS3
2023-12-25 10:15 
评论(0)  浏览(87)  AI

庄泽峰
<Prompt让GPT画一朵会动的小花>

Prompt 1：Hello，GPT，请你用html5+CSS3来实现： 画一朵你认为好看的小花。Prompt 2：哇，确实很好看，能让这朵小花动一动吗？ 然后，GPT给出下面这朵会转动的小花 &lt...

标签: Prompt CSS3
2023-12-19 08:50 
评论(0)  浏览(100)  AI

庄泽峰
<CSS3极简mp3播放器> 

<!DOCTYPE html>
<html>
<head>
  <title>极简mp3播放器</title>
  <style>
.player {
  width: 200px;
  margin: 20px auto;
}

.controls {
  display: flex;
  align-items: center;
}

.play {
  width: 40px;
  height: 40px;
  border: none;
  outline: none;
  cursor: pointer;
  font-size: 24px;
  color: #000; /* 替换为你想要的图标颜色 */
}

.play::before {
  content: "▶"; /* 替换为你想要的播放图标 */
}

.playing::before {
  content: "⏸"; /* 替换为你想要的暂停图标 */
}

.progress {
  width: 100%;
  height: 4px;
  background-color: #ccc;
  margin-left: 10px;
}

.bar {
  height: 100%;
  background-color: #ff6600;
  width: 0;
  transition: width 0.2s ease-in-out;
}

</style>
</head>
<body>
  <div class="player">
    <audio id="audio" src="song.mp3"></audio>
    <div class="controls">
      <button id="playpausebtn" class="play"></button>
      <div class="progress">
        <div id="progressbar" class="bar"></div>
      </div>
    </div>
  </div>

  <script>
var audio = document.getElementById('audio');
var playpausebtn = document.getElementById('playpausebtn');
var progressbar = document.getElementById('progressbar');

playpausebtn.addEventListener('click', function() {
  if (audio.paused || audio.ended) {
    audio.play();
    playpausebtn.classList.add('playing');
  } else {
    audio.pause();
    playpausebtn.classList.remove('playing');
  }
});

audio.addEventListener('timeupdate', function() {
  var progress = (audio.currentTime / audio.duration) * 100;
  progressbar.style.width = progress + '%';
});

</script>
</body>
</html>
标签: CSS3
2023-12-16 15:48 
评论(0)  浏览(67)  AI

庄泽峰
<CSS3简洁的播放器代码> 

<!DOCTYPE html>
<html>
<head>
  <style>
    .audio-player {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 20px;
    }

    .audio-player audio {
      width: 300px;
      height: 30px; 
    }

    .audio-player button {
      background-color: #4CAF50;
      color: white;
      border: none;
      padding: 10px 20px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      margin: 4px 2px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="audio-player">
    <audio controls>
      <source src="your-audio-file.mp3" type="audio/mpeg">
      Your browser does not support the audio element.
    </audio>
  </div>
</body>
</html>
标签: CSS3
2023-12-16 13:36 
评论(0)  浏览(65)  AI

庄泽峰
<Prompt在线图形生成并下载>

这是让GPT写的代码，开始提示词：Hello，GPT，请你用html5+CSS3来实现： 我想让你随意画个图形，要好看一点的；然后，再跟GPT说：我想把这个图形生成图片，并能下载保存下来；最后提示：要...

标签: Prompt JavaScript CSS3
2023-12-15 10:52 
评论(0)  浏览(90)  AI

庄泽峰
<Prompt使用GPT来生成logo图标>

Prompt： Hello，GPT，请你用html5+CSS3来实现：这几个字母“Phon”，深色背景，字体白色，宽高在300px 等GPT生成页面代码后，再提示：我想将这个logo生成为PNG图片，...

标签: Prompt CSS3
2023-12-11 10:29 
评论(0)  浏览(90)  AI

热门文章

最新评论