快来表扬俺

绿叶清舟 · 发表于 2024-9-10 14:56

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

绿叶清舟 · 发表于 2024-9-10 14:56

本帖最后由绿叶清舟于 2024-9-10 15:00 编辑

作业汇总最近比较烦
两忘烟水里
快来表扬俺

绿叶清舟 · 发表于 2024-9-10 14:57

本帖最后由绿叶清舟于 2024-9-10 20:10 编辑

第一次这么认真的一个个看，就差拆成字母了

绿叶清舟 · 发表于 2024-9-10 15:02

第二个作业
<style>
.tiezi {
      margin: 30px 0 30px calc(50% - 731px);
      width: 1280px;
      height: 720px;
      box-sizing: border-box;
      border: 3px solid;
      border-image: linear-gradient(to top right, #d1e4e9, #bed9e1, #78a9c3, #95b9c2) 3 3;
      background: url('https://p.upyun.com/demo/tmp/ZQSIZuuI.webp') no-repeat center/cover;
      z-index: 1;
      pointer-events: none;
      position: relative;
}

#mypic {
      position: absolute; /* 绝对定位 */
      left: 20px; /* 左边位置*/
      top: 580px; /* 上边位置 */
      width: 120px; /* 宽度 */
      height: 120px; /* 高度 */
      /* animation简化语法：动画名称+运动周期时长+缓动形式+运行次数 */
      animation: rot 58s linear 3;
}

/* 设计CSS关键帧动画 */
@keyframes rot {
      from { transform:translate(0px); } /* 从 0 度开始旋转 */
      to { transform:translate(1180px); } /* 到 360 度即一圈完成一个旋转周期 */
}
</style>

<div class="tiezi" id="tzi">
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2080659326" autoplay loop></audio>
<img id="mypic" alt="" src="https://p.upyun.com/demo/tmp/V6drffz0.webp" />
</div>

<script>
aud.ontimeupdate = () => tzi.style.setProperty('--hue', Math.floor(Math.random() * 80) + 'deg');
tzi.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

绿叶清舟 · 发表于 2024-9-10 15:05

本帖最后由绿叶清舟于 2024-9-10 15:07 编辑

发布完后想起影上次说的加个点击，却加不上去，最上面部分嘛在原来的那个贴子上改了用的都没去看过代码，再看多了 z-index: 1; pointer-events: none; position: relative;这个部分，三行全部去掉，船跑贴子外面去了

绿叶清舟 · 发表于 2024-9-10 15:07

加点击
<style>
.tiezi {
margin: 30px 0 30px calc(50% - 731px);
width: 1280px;
height: 720px;
box-sizing: border-box;
border: 3px solid;

background: url('https://p.upyun.com/demo/tmp/ZQSIZuuI.webp') no-repeat center/cover;

position: relative;
}

#mypic {
position: absolute; /* 绝对定位 */
left: 20px; /* 左边位置*/
top: 580px; /* 上边位置 */
width: 120px; /* 宽度 */
height: 120px; /* 高度 */
      cursor: pointer;
animation: rot 58s linear infinite var(--state);
   --state: running;
}

/* 设计CSS关键帧动画 */
@keyframes rot {
from { transform:translate(20px); } /* 从 0 度开始旋转 */
to { transform:translate(1180px); } /* 到 360 度即一圈完成一个旋转周期 */
}
</style>

<div class="tiezi" >
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2080659326" autoplay loop></audio>
<img id="mypic" alt="" src="https://p.upyun.com/demo/tmp/V6drffz0.webp" />
</div>

<script>
      mypic.onclick = () => {
aud.paused ? aud.play() : aud.pause();
mypic.style.setProperty('--state', aud.paused ? 'paused' : 'running');
};
</script>