本帖最后由 绿叶清舟 于 2022-3-26 20:13 编辑 <br /><br /><style>
.waiDiv { width:100%; min-height: 30px; padding:20px 0; background: rgba(40,134,241,.75); }
.water {
margin: auto;
width: 50px;
height: 50px;
box-sizing: border-box;
border-radius: 30% 70% 70% 30% / 30% 35% 65% 70%;
box-shadow: inset 10px 20px 30px rgba(0,0,0,.5),10px 10px 20px rgba(0,0,0,.3),15px 15px 30px rgba(0,0,0,.5),inset -10px -10px 15px rgba(255,255,254,.83);
animation: wmv 3s linear infinite;
}
@keyframes wmv{
20% { border-radius: 30% 70% 53% 47% / 28% 44% 56% 72%; }
40% { border-radius: 30% 70% 39% 61% / 34% 39% 61% 66%; }
60% { border-radius: 25% 75% 45% 55% / 40% 55% 45% 60%;}
80% { border-radius: 28% 72% 31% 69% / 32% 39% 61% 68%;}
}
</style>
<div class="waiDiv">
<div class="water"></div>
</div>
本帖最后由 绿叶清舟 于 2022-3-26 21:39 编辑 <br /><br /><style>
.waiDiv { width:100%; min-height: 30px; padding:20px 0; background: rgba(40,134,241,.75); }
.water {
margin: auto;
width: 50px;
height: 50px;
box-sizing: border-box;
transform: translateX
border-radius: 30% 70% 70% 30% / 30% 35% 65% 70%;
box-shadow: inset 10px 20px 30px rgba(0,0,0,.5),10px 10px 20px rgba(0,0,0,.3),15px 15px 30px rgba(0,0,0,.5),inset -10px -10px 15px rgba(255,255,254,.83);
animation: wmv1 3s linear infinite;
animation: wmv1 4s 0s linear infinite;
}
@keyframes wmv1{
20% { border-radius: 30% 70% 53% 47% / 28% 44% 56% 72%; }
40% { border-radius: 30% 70% 39% 61% / 34% 39% 61% 66%; }
60% { border-radius: 25% 75% 45% 55% / 40% 55% 45% 60%;}
80% { border-radius: 28% 72% 31% 69% / 32% 39% 61% 68%;}
0%, 100% {
top: 7%;
opacity: 0;
}
32.5% {
opacity: 1;
}
75%{
top: 4%;
opacity: 0;
}
}
</style>
<div class="waiDiv">
<div class="water"></div>
</div>
本帖最后由 绿叶清舟 于 2022-3-26 22:32 编辑 <br /><br /><style>
.drop2 {
width: 50px;
height: 50px;
border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
transform: rotate(-45deg);
margin-top: 20px;
transform: translateY;
animation:rao 6s infinite alternate;
}
.drop {
background: radial-gradient(circle at 35px 40px, rgb(184,226,252), rgb(255,255,255));
animation:rao 6s infinite alternate;
}
@keyframes rao {
from {top:70px;} to {top:180px;}
}
</style>
<div class="drop drop2"></div>
82楼的还会淡出，不错的效果
马黑黑 发表于 2022-3-27 10:46
82楼的还会淡出，不错的效果
可就是原地不动啊，以为这样百分比会下来的了
绿叶清舟 发表于 2022-3-27 19:00
可就是原地不动啊，以为这样百分比会下来的了
慢慢研究
本帖最后由 绿叶清舟 于 2022-3-30 20:23 编辑 <br /><br /><style>
/* 树叶 */
.leaf {
position: relative;
width: 30px;
height: 30px;
border-radius: 0 100% 0 100%;
background: darkgreen;
left: calc(50% - 150px);
}
/* +倒放的树叶 */
.leaf1 {
background: linear-gradient(45deg, darkgreen 50%, green 50%)
}
</style>
<div class="leaf leaf1">
<div id="mybox" class="leaf leaf1"></div></div>
<audio id="music" autoplay="autoplay" loop="loop" src="https://www.joy127.com/url/89317.mp3" ></audio>
<script language="javascript">
var aud = document.getElementById('music');
var btn = document.getElementById('clkBtn');
var zz = document.getElementById('zhizhen');
btn.onclick = function(){ aud.paused ? (aud.play(), zz.style.animationPlayState = "running") : (aud.pause(), zz.style.animationPlayState = "paused"); }
aud.addEventListener("ended", function(){ zz.style.animationPlayState = "running"; });
</script>
本帖最后由 绿叶清舟 于 2022-8-19 10:56 编辑 <br /><br /><style>
#papa { left: -214px; width: 1024px; height: 640px; background: gray url('https://pic.imgdb.cn/item/62fefbdf16f2c2beb1de3ace.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; position: relative; }
#disc { position: absolute; width: 40px; height: 40px; left: 10px; bottom: 10px; background: conic-gradient(red,orange,yellow,green,teal,blue,purple); mask: radial-gradient(transparent 4px,red 0); -webkit-mask: radial-gradient(transparent 4px,red 0); border-radius: 50%; cursor: pointer; animation: rot 2s linear infinite; }
#lrcbox { position: absolute; left: 60px; bottom: 10px;font: bold 22px / 40px sans-serif; color: lightblue; text-shadow: 2px 2px 4px #222; }
.meteor { position: absolute; width: 3px; height: 3px; left: 100px; top: 100px; border-radius: 50px; background: #02ff21; }
@keyframes flow { from { transform: translate(var(--startX), var(--startY));opacity: 1;} to { transform: translate(var(--endX), var(--endY)); opacity: 0; } }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<span id="lrcbox">Loading ...</span>
<span id="disc"></span>
</div>
<script>
let stars = new Array(100), aud = new Audio();
let w = papa.offsetWidth, h = papa.offsetHeight;
let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min;
let lrcAr = [
['0.06','萤火虫 - 单依纯'],
];
aud.loop = true;
aud.autoplay = true;
aud.src = 'http://music.163.com/song/media/outer/url?id=1969325553.mp3';
disc.style.animationPlayState = aud.paused ? 'paused' : 'running';
disc.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing',()=> disc.style.animationPlayState = 'running');
aud.addEventListener('pause',()=> disc.style.animationPlayState = 'paused');
for(j = 0; j < stars.length; j ++) {
let star = document.createElement('span');
star.className = 'meteor';
let x1 = num(0, w-5);
let y1 = num(0, h/4);
let x2 = x1 + num(50, 100);
let y2 = y1 + num(20, 50);
star.style.cssText += `width: ${num(1,4)}px; height: ${num(1,4)}px; left: ${x1}px; top: ${y1}px; --startX: ${x1}px; --startY: ${y1}px; --endX: ${x2}px; --endY: ${y2}px; animation: flow linear 1s ${j*.1}s infinite`;
papa.appendChild(star);
stars = star;
}
aud.addEventListener('timeupdate',function(){
let tt = aud.currentTime;
for(j=0; j<lrcAr.length; j++){
if(tt >= lrcAr){
lrcbox.innerHTML = lrcAr;
}
}
})
</script>