朵拉 发表于 2022-5-13 23:01

学习按钮03（马黑黑原创）

本帖最后由 朵拉 于 2022-5-13 23:33 编辑 <br /><br />https://pic.imgdb.cn/item/627e6fba0947543129c8d0ca.jpg
<style>
.wrap {
      left: 72px;
      top: -174px;
      width: 20px;
      height: 20px;
      perspective: 1800px;
      position: relative;
      animation: rot 10s linear infinite;
}
.flower {
      width: 50%;
      height: 50%;
      border-radius: 0 100%;
      background-color: #ccc;
      opacity: .85;
      transform-origin: 100% 100%;
      transform-style: preserve-3d;
      position: absolute;
}
@keyframes rot { to { transform: rotate(1turn); } }
</style>

<div class="wrap"></div>

<script>
let wrap = document.querySelector('.wrap');
let flag = true;
let str = '';
for(j=0; j< 5; j++) {
      str += `<div class='flower' style='background: linear-gradient(${getColor()}, ${getColor()}); transform: rotate(${72*j}deg)'></div>`;
}
wrap.innerHTML = str;
let au = document.createElement('audio');
au.src = "http://www.kumeiwp.com/sub/filestores/2022/03/02/73c68931263751df18e50087fe277035.mp3";
au.autoplay = flag;
au.loop = true;
au.style.display = 'none';
wrap.appendChild(au);

let tt = setInterval(setColor, 1000);

wrap.onclick = function(){
      flag ? (au.pause(), this.style.animationPlayState = 'paused', flag = false) : (au.play(), this.style.animationPlayState = 'running', flag = true);
}

function setColor(){
      let petal = document.querySelectorAll('.flower');
      for(j=0; j< petal.length; j++){
                petal.style.background = `linear-gradient(${getColor()},${getColor()})`;
      }
}

function getColor(){
      return `#${Math.random().toString(16).substr(-6)}`;
}
</script>

马黑黑 发表于 2022-5-13 23:06

按钮要和图片整合起来。记得之前给过示例。

朵拉 发表于 2022-5-13 23:33

本帖最后由 朵拉 于 2022-5-13 23:45 编辑

故宫的红墙~~（好友摄影）

https://pic.imgdb.cn/item/627e7b760947543129f3e01c.jpg

朵拉 发表于 2022-5-13 23:34

马黑黑 发表于 2022-5-13 23:06
按钮要和图片整合起来。记得之前给过示例。

马老师，学生调整好了，请指正{:4_190:}

加林森 发表于 2022-5-13 23:38

太晚了，不敢开声音了，挺漂亮的。明天再来欣赏！

樵歌 发表于 2022-5-14 07:49

漂亮。只是和他们的不一样。{:4_187:}

红影 发表于 2022-5-14 08:06

这构思很棒，朵宝的制作很漂亮{:4_187:}

加林森 发表于 2022-5-14 09:37

再来欣赏，朵拉制作得真漂亮，赞！{:4_204:}

熊二 发表于 2022-5-14 10:46

朵拉制作得真漂亮，赞！{:4_187:}

马黑黑 发表于 2022-5-14 12:19

朵拉 发表于 2022-5-13 23:34
马老师，学生调整好了，请指正

看到了，设置的很到位也很有意思

马黑黑 发表于 2022-5-14 19:27

朵朵总是有奇思妙想
页: [1]
查看完整版本: 学习按钮03（马黑黑原创）