午后・时光

橘子洲头(学习黑师汉字逐渐显示效果)

位置: 首页 > 悄然作业[ 发布时间: 2023.5.17  作者: 花飞飞  阅读: 322 ]
:doodle {@size: 100px; cursor: pointer; left:150px; top: 50px; z-index: 4; clip-path: @shape(fill: evenodd;points: 600;scale: .13;x: 6 * cos(t) + cos(12t);y: 6 * sin(t) - sin(12t););background: url('https://pic2.imgdb.cn/item/6464c4ed0d2dde5777ca602a.gif') no-repeat center / cover; pointer-events: auto; animation: rot 6s infinite linear var(--state); } @keyframes rot { to { transform: rotate(360deg); } }:doodle {@size: 240px 300px;left: 120px;top: 200px;cursor: pointer;z-index: 3;}@size: 50px;@place: calc(@col * 40px - 20px) calc(@row * 40px - 20px);font: normal 30px / 40px sans-serif;color:yellow;text-shadow: 1px 1px 2px #000;opacity: 0;:before {content: @pn([独立寒秋, 湘江北去, 橘子洲头。 看万山红遍,层林尽染; 漫江碧透, 百舸争流……]);}animation: show .3s calc((@i - 1) * .3s) linear forwards var(--state);@keyframes show { to { opacity: 1; } }:doodle { @size: 1024px 640px; perspective: 300px; }:container { transform-style: preserve-3d; }background: @m(@r(140, 100), radial-gradient(@p(#00b8a9, #f8f3d4, #f6416c, #ffde7d) 15%, transparent 50%) @r(100%) @r(100%) / @r(1%, 3%) @lr no-repeat);@size: 30%;@place-cell: center;border-radius: 50%;animation: scale-up 15s calc(@i * -.6s) linear infinite var(--state);@keyframes scale-up {0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0); }10% { opacity: 1; }95% { transform: translate3d(0, 0, @r(50vmin, 55vmin)) rotate(@r(-360deg, 360deg)); }100% { opacity: 0; transform: translate3d(0, 0, 1vmin); }}

前一篇: 簇拥烈日的花(学习黑师css-doodle粒子纷飞效果)
下一篇: 落花影中游(学习黑师《火》双背景效果)

发表评论:

       

评论列表 [3条]

#3 | 悄然 于 2023-5-17 19:32 发布: 辛苦啦!我瞧瞧怎么整。。。

#2 | 八爷 于 2023-5-17 19:25 发布: 代码已发出

#1 | 飞飞 于 2023-5-17 13:56 发布: 问题贴,各种不受控。鼠标小手也不出现,播放器点了也不停,粒子也无法控制。彻底失控状态。。晕晕,改不出来了,黑老师给瞧瞧

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