前端css学习：实现图片动画剪辑的一些简单的效果
https://www.ixigua.com/i7008117700752835104/
代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box { width: 750px; height: 520px; margin: 50px auto; background-image: url(罪业狂屠-暖心女仆.jpg); position: relative; / 溢出隐藏 / overflow: hidden; / 设置视距，作用于3D转换的子元素 / perspective: 500px; } .box img { / 设置图片位置 / position: absolute; top: 0; left: 0; } .img1 { z-index: 100; / 动画 / animation: image1 2s linear 1s; / 让动画停留在最后一帧，不回到开始处 / animation-fill-mode: forwards; } @keyframes image1 { 0% { transform: scale(1); } 50% { / 缩放，缩小 / transform: scale(0.5); / 设置不透明度 / opacity: 1; } 100% { transform: scale(0.0001); opacity: 0; } } .img2 { z-index: 99; animation: image2 2s linear 3s; animation-fill-mode: forwards; } @keyframes image2 { 0% { transform: scale(1); } 50% { / 放大 / transform: scale(1.5); / 设置不透明度 / opacity: 1; } 100% { transform: scale(5); opacity: 0; } } .img3 { z-index: 98; animation: image3 2s linear 5s; animation-fill-mode: forwards; } @keyframes image3 { 0% { transform: translateX(0); } 50% { / 移动，向X轴 / transform: translateX(200px); opacity: 1; } 100% { transform: translateX(400px); opacity: 0; } } .img4 { z-index: 97; animation: image4 2s linear 7s; animation-fill-mode: forwards; } @keyframes image4 { 0% { transform: translateY(0); } 50% { / 移动，向Y轴 / transform: translateY(200px); opacity: 1; } 100% { transform: translateY(400px); opacity: 0; } } .img5 { z-index: 96; animation: image5 2s linear 9s; animation-fill-mode: forwards; } @keyframes image5 { 0% { transform: translateZ(0); } 50% { / 移动，向Z轴 / transform: translateZ(-200px); opacity: 1; } 100% { transform: translateZ(-1000px); opacity: 0; } } .img6 { z-index: 95; animation: image6 2s linear 11s; animation-fill-mode: forwards; } @keyframes image6 { 0% { transform: translate(0,0); } 50% { / 移动xy / transform: translate(300px,300px); opacity: 1; } 100% { transform: translate(-300px,-300px); opacity: 0; } } .img7 { z-index: 94; animation: image7 2s linear 13s; animation-fill-mode: forwards; } @keyframes image7 { 0% { transform: translate3d(0,0,0) } 50% { / 移动xyz / transform: translate3d(300px,-300px,-1000px); opacity: 1; } 100% { transform: translate3d(-900px,900px,-1500px); opacity: 0; } } .img8 { z-index: 93; animation: image8 2s linear 15s; animation-fill-mode: forwards; } @keyframes image8 { 0% { transform: scale(1); } 50% { / 放大 / transform: scale(1.5); opacity: 2; } 100% { / 缩小 / transform: scale(0.5); opacity: 0; } } .img9 { z-index: 92; animation: image9 2s linear 17s; animation-fill-mode: forwards; } @keyframes image9 { 0% { transform: rotate(0deg); } 50% { / 旋转 / transform: rotate(180deg); opacity: 1; } 100% { transform: rotate(360deg); opacity: 0; } } .img10 { z-index: 91; animation: image10 2s linear 19s; animation-fill-mode: forwards; } @keyframes image10 { 0% { / 旋转 缩放 / transform: rotate(0deg) scale(1); } 50% { transform: rotate(-180deg) scale(0.5); opacity: 1; } 100% { transform: rotate(-360deg) scale(0.0001); opacity: 0; } } .img11 { z-index: 90; animation: image11 2s linear 21s; animation-fill-mode: forwards; } @keyframes image11 { 0% { / 位移 / transform: translate(0,0) skewX(0deg); } 50% { transform: translate(100px,-100px) skewX(45deg); opacity: 1; } 100% { transform: translate(-100px,-200px) skewX(75deg); opacity: 0; } } </style></head><body> <div class="box"> <img class="img1" src="阿修罗.jpg" alt="" /> <img class="img2" src="埃及艳后.jpg" alt="" /> <img class="img3" src="暗精灵.jpg" alt="" /> <img class="img4" src="暗月猎手.jpg" alt="" /> <img class="img5" src="冰雪女王.jpg" alt="" /> <img class="img6" src="嫦娥.jpg" alt="" /> <img class="img7" src="炽焰火女.jpg" alt="" /> <img class="img8" src="大乔.jpg" alt="" /> <img class="img9" src="貂蝉.jpg" alt="" /> <img class="img10" src="宫本武藏.jpg" alt="" /> <img class="img11" src="红炎双刃.jpg" alt="" /> </div></body></html>
实现效果—视频链接：
前端css学习：实现图片动画剪辑的一些简单的效果
https://www.ixigua.com/i7008117700752835104/
