CSS3实现漂亮ToolTips

演示Demo

5种效果的主要css如下：

/* transform:向元素应用2D或3D转换; transform-origin属性只有在定义了transform以后才生效 */
.tooltip-effect-1 .tooltip-content{-webkit-transform:translate3d(0,10px,0) rotate3d(1,1,1,45deg);transform:translate3d(0,10px,0) rotate3d(1,1,1,45deg);-webkit-transform-origin:50% 100%;transform-origin:50% 100%; /* 等价于transform-origin:center bottom; */
}.tooltip-effect-1 .tooltip-content i{-webkit-transform:scale3d(0,0,1);transform:scale3d(0,0,1);
}.tooltip-effect-2 .tooltip-content{-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0);
}.tooltip-effect-2 .tooltip-content i{-webkit-transform:translate3d(0,15px,0);transform:translate3d(0,15px,0);
}.tooltip-effect-3 .tooltip-content{-webkit-transform:translate3d(0,10px,0) rotate3d(0,1,0,90deg);transform:translate3d(0,10px,0) rotate3d(0,1,0,90deg);-webkit-transform-origin:50% 100%;transform-origin:50% 100%;
}.tooltip-effect-3 .tooltip-content i{-webkit-transform:scale3d(0,0,1);transform:scale3d(0,0,1);
}.tooltip-effect-4 .tooltip-content{-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0);
}.tooltip-effect-4 .tooltip-content i{-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0);
}.tooltip-effect-5 .tooltip-content{-webkit-transform:scale3d(0,0,1);transform:scale3d(0,0,1);-webkit-transform-origin:50% 100%;transform-origin:50% 100%;
}.tooltip-effect-5 .tooltip-content i{-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0);
}

View Code

效果里面的小图标引用到了一个第三方库：fontawesome

源代码下载

转载于:https://www.cnblogs.com/Lanjerry/p/4388083.html

CSS3实现漂亮ToolTips相关推荐

html漂亮的单选框,纯css3实现漂亮的单选按钮radio
单选按钮radio是表单常见的元素,但是默认的单选按钮radio样式呆板不好看,因此通常设计人员会自己设计一个单选按钮radio,本文介绍用纯css3实现漂亮的单选按钮radio. 纯css3实现漂亮 ...
css的计算器,CSS3制作漂亮的计算器
插件描述:原生js CSS3制作漂亮的计算器_加减乘除计算器代码实现代码html> JS+CSS3实现计算器特效 C 7 8 9 + 4 5 6 - 1 2 3 ÷ 0 . = x jsvar ...
jquery 堆栈溢出_带有jQuery和CSS3的漂亮照片堆栈库
jquery 堆栈溢出 View demo 查看演示Download Source 下载源 In this tutorial we are going to create a nice and fre ...
纯 CSS3 实现漂亮的 input 输入框
分享一个用纯 CSS3 实现的,漂亮的 input 输入框动画样式库-Text input love. 点击每个输入框都用不同的动画效果,始终显示标签label,并显示 placeholder(占位符 ...
纯CSS3制作漂亮的价格表
阅读目录阐述 demo1 style.css demo2 style2.css 阐述网页上发布产品时,一般都有几套价格方案,通常我们将几套方案放在一起,用户可以相互比较决定购买哪个套餐. 最常见的 ...
CSS3制作漂亮的照片墙
CSS3可以做动画大家肯定都是耳熟能详的了,但是大家有木有巧妙的利用这一个功能来制作一款漂亮的照片墙呢? 那么今天我们就利用CSS3动画这一特性来一起制作漂亮的照片墙吧! 第一部分:HTML 这里我们 ...
css3实现漂亮的倒影效果
实际上还有很多CSS新属性并未包含进CSS3官方标准中.-webkit-box-reflect属性就是以谷歌浏览器为代表的Webkit渲染引擎独有的特征.-webkit-box-reflect的作用是 ...
【】Unity3D 等技术目录
‎时间:2017‎年‎6‎月‎29‎日 []Unity3D Unity3D游戏开发脚本系统 Unity3D地形编辑器 Unity3D 音频系统 Unity3D 灯光系统 Unity3D 五子棋大战 ...
24个为Web开发人员准备的CSS3实用教程
本文搜集了一些关于CSS3的最新教程.你可以根据这些教程或技术来实现网页设计,包括:文字阴影.圆角框.盒模型尺寸计算(box sizing).透明效果处理.多重背景.边框图像等.以下这些都是非常实用的 ...

CSS3实现漂亮ToolTips

源代码下载

CSS3实现漂亮ToolTips相关推荐

最新文章

热门文章