css3 小图标提示特效
最近的计划,就是每天来几个特效,当然这里有限制,在什么候选区只能放一个,还每天有限制发布的,哎,
啊 终于写完了,看到一个挺好玩的东西,想到能不能用网页的特效做出来,试试呗!不过,一想肯东有很多的
相类似的了,不过,反正就是挺有成就感的。高兴即来淫诗一首,两眼黑黑,灯下黑黑,嘿嘿嘿嘿嘿嘿嘿嘿。。。
赶紧上例子咯
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title></title>
- <link rel="stylesheet" href="css/normalize.css" />/*normalize这个css框架呢,可以去搜搜,挺好用的*/
- <link rel="stylesheet" href="css/font-awesome.min.css" />/*这个呢,是小图标css框架,用法和bootstrap差不多*/
- <style>
- *,*:before,*:after{
- -ms-box-sizing:border-box;
- -o-box-sizing:border-box;
- -moz-box-sizing:border-box;
- -webkit-box-sizing:border-box;
- box-sizing:border-box;/*这里主要是想真正的widdth就是width,不要把什么padding啊,border啊等加进来,这才真正的符合人的视角*/
- }
- html,body{
- width: 100%;
- height: 100%;
- background: rgba(95, 234, 234, 0.8);
- font-size: 24px;
- font-weight: 600;
- font-family: "arial black";
- }
- ul,li{
- list-style: none;
- display: inline-block;
- }
- a{
- display: block;
- text-decoration: none;
- color:rgba(0,0,0,0.3);
- }
- li{
- padding: 20px 0;
- margin: 0 10px;
- }
- .da{
- width: 700px;
- margin-top: 200px;
- margin-left: 50%;
- -webkit-transform:translateX(-50%);/*这两行代码也是居中的技巧*/
- }
- .da li{
- width: 100px;
- height: 100px;
- text-align: center;
- position: relative;
- z-index: 999;/*一定位就要想到z-index,不管有没有用*/
- }
- .da span{
- position: absolute;
- bottom:100%;/*我归之为“巧用100%”,先什么left,top 啊,都不加,光是position看看,因为%是相对于他的父类,如果他的上边贴紧父类的上边框,这就是不是可以考虑用100%了呢?*/
left: 60%;- margin-left: -50%;
z-index: 9998;- width: 80px;
- height: 80px;
- background: #fff;
- border-radius: 50%;/*圆角*/
- color:rgba(12, 130, 130, 0.8);
- opacity: 0;
- transition:opacity 0.3;/*css3很重要的标签,过渡。4个值,标签名(对象是谁)时间(多久)方式(匀速啊,变速啊,先怎么后怎么样啊)延迟时间(等多久开始)我这里只用到前两个*/
- }
- .da span:after{/*做完今天这个,我感觉伪类就是来修修补补,或者拼接用的,当然,他还有一个很好用的东东,就是清除浮动{content:“”;display:block;clear:both,核心这个}*/
- content: "";
- width: 40px;
- height: 40px;
- background: url(imges/tip.svg) no-repeat;/*avg格式的图片,不会因为变大而失真*/
- position: absolute;
- top:100%;
- left:80%;
- margin-left: -50%;
- margin-top: -8px;
- }
- .da i{
- position: absolute;
- left:85%;
- margin-left:-50%;
- margin-top:30px;
- margin-bottom: 20px;
- }
/*-----------------------接下来就是核心代码,前边是在搭框架-----------------------------------------------------------------*/- span{
- transition:transform 0.3s;
- -webkit-transition:transform 0.3s;
- }
- span i{
- transition:transform 0.1s;
- -webkit-transition:transform 0.1s;
- }
- li:hover span{
- transform:rotate3d(0,0,0,0deg) translate3d(0,0,0) scale3d(1,1,1);
- -webkit-transform:rotate3d(0,0,0,0deg) translate3d(0,0,0) scale3d(1,1,1);
- opacity: 1;
- }
- li:hover span i{
- transform:scale3d(1,1,1) translate3d(0,0,0);
- -webkit-transform:scale3d(1,1,1) translate3d(0,0,0);
- }/*这里每个类吧相同的都提出来了,相同的是什么?就是最终的状态是一样的*/
- /*接下来就是每个分部分,rotatwd旋转角度 scale缩放 translate平移 其中加了3d就是让他进行3d变换,当然还有一个2d。 */
- span.content1{
- transform-origin: center bottom;
- -webkit-transform-origin: center bottom;
- transform:rotate3d(1,1,1,60deg);
- -webkit-transform:rotate3d(1,1,1,60deg);
- }
- span.content1 i{
- transform:scale3d(0.01,0.01,1);
- -webkit-transform:scale3d(0.01,0.01,1);
- }
- span.content2{
- transform-origin: center bottom;
- -webkit-transform-origin: center bottom;
- transform:translate3d(0,20px,0);
- -webkit-transform:translate3d(0,20px,0);
- }
- span.content2 i{
- transform:translate3d(0,10px,0);
- -webkit-transform:translate3d(0,10px,0);
- }
- span.content3{
- transform-origin: center bottom;
- -webkit-transform-origin: center bottom;
- transform:rotate3d(0,1,0,90deg) translate3d(0,8px,0);
- -webkit-transform:rotate3d(0,1,0,90deg) translate3d(0,8px,0);
- }
- span.content3 i{
- transform:translate3d(0,-2px,0);
- -webkit-transform:translate3d(0,-2px,0);
- }
- span.content4{
- transform:translate3d(0,-12px,0);
- -webkit-transform:translate3d(0,-12px,0);
- }
- span.content4 i{
- transform:translate3d(0,12px,0);
- -webkit-transform:translate3d(0,12px,0);
- }
- span.content5{
- transform:scale(0.01) translate3d(0,10px,0);/*最重要的,就是scale如果你把它缩成0,可能会发生效果不发出现的情况,不行你可以去试,所以尽可能把他弄成0,01*/
- -webkit-transform:scale(0.01) translate3d(0,10px,0);
- }
- span.content5 i{
- transform:translate3d(0,20px,0);
- -webkit-transform:translate3d(0,20px,0);
- }
- </style>
- </head>
- <body>
- <div class="da">
- <ul>
- <li>
- <a href="#">nomalse<span class="content1"><i class="fa fa-camera"></i></span></a>
- </li>
- <li>
- <a href="#">palse<span class="content2" ><i class="fa fa-bicycle"></i></span></a>
- </li>
- <li>
- <a href="#">mate<span class="content3" ><i class="fa fa-bus"></i></span></a>
- </li>
- <li>
- <a href="#">script<span class="content4"><i class="fa fa-ship"></i></span></a>
- </li>
- <li>
- <a href="#">css3<span class="content5"><i class="fa fa-plane"></i></span></a>
- </li>
- </ul>
- </div>
- </body>
- </html>
css3 小图标提示特效的更多相关文章
- CSS3小图标菜单导航
在线演示 本地下载
- 9款超绚丽的HTML5/CSS3应用和动画特效
1.CSS3飘带状3D菜单 菜单带小图标 这次我们要来分享一款很特别的CSS3菜单,菜单的外观是飘带状的,并且每一个菜单项有一个精美的小图标,鼠标滑过菜单项时,菜单项就会向上凸起,像是飘带飘动一样,形 ...
- 精美的HTML5/CSS3表单 带小图标
今天我们要来分享一款非常精美的HTML5/CSS3表单,准备地说,这是一款经过美化的input输入表单,每一个输入表单都可以定义其两侧的小图标,非常华丽.另外,这款表单应用还采用了3种不同的风格主题, ...
- 使用css3新属性clip-path制作小图标
一般一个网页上面,或多或少都会用到一些小图标,展示这些小图标的方法有很多种.最简单的做法就是将UI图上面的每个小图标都保存为图片,一个小图标就一张图片.但这也是比较笨的方法,因为浏览器同一时间最多加载 ...
- 9款基于CSS3 Transitions实现的鼠标经过图标悬停特效
之前给大家分享了很多css3实现的按钮特效.今天给大家分享9款基于CSS3 Transitions实现的鼠标经过图标悬停特效.这款特效适用浏览器:360.FireFox.Chrome.Safari.O ...
- jQ小图标上下滑动特效
嗯,又到了,夜静饥寒的时候,手指颤抖,回望去,屋内满是寂静,寥寥绰影,咳咳咳,想我程序员之路还没到终点...就...咳咳咳 好了日常神经结束,还要涂我的唇膏.还剩下,最后一章,js动画(四),明天放上 ...
- 基于CSS3飘带状3D菜单 菜单带小图标
这次我们要来分享一款很特别的CSS3菜单,菜单的外观是飘带状的,并且每一个菜单项有一个精美的小图标,鼠标滑过菜单项时,菜单项就会向上凸起,像是飘带飘动一样,形成非常酷的3D视觉效果.这款CSS3飘带状 ...
- 利用纯粹的CSS3替代小图标---向右箭头
1.向右的箭头> . 看到很多网站里面向右的箭头都是图片代替的,但是为了网站的性能,我们一般的原则是能够避免使用图片的尽量不用图片 比如看下携程个人中心首页面,向右的箭头 其实现思路是这样 ...
- css3 向上淡入 小图标翻转 360度旋转
代码 <!DOCTYPE HTML> <html> <style type="text/css"> div { border: 1px soli ...
随机推荐
- eclipse的插件
jode_1.0.6(Java Optimize and Decompile Environment ) 非常好用的Eeclipse的反编译插件,随时点击,随时查看源代码,但他的官方下载的都是核心源码 ...
- svn branch 的使用
svn revision graph 中选中 "wc"(Mark current revision of your working copy.)这个选项后, 当前工作副本的版本号会 ...
- 丑数 LeeTCode
题目链接:http://www.lintcode.com/zh-cn/problem/ugly-number-ii/ 题目描述:设计一个算法,找出只含素因子2,3,5 的第 n 大的数.符合条件的数如 ...
- Knockout 系列
由于近期要做的项目要兼容到IE6,原来的angular框架已经不能满足现在的兼容性要求. 解决方案: 1. 放弃框架,改为库 2. UI库采用 Knockout,css 3. css库 采用 boot ...
- Codeforces #350
A题: 题意:判断火星上的节假日最多和最少 分析:除以7,然后我们对原数模7的余数进行判断一下即可 #include <iostream> #include <cstdio> ...
- mysql的python api
我采用的是MySQLdb操作的MYSQL数据库.先来一个简单的例子吧: 1 2 3 4 5 6 7 8 9 10 import MySQLdb try: conn=MySQLdb.conn ...
- 对float的理解
从IE6下的双边距引出 对一个div设置float:left;同时设置了margin-left:100px时在IE6下会出现双边距. 有两种解决办法: 1,推荐办法.加display:inline 2 ...
- 2016年最全面的VR资源盘点,不只有VR视频播放器还有具体到步骤的VR资源
2016年过去了,有多少人开始使用VR来观看我们喜欢的视频资源呢?比传统视频更高的沉浸感,甚至在VR眼镜的视角中,自己仿佛化生成视频中的主角一般.然而,这种体验只有VR眼镜还是不行的,还需要有一个VR ...
- 解决KVM中鼠标不同步问题
VNCViewer中的鼠标走得总是比本地系统中的鼠标要慢,不同步,往往实体机中的鼠标都移出vnc窗口外边了,虚拟机中的鼠标指针还没移到需要点击的位置,操作起来很不方便. 起初的想法也是配置的问题,就按 ...
- kvm 动态挂载硬盘
根据最新需求需要动态的给kvm下的windows虚拟机挂载硬盘,网上查看了很多资料终于试通了,在这里记录下方便自己回忆,同事可以给大家做做参考,如果有问题欢迎吐槽 环境:先说说我使用的环境,环境是使用 ...