设为首页收藏本站

云荷-个人作品展示

 找回密码
 中文注册

QQ登录

只需一步,快速开始

搜索
热搜: 音画 图文 音乐
查看: 108|回复: 14
打印 上一主题 下一主题

【漫步特效】躁动 探寻的青春/ 一张图片四季变色效果

[复制链接]
跳转到指定楼层
楼主
发表于 5 天前 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

评分

6

查看全部评分

分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏
回复

使用道具 举报

沙发
 楼主| 发表于 5 天前 | 只看该作者
回复 支持 反对

使用道具 举报

板凳
 楼主| 发表于 5 天前 | 只看该作者
  1. <style>
  2. #mydiv {
  3.     margin: 150px 0 30px calc(50% - 931px);
  4.     display: grid;
  5.     place-items: center;
  6.     width: 1800px;
  7.     height: 900px;
  8.     background: lightblue url('https://webftp-bbs.hnol.net/ggkj2017/yunduanmanbu/16/5/cvc.jpg') no-repeat center/cover;
  9.     box-shadow: 3px 3px 20px #000;
  10.     user-select: none;
  11.     overflow: hidden;
  12.     position: relative;
  13.     z-index: 1;
  14.     /* 添加多种颜色转换动画 */
  15.     animation: multiColorShift 20s infinite ease-in-out;
  16. }
  17. #vid {
  18.     position: absolute;
  19.     width: 100%;
  20.     height: 100%;
  21.     object-fit: cover;
  22.     pointer-events: none;
  23.     mix-blend-mode: screen;
  24.     -webkit-mask: linear-gradient(to top right, red 92%, transparent 0);   
  25.     z-index: 2;
  26.     opacity: .45;
  27. }

  28. /* 定义多种颜色转换的动画 */
  29. @keyframes multiColorShift {
  30.     0% {
  31.         filter: hue-rotate(0deg) saturate(1.2);
  32.     }
  33.     16% {
  34.         filter: hue-rotate(60deg) saturate(1.3);
  35.     }
  36.     32% {
  37.         filter: hue-rotate(120deg) saturate(1.2);
  38.     }
  39.     48% {
  40.         filter: hue-rotate(180deg) saturate(1.4);
  41.     }
  42.     64% {
  43.         filter: hue-rotate(240deg) saturate(1.2);
  44.     }
  45.     80% {
  46.         filter: hue-rotate(300deg) saturate(1.3);
  47.     }
  48.     100% {
  49.         filter: hue-rotate(360deg) saturate(1.2);
  50.     }
  51. }
  52. </style>
  53. 音乐代码
  54. <div id="mydiv">
  55.     <video id="vid" src="https://img.tukuppt.com/video_show/2402760/00/01/42/5b42d8d01da76.mp4" autoplay="" loop="" muted=""></video>
  56. </div>  
复制代码

评分

3

查看全部评分

回复 支持 反对

使用道具 举报

地板
发表于 5 天前 | 只看该作者
特效加持,神奇的变化过程
回复 支持 反对

使用道具 举报

5#
发表于 5 天前 | 只看该作者
一图跨越四季的视觉过程,这个效果精彩。
回复 支持 反对

使用道具 举报

6#
发表于 5 天前 | 只看该作者
感谢哥们分享!
回复 支持 反对

使用道具 举报

7#
发表于 5 天前 | 只看该作者
欣赏漫步老师美作来了,
绿意晕染的天地间,
她似在漂浮,
发丝与衣袂轻扬。
把繁花、
绿叶与她的姿态,
串成关于成长与奔赴的诗,
满是朝气。
回复 支持 反对

使用道具 举报

8#
发表于 5 天前 | 只看该作者
绿色的梦乡里,
她发丝飘,
衣袂摇。
让繁花与绿叶,
都成了青春的见证者,
她的每一寸舒展,
都在诉说 “以探索为名,赴青春之约” 的美好。
感谢老师美作分享!
回复 支持 反对

使用道具 举报

9#
发表于 5 天前 | 只看该作者
感觉特效变色真的好神奇,美美的效果,尽现眼前,好看~~
回复 支持 反对

使用道具 举报

10#
发表于 5 天前 | 只看该作者
谢谢漫步老师分享,晚上好~~
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 中文注册

本版积分规则

苏ICP备16043306号-1    

GMT+8, 2025-9-1 01:22 , Processed in 0.125740 second(s), 21 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表