css实现鼠标悬浮文字弹出提示框提示层效果代码
代码语言:html
所属分类:弹出层
代码描述:css实现鼠标悬浮文字弹出提示框提示层效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url(https://fonts.googleapis.com/css?family=Lato:300,400,700); html, body { margin: 0; padding: 0; width: 100%; height: 100%; } body { background: -webkit-radial-gradient(bottom left, circle, #f4d894, #ff6666); background: radial-gradient(circle at bottom left, #f4d894, #ff6666); color: #fff; font-family: Lato, sans-serif; font-size: 24px; font-weight: 300; letter-spacing: 0.025em; } strong { font-weight: bold; } em { color: #959595; font-style: italic; } .tooltip-example { -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); position: absolute; text-align: center; top: 50%; width: 100%; } .tooltip { display: inline; -webkit-perspective: 500px; -moz-perspective: 500px; perspective: 500px; } .tooltip:hover { cursor: pointer; } .tooltip:hover .tooltip__content { -webkit-transform: translate3d(-50%, -10%, 0); -moz-transform: translate3d(-50%, -10%, 0); -ms-transform: translate3d(-50%, -10%, 0); -o-transform: translate3d(-50%, -10%, 0); transform: translate3d(-50%, -10%, 0); opacity: 1; pointer-events: auto; } .tooltip__content { -webkit-transition: all 200ms ease; -moz-transition: all 200ms ease; transition: all 200ms ease; -webkit-transform: translate3d(-50%, 0%, 0); -moz-transform: translate3d(-50%, 0%, 0); -ms-transform: translate3d(-50%, 0%, 0); -o-transform: translate3d(-50%, 0%, 0); transform: translate3d.........完整代码请登录后点击上方下载按钮下载查看
网友评论0