纯css-doodle布局举例贴第一次更改（加音乐）
位置:
首页 >
悄然作业[ 发布时间: 2023.4.28 作者: 花飞飞 阅读: 181 ]
:doodle { @size: 1024px 640px; background: url('https://638183.freep.cn/638183/t23/webp1/room.webp') no-repeat center/cover; pointer-events: none; margin: 20px auto; --state: paused; } position: absolute; @at(1,1) {@size: 300px; background: url('https://638183.freep.cn/638183/t23/webp1/girl.webp') no-repeat center/cover; left: calc(50% - 150px); bottom: 100px; -webkit-box-reflect: below -5px linear-gradient(transparent,transparent 65%,rgba(0,0,0,.8)); } @at(1,2) { @size: 100px; @shape: clover 4; background: lightblue; left: 20px; top: 30px; pointer-events: auto; -state: paused; cursor: pointer; animation: rot 6s infinite linear var(--state); } @keyframes rot { to { transform: rotate(360deg); } }
前一篇: 仙女手里的星星（学习黑师明日又幻想又妄想曲效果）
下一篇: 晚霞中的舞者（学习黑师《大自然之音》代码手绘图案播放效果）
发表评论:
评论列表 [2条]
#2 | 马黑 于 2023-4-28 23:58 发布: 可以自主让花朵转动起来了，不错哦
#1 | 了了 于 2023-4-28 22:02 发布: 加餐二的作业
