highlight实现三维视角代码高亮显示滚动动画效果代码
代码语言:html
所属分类:动画
代码描述:highlight实现三维视角代码高亮显示滚动动画效果代码
代码标签: highlight 三维 视角 代码 高亮 滚动 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/highlight.9.9.css"> <style> body { -webkit-perspective:160px; perspective:160px; -webkit-perspective-origin:center 40vh; perspective-origin:center 40vh; background:#222; overflow:hidden; } #vp { position:relative; overflow:hidden; -webkit-transform-origin:50% 50%; transform-origin:50% 50%; -webkit-mask-image:linear-gradient(to right,black 30%,transparent 70%); mask-image:linear-gradient(to right,black 30%,transparent 70%); height:100vh; width:100vw; animation:g 3s forwards reverse; } @-webkit-keyframes g { from { -webkit-transform:rotateY(0)rotateX(0); transform:rotateY(0)rotateX(0); } 20%,to { -webkit-transform:rotateY(90deg)rotateX(90deg); transform:rotateY(90deg)rotateX(90deg); } }@keyframes g { from { -webkit-transform:rotateY(0)rotateX(0); transform:rotateY(0)rotateX(0); } 20%,to { -webkit-transform:rotateY(90deg)rotateX(90deg); transform:rotateY(90deg)rotateX(90deg); } }#elcode { word-break:break-all; font.........完整代码请登录后点击上方下载按钮下载查看
网友评论0