css实现文字三维旋转动画效果
代码语言:html
所属分类:动画
代码描述:css实现文字三维旋转动画效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { background: #000; padding-top: 300px; } body, .container { display: -webkit-box; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-flow: row wrap; align-content: center; -webkit-box-pack: center; justify-content: center; } .container { width: 100%; -webkit-perspective: none; perspective: none; } .text { width: 25vmin; height: 25vmin; position: relative; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: rotateX(0) rotateY(0); transform: rotateX(0) rotateY(0); -webkit-animation: rotation 10s linear infinite both; animation: rotation 10s linear infinite both; } @-webkit-keyframes rotation { to { -webkit-transform: rotateX(360deg) rotateY(360deg); transform: rotateX(360deg) rotateY(360deg); } } @keyframes rotation { to { -webkit-transform: rotateX(360deg) rotateY(360deg); transform: rotateX(360deg) rotateY(360deg); } } .text div { position: absolute; } .st-left, .st-right { width: 3vmin; height: 80%; top: 10%; } .st-right { right: 0; } .st-top, .st-bottom { width: 80%; height: 3vmin; left: 10%; } .st-bottom { bottom: 0; } .d .st-left, .e .st-left { left: 10%; } .e .st-top, .e .st-bottom { left: 20%; } .e .st-middle { width: 60%; height: 3vmin; top: 1.........完整代码请登录后点击上方下载按钮下载查看
网友评论0