午后・时光

纯css-doodle布局举例贴第一次更改(加音乐)

位置: 首页 > 悄然作业[ 发布时间: 2023.4.28  作者: 花飞飞  阅读: 238 ]
: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 发布: 加餐二的作业

Copyright © 2014 All Right Reserved 马黑PHP文章管理整站系统v1.8
联系我们: gxblk@163.com