1、动画说明
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ width: 140px; height: 140px; background: url(./bg.png); animation: move 1s steps(12) infinite,move1 3s forwards; position: absolute; /* right: 0; */ left: 0; } @keyframes move{ to{ background: url(./bg.png) -1680px 0; } } @keyframes move1{ to{ left: 50%; /* right: 50%; */ transform: translateX(-50%); } } </style> </head> <body> <div class="box"></div> </body> </html>
文章来源:https://www.toymoban.com/news/detail-709942.html
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>旋转木马</title> <style> .div{ width: 200px; height: 300px; border: 1px solid red; margin: 300px auto; position: relative; /* perspective: 1000px; */ transform-style: preserve-3d; transform: rotateX(-10deg); animation: move 30s linear infinite; /* transition: all 5s; */ color: deeppink; } .div div{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .div div span img{ width: 100%; height: 100%; position: absolute; } .div div:nth-child(1){ background-color: aqua; transform: translateZ(500px); } .div div:nth-child(2){ background-color: red; transform: rotateY(60deg) translateZ(500px); } .div div:nth-child(3){ background-color: pink; transform: rotateY(120deg) translateZ(500px); } .div div:nth-child(4){ background-color: blue; transform: rotateY(180deg) translateZ(500px); } .div div:nth-child(5){ background-color: purple; transform: rotateY(-120deg) translateZ(500px); } .div div:nth-child(6){ background-color: brown; transform: rotateY(-60deg) translateZ(500px); } @keyframes move{ to{ transform:rotateX(-10deg) rotateY(360deg); } } audio{ display: none; } </style> </head> <body> <div class="div"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </body> </html>
文章来源地址https://www.toymoban.com/news/detail-709942.html
到了这里,关于8-web前端 动画 案例的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!