论坛 › 欢乐水吧 › 粼波荡漾

亚伦影音工作室 发表于 2024-10-8 09:54

粼波荡漾

本帖最后由 亚伦影音工作室 于 2024-10-12 12:16 编辑 <br /><br /><style>
#papa{
        position: relative;
        width: 1164px;
        height: 640px;
      margin-left:-300px;
        margin-top:160px;
        border: 0px solid rgba(36, 201, 219,.95);
      border-radius: 0px;
        background:#000 url(https://file.moyublog.com/d/file/2024-08-05/69bb324d94e7b1f0409931181fed6020.jpg)no-repeat center/cover;
        overflow: hidden;
}
#pa{
width: 105%;
height: 105%;
position: absolute;
top: -2px;-webkit-mask-image: radial-gradient(black 25% ,transparent 65%);
left: -2px;background:url(https://file.moyublog.com/d/file/2024-08-05/69bb324d94e7b1f0409931181fed6020.jpg)no-repeat0 150px/cover;
filter: url(#water)
}

#play { left:30px;
        top:30px;
--line: #fff;
--line-width: 6px;
--duration: .5s;
position: relative;
cursor: pointer;

}

#play input {
display: none;
}

#play input + svg {
display: block;
fill: none;
stroke: var(--line);
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: var(--line-width);
width: 90px;
height: 76px;
}

#play input + svg path {
animation: var(--name) var(--duration) ease forwards
}
#play input + svg path:nth-child(2) {
stroke-dashoffset: 1px;
}
#play input + svg path:nth-child(3) {
stroke-dashoffset: 1px;
}
#play input:checked + svg path:nth-child(1) {
--name: shape;
}
#play input:checked + svg path:nth-child(2) {
--name: small;
}
#play input:checked + svg path:nth-child(3) {
--name: large;
}


#play input:not(:checked) + svg path:nth-child(1) {
--name: shape-r;
}
#play input:not(:checked) + svg path:nth-child(2) {
--name: small-r;
}
#play input:not(:checked) + svg path:nth-child(3) {
--name: large-r;
}

@keyframes small {
0%,30% {
    stroke-dasharray: 0 0 30px 64px;
}
40% {
    stroke-dashoffset: 16px;
}
80%,
    100% {
    stroke-dashoffset: 1px;
}
70% {
    stroke-dasharray: 0 43px 30px 64px;
}
100% {
    stroke-dasharray: 0 39px 30px 64px;
}
}

@keyframes small-r {
0% {
    stroke-dasharray: 0 39px 30px 64px;
}
0%,
    40% {
    stroke-dashoffset: 1px;
}
70% {
    stroke-dashoffset: 16px;
}
70%,
    100% {
    stroke-dasharray: 0 0 30px 64px;
}
}

@keyframes large {
0%,30% {
    stroke-dasharray: 0 0 50px 84px;
}
40% {
    stroke-dashoffset: 16px;
}
80%,
    100% {
    stroke-dashoffset: 1px;
}
70% {
    stroke-dasharray: 0 82px 32px 84px;
}
100% {
    stroke-dasharray: 0 78px 32px 84px;
}
}

@keyframes large-r {
0% {
    stroke-dasharray: 0 78px 32px 84px;
}
0%,
    40% {
    stroke-dashoffset: 1px;
}
70% {
    stroke-dashoffset: 16px;
}
70%,
    100% {
    stroke-dasharray: 0 0 50px 84px;
}
}

@keyframes shape {
0% {
    stroke-dasharray: 60px 0 184px;
    stroke-dashoffset: 0;
}
70% {
    stroke-dasharray: 63px 51px 184px;
    stroke-dashoffset: 21px;
}
100% {
    stroke-dasharray: 59px 47px 184px;
    stroke-dashoffset: 17px;
}
}

@keyframes shape-r {
0% {
    stroke-dasharray: 59px 47px 184px;
    stroke-dashoffset: 17px;
}
100% {
    stroke-dasharray: 60px 0 184px;
    stroke-dashoffset: 0;
}
}
</style>
<div id="papa" >
<div id="pa" >
<svg width="0" height="0"id="p" >
<filter id="water">
    <feTurbulence type="fractalNoise" baseFrequency=".05 .05" numOctaves="1" result="noise1"></feTurbulence>
    <feColorMatrix in="noise1" type="hueRotate" values="0" result="noise2">
      <animate attributeName="values" from="0" to="360" dur="1s" repeatCount="indefinite"/>
    </feColorMatrix>
    <feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="8" in="SourceGraphic" in2="noise2" />
</filter>
</svg>
</div>

<label id="play">
    <input type="checkbox" id='ctrl'>
    <svg viewBox="0 0 108 96">
      <path d="M7,28 L35,28 L35,28 L59,8 L59,88 L35,68 L7,68 C4.790861,68 3,66.209139 3,64 L3,32 C3,29.790861 4.790861,28 7,28 Z"></path>
      <path d="M79,62 C83,57.3333333 85,52.6666667 85,48 C85,43.3333333 83,38.6666667 79,34 L49,3"></path>
      <path d="M95,69 C101.666667,61.6666667 105,54.3333333 105,47 C105,39.6666667 101.666667,32.3333333 95,25 L75.5,6 L49,33"></path>
    </svg>
</label>

<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w7/audio/a8/10/69/9a4d0f9fafa8956302db8c8b5e13c5ba/audio.mp3" autoplay="" loop="loop"></audio>
</div>
<script>
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
pa.addEventListener('click', () => aud.paused ? (aud.play(),p.unpauseAnimations()) :(aud.pause(), p.pauseAnimations()));
</script>

梦油 发表于 2024-10-8 10:10

欣赏佳作，问候亚伦。

红影 发表于 2024-10-8 21:10

很奇特的波动效果。欣赏亚伦老师好帖{:4_199:}

查看完整版本: 粼波荡漾