父亲
本帖最后由 起个网名好难 于 2024-6-16 20:19 编辑 <br /><br /><meta name="referrer" content="never" /><style>
@import url('https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css');
#oBlk {
--w:1280px; --h:720px;
width:var(--w);height:var(--h);
position:relative;
margin:80px 0 40px calc(50% - 0.5 * var(--w) - 81px);
overflow:hidden;
border-radius:32px;
box-shadow:4px 4px 10px black;
#vid {width:110%;position:absolute;left:0px;bottom:0px;}
#aniImg{
width:512px; height:648px;
background-image:url() center / cover;
position:absolute; top:5%; left:30%; animation-duration: 8s;
overflow:hidden;border-radius:24px;}
}
</style>
<div id="oBlk">
<video id="vid" src="https://img.tukuppt.com/video_show/14490244/00/17/35/5ec1e9e344a91.mp4"
loop autoplay ></video>
<img id="aniImg" class="animate__animated" src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SJLt1kAeX3EZfXiawYOtsdavSR4dNICswIH4OIl09ju7f6n7vaTtCiaE2mTPyvmjiclib1dpT6R18n9Q/640">
</div>
<script type="text/javascript">
var imgs=[
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SJLt1kAeX3EZfXiawYOtsdavSR4dNICswIH4OIl09ju7f6n7vaTtCiaE2mTPyvmjiclib1dpT6R18n9Q/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SJLt1kAeX3EZfXiawYOtsdaDSI5eHxRwOAqNzw9Qv032cgW9LiaibpVz1DqvFnB3gicLyIKxvlQPrkNQ/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SJLt1kAeX3EZfXiawYOtsda0sicIp1RLQqldwt3vYqibmAo2yaoKkGT7gJAwTQqusLuLKiaHLHhjCLXw/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SJLt1kAeX3EZfXiawYOtsdaw4l1ibfR42cqqicWcNk9eTdy26wablW3R2q9sJwGWF6KUr5tsNvmzmHQ/640" ,
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SJLt1kAeX3EZfXiawYOtsdabJ3D7XHAqpZQ7lzxfdaXfyKt4qFtfdd5f2dQDL9ALPvZTYYkHcDAbw/640" ,
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SJLt1kAeX3EZfXiawYOtsdaPGMfwEdE2I5EIoPb7z0VWeYoouGEeTs9AycibsoetpMnQjlMN3aaxaA/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7SJLt1kAeX3EZfXiawYOtsdazz3qViak2uxgeyMaOE5Ov6LwsPfc6wECZSdgjIUZvbJ4SHnRL0yic3kw/640" ,
];
var dhlm= ["bounce","flash","pulse","rubberBand","shakeX","shakeY","headShake","swing","tada","wobble","jello","heartBeat","backInDown","backInLeft","backInRight","backInUp","backOutDown","backOutLeft","backOutRight","backOutUp","bounceIn","bounceInDown","bounceInLeft","bounceInRight","bounceInUp","bounceOut","bounceOutDown","bounceOutLeft","bounceOutRight","bounceOutUp","fadeIn","fadeInDown","fadeInDownBig","fadeInLeft","fadeInLeftBig","fadeInRight","fadeInRightBig","fadeInUp","fadeInUpBig","fadeInTopLeft","fadeInTopRight","fadeInBottomLeft","fadeInBottomRight","fadeOut","fadeOutDown","fadeOutDownBig","fadeOutLeft","fadeOutLeftBig","fadeOutRight","fadeOutRightBig","fadeOutUp","fadeOutUpBig","fadeOutTopLeft","fadeOutTopRight","fadeOutBottomRight","fadeOutBottomLeft","flip","flipInX","flipInY","flipOutX","flipOutY","lightSpeedInRight","lightSpeedInLeft","lightSpeedOutRight","lightSpeedOutLeft","rotateIn","rotateInDownLeft","rotateInDownRight","rotateInUpLeft","rotateInUpRight","rotateOut","rotateOutDownLeft","rotateOutDownRight","rotateOutUpLeft","rotateOutUpRight","hinge","jackInTheBox","rollIn","rollOut","zoomIn","zoomInDown","zoomInLeft","zoomInRight","zoomInUp","zoomOut","zoomOutDown","zoomOutLeft","zoomOutRight","zoomOutUp","slideInDown","slideInLeft","slideInRight","slideInUp","slideOutDown","slideOutLeft","slideOutRight","slideOutUp"];
var aniIdx = 0, imgIdx = 1;
function initAni() {
var aniImg = document.getElementById('aniImg');
aniImg.src = imgs;
aniImg.classList.add('animate__'+dhlm);
aniImg.addEventListener('animationend', function () {
aniImg.src = imgs;
aniImg.className = 'animate__animated animate__'+dhlm;
imgIdx++ ; imgIdx %= imgs.length;
});
}
oBlk.onclick = () => vid.paused ? (vid.play(), aniImg.style.animationPlayState = 'running') : (vid.pause(),aniImg.style.animationPlayState = 'paused');
initAni();
</script> 醉美水芙蓉 发表于 2024-6-16 16:18
欣赏学习老师精彩作品！
谢谢支持欣赏！ 父亲节快乐！{:4_199:} 欣赏老师精彩特效动画！{:4_187:} 梦江南 发表于 2024-6-16 18:36
父亲节快乐！
这种不定时日的节真有些莫名其妙。 梦江南 发表于 2024-6-16 18:38
欣赏老师精彩特效动画！
谢谢支持欣赏！ 小图和大图都在轮转，小图还加了很多轮转特效，这个帖子太赞了{:4_199:} 帖子的内容十分感人，看到这些图画，更加感念父亲的好{:4_187:} 点暂停时大图和音乐停了，小图还在动，像调皮的孩子{:4_173:} 红影 发表于 2024-6-16 19:59
小图和大图都在轮转，小图还加了很多轮转特效，这个帖子太赞了
大图是个视频，音乐也是它的；小图片用animate.css做的切换。 发现大图也有好多奇妙的特效，比如那张骑自行车的，文字从后面一点点出来，最后又被车子带走了{:4_199:} 红影 发表于 2024-6-16 20:00
点暂停时大图和音乐停了，小图还在动，像调皮的孩子
哦， 忘了让小图片暂停了{:5_102:}， 呆会加上。 红影 发表于 2024-6-16 20:03
发现大图也有好多奇妙的特效，比如那张骑自行车的，文字从后面一点点出来，最后又被车子带走了
那是视频里的花样，我只是找来用了。 红影 发表于 2024-6-16 19:59
帖子的内容十分感人，看到这些图画，更加感念父亲的好
今天是“父亲节” 一个不被关注的洋节{:5_103:} 制作精妙、内容丰富。祝网名朋友节日快乐！ 梦油 发表于 2024-6-16 21:17
制作精妙、内容丰富。祝网名朋友节日快乐！
节日快乐！ 起个网名好难 发表于 2024-6-16 19:22
这种不定时日的节真有些莫名其妙。
这是对男人们的尊重啊！
男人不服只有三八妇女节，所以也给男人来个父亲 节！{:4_173:} 梦江南 发表于 2024-6-17 08:11
这是对男人们的尊重啊！
男人不服只有三八妇女节，所以也给男人来个父亲 节！
昨天看了个小视频， 父亲节就是付清水费、电费、电话费、煤气费…………的节日 本帖最后由 梦江南 于 2024-6-20 11:18 编辑
起个网名好难 发表于 2024-6-17 08:19
昨天看了个小视频， 父亲节就是付清水费、电费、电话费、煤气费…………的节日
哈哈哈，这是做父亲的担当！{:4_173:}