原生js实现电影影片倒计时动画效果代码
代码语言:html
所属分类:动画
代码描述:原生js实现电影影片倒计时动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; height: 100vh; font-family: "Roboto", sans-serif; overflow: hidden; box-shadow: inset 0 0 5em 1em #000; background: #4f4f4f; } .lines::before { content: ""; top: 50%; transform: translatey(-50%); left: 0; height: 8px; background: #000; width: 100%; position: absolute; } .lines::after { content: ""; top: 0; left: 50%; transform: translatex(-50%); width: 8px; background: #000; height: 100vh; position: absolute; } .screen { clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 0, 50% 0); background: #e1e1e1; position: absolute; height: calc(100vh + 100vw); width: calc(100vh + 100vw); animation: spin 1s linear infinite; } @keyframes spin { 0% { clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 0, 50% 0); } 12% { clip-path: polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0, 50% 0); } 37% { clip-path: polygon( 50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, .........完整代码请登录后点击上方下载按钮下载查看
网友评论0