学习一个（学习套用马老师代码）
本帖最后由 冬天的雨 于 2023-7-1 12:41 编辑 <br /><br /><style>#papa { margin: 0 0 0 calc(50% - 720px); width: 1273px; height: 713px; background: #000 url('https://pic.imgdb.cn/item/649d1f9f1ddac507cc10ef9f.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; position: relative; z-index: 1; --state: paused; }
#papa::before { position: absolute; left: calc(50% - 30px); bottom: 80%; content: ''; width: 100px; height: 100px; background: radial-gradient(darkred,red); clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); cursor: pointer; animation: rot 6s infinite linear var(--state); }
.lizi { display: block; position: absolute; width: 20px; height: 20px; background: white; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.boat { position: absolute; left: 0; top: 210px; width: 100px; height: 100px; background: url('') no-repeat center/cover; offset-path: path('M0,420 Q400,200 800,170'); offset-distance: 100%; mix-blend-mode: multiply; animation: boating 20s var(--delay) infinite linear var(--state); --delay: 0s; }
.boat:nth-of-type(2) { --delay: -7s; }
.boat:nth-of-type(3) { --delay: -14s; }
svg {position: absolute; left: 0; top:200px; border: 1px solid tan;}
@keyframes boating { to { offset-distance: 0%; } }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<div class="boat"></div>
<div class="boat"></div>
<div class="boat"></div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=25841331" autoplay="autoplay" loop="loop"></audio>
<script>
(function() {
let stars = [], total = 30, canMove = false;
let lSteps = Array.from({length: total}, (v) => Math.random() * 1.5 - .6);
let tSteps = Array.from({length: total}, (v) => Math.random() * 1.2 - .6);
Array.from({length: total}).forEach((item,key) => {
item = document.createElement('span');
item.className = 'lizi';
let ww = 10 + Math.round(Math.random() * 20),
lPos = Math.round(Math.random() * (papa.offsetWidth - ww)),
tPos = Math.round(Math.random() * (papa.offsetHeight / 3 - ww));
item.style.cssText += `
left: ${lPos}px;
top: ${tPos}px;
width: ${ww}px;
height: ${ww}px;
background: rgba(${200 + Math.floor(Math.random() * 55)},0,0,.7);
animation: rot 4s infinite linear var(--state);
`;
let ar = ;
stars.push(ar);
papa.appendChild(item);
});
let move = () => {
if(canMove) {
stars.forEach((item,key) => {
item += lSteps;
item += tSteps;
if(item > papa.offsetWidth - item || item < 0) lSteps = -lSteps;
if(item > papa.offsetHeight / 3 - item || item < 0) tSteps = -tSteps;
item.style.left = item + 'px';
item.style.top = item + 'px';
});
}
setTimeout(move,17);
};
let mState = () => aud.paused ? (papa.style.setProperty('--state','paused'),canMove = false) : (papa.style.setProperty('--state','running'),canMove = true);
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
papa.onclick = () => aud.paused ? aud.play() : aud.pause();
move();
})();
</script>
@马黑黑
谢谢马老师源码分享，冬雨笨只会套用{:4_170:} 上次的图改了一下尺寸{:4_170:} 完成作业出发了。。。 完成作业出发了。。。 冬小雨学得真快啊，这个也特别适合今天的建党节呢。给冬小雨点赞{:4_199:} 这儿五角星用到上一帖上，也挺合适 给冬小雨点赞{:4_199:} 欣赏点赞！ 欣赏！{:4_187:} 问好老师，欣赏精彩佳作，谢谢分享，点赞！{:4_187:}
页:
[1]