css+js实现评论文字弹幕缩放动画效果代码
代码语言:html
所属分类:动画
代码描述:css+js实现评论文字弹幕缩放动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @charset "UTF-8"; @import url("https://fonts.googleapis.com/css2?family=Staatliches&display=swap"); html, body { margin: 0; padding: 0; height: 100svh; overflow: hidden; font-family: "Staatliches"; font-size: 1.25rem; } img { position: absolute; height: 100%; width: 100%; object-fit: cover; z-index: 0; } .testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 1fr); height: 100%; perspective: 500px; perspective-origin: center; } @media only screen and (max-width: 800px) { .testimonial-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(8, 1fr); } } @media only screen and (max-width: 600px) { .testimonial-grid { grid-template-columns: repeat(1, 1fr); grid-template-rows: repeat(8, 1fr); } } .testimonial-grid div { background-color: lightblue; transform: rotateX(0deg) rotateY(0deg); animation: rotate 7s ease-out infinite; display: grid; place-items: center; grid-template-columns: 50px 1fr 50px; text-align: center; padding: 10px; position: relative; quotes: "“" "”"; } .testimonial-grid div::before, .testimonial-grid div::after { font-size: 5rem; } .testimonial-grid div::before { content: open-quote; align-self: flex-start; } .testimonial-grid div::after { content: close-quote; align-self: flex-end; margin-bottom: -50px; } .testimonial-grid div:nth-child(2n) { animation: rotate 7s 2.5s ease-out infinite; background-color: beige; } .testimonial-grid div:nth-child(5n) { background-color: orangered; animation: rotate 6s 3.5s ease-out infinite; } .testimonial-grid div:nth-child(4n) { background-color: #57d757; animation: rotate 8s 1.5s ease-out infinite; } .testimonial-grid div:nth-child(5n) { background-color: white; animation: rotate 5s 0.5s ease-out infinite; } .testimonia.........完整代码请登录后点击上方下载按钮下载查看
网友评论0