react实现一个剪纸文字动画效果代码
代码语言:html
所属分类:动画
代码描述:react实现一个剪纸文字动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Raleway:wght@900&display=swap"); body, html { height: 100%; width: 100%; } body { font-family: "Raleway", sans-serif; display: flex; align-items: center; justify-content: center; background-color: #eaece5; } .text { font-size: 8em; position: relative; text-transform: full-width; display: flex; } .text .letter { position: relative; display: flex; } .text .letter:nth-child(2) span { animation-delay: 0.2s; } .text .letter:nth-child(3) span { animation-delay: 0.4s; } .text .letter:nth-child(4) span { animation-delay: 0.6s; } .text .letter:nth-child(5) span { animation-delay: 0.8s; } .text .letter .source { color: gray; -webkit-text-stroke: 0.01em rgba(0, 0, 0, 0.3); display: flex; } .text .letter .overlay, .text .letter .shadow { position: absolute; top: 0; left: 0; pointer-events: none; user-select: none; } .text .letter .overlay { background-image: linear-gradient(90deg, white 50%, #eff0eb); -webkit-background-clip: text; -webkit-text-fill-color: transparent; transform: rotateY(-30deg) skew(0, -10deg); transform-origin: left; animation: overlay 3s infinite ease-out; } .text .letter .shadow { filter: blur(5px); background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.4) 30%, transparent); -webkit-background-clip: text; -webkit-text-fill-color: transparent; transform: skew(0, 20deg) translateY(0.1em) translateX(0.05em); .........完整代码请登录后点击上方下载按钮下载查看
网友评论0