最近的计划,就是每天来几个特效,当然这里有限制,在什么候选区只能放一个,还每天有限制发布的,哎,

啊 终于写完了,看到一个挺好玩的东西,想到能不能用网页的特效做出来,试试呗!不过,一想肯东有很多的

相类似的了,不过,反正就是挺有成就感的。高兴即来淫诗一首,两眼黑黑,灯下黑黑,嘿嘿嘿嘿嘿嘿嘿嘿。。。

赶紧上例子咯

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5. <meta charset="UTF-8">
  6. <title></title>
  7. <link rel="stylesheet" href="css/normalize.css" />/*normalize这个css框架呢,可以去搜搜,挺好用的*/
  8. <link rel="stylesheet" href="css/font-awesome.min.css" />/*这个呢,是小图标css框架,用法和bootstrap差不多*/
  9. <style>
  10. *,*:before,*:after{
  11. -ms-box-sizing:border-box;
  12. -o-box-sizing:border-box;
  13. -moz-box-sizing:border-box;
  14. -webkit-box-sizing:border-box;
  15.  
  16. box-sizing:border-box;/*这里主要是想真正的widdth就是width,不要把什么padding啊,border啊等加进来,这才真正的符合人的视角*/
  17. }
  18. html,body{
  19. width: 100%;
  20. height: 100%;
  21. background: rgba(95, 234, 234, 0.8);
  22. font-size: 24px;
  23. font-weight: 600;
  24. font-family: "arial black";
  25. }
  26. ul,li{
  27. list-style: none;
  28. display: inline-block;
  29. }
  30. a{
  31. display: block;
  32. text-decoration: none;
  33. color:rgba(0,0,0,0.3);
  34. }
  35. li{
  36. padding: 20px 0;
  37. margin: 0 10px;
  38. }
  39. .da{
  40. width: 700px;
  41. margin-top: 200px;
  42. margin-left: 50%;
  43. -webkit-transform:translateX(-50%);/*这两行代码也是居中的技巧*/
  44. }
  45. .da li{
  46. width: 100px;
  47. height: 100px;
  48.  
  49. text-align: center;
  50. position: relative;
  51. z-index: 999;/*一定位就要想到z-index,不管有没有用*/
  52. }
  53. .da span{
  54. position: absolute;
  55. bottom:100%;/*我归之为“巧用100%”,先什么left,top 啊,都不加,光是position看看,因为%是相对于他的父类,如果他的上边贴紧父类的上边框,这就是不是可以考虑用100%了呢?*/
    left: 60%;
  56. margin-left: -50%;
    z-index: 9998;
  57. width: 80px;
  58. height: 80px;
  59. background: #fff;
  60. border-radius: 50%;/*圆角*/
  61. color:rgba(12, 130, 130, 0.8);
  62. opacity: 0;
  63. transition:opacity 0.3;/*css3很重要的标签,过渡。4个值,标签名(对象是谁)时间(多久)方式(匀速啊,变速啊,先怎么后怎么样啊)延迟时间(等多久开始)我这里只用到前两个*/
  64. }
  65. .da span:after{/*做完今天这个,我感觉伪类就是来修修补补,或者拼接用的,当然,他还有一个很好用的东东,就是清除浮动{content:“”;display:block;clear:both,核心这个}*/
  66. content: "";
  67. width: 40px;
  68. height: 40px;
  69. background: url(imges/tip.svg) no-repeat;/*avg格式的图片,不会因为变大而失真*/
  70. position: absolute;
  71. top:100%;
  72. left:80%;
  73. margin-left: -50%;
  74. margin-top: -8px;
  75.  
  76. }
  77. .da i{
  78. position: absolute;
  79. left:85%;
  80. margin-left:-50%;
  81. margin-top:30px;
  82. margin-bottom: 20px;
  83. }
    /*-----------------------接下来就是核心代码,前边是在搭框架-----------------------------------------------------------------*/
  84. span{
  85. transition:transform 0.3s;
  86. -webkit-transition:transform 0.3s;
  87. }
  88. span i{
  89. transition:transform 0.1s;
  90. -webkit-transition:transform 0.1s;
  91. }
  92. li:hover span{
  93. transform:rotate3d(0,0,0,0deg) translate3d(0,0,0) scale3d(1,1,1);
  94. -webkit-transform:rotate3d(0,0,0,0deg) translate3d(0,0,0) scale3d(1,1,1);
  95. opacity: 1;
  96. }
  97. li:hover span i{
  98. transform:scale3d(1,1,1) translate3d(0,0,0);
  99. -webkit-transform:scale3d(1,1,1) translate3d(0,0,0);
  100. }/*这里每个类吧相同的都提出来了,相同的是什么?就是最终的状态是一样的*/
  1. /*接下来就是每个分部分,rotatwd旋转角度 scale缩放 translate平移 其中加了3d就是让他进行3d变换,当然还有一个2d。 */
  1. span.content1{
  2. transform-origin: center bottom;
  3. -webkit-transform-origin: center bottom;
  4. transform:rotate3d(1,1,1,60deg);
  5. -webkit-transform:rotate3d(1,1,1,60deg);
  6. }
  7. span.content1 i{
  8. transform:scale3d(0.01,0.01,1);
  9. -webkit-transform:scale3d(0.01,0.01,1);
  10. }
  11. span.content2{
  12. transform-origin: center bottom;
  13. -webkit-transform-origin: center bottom;
  14. transform:translate3d(0,20px,0);
  15. -webkit-transform:translate3d(0,20px,0);
  16. }
  17. span.content2 i{
  18. transform:translate3d(0,10px,0);
  19. -webkit-transform:translate3d(0,10px,0);
  20. }
  21. span.content3{
  22. transform-origin: center bottom;
  23. -webkit-transform-origin: center bottom;
  24. transform:rotate3d(0,1,0,90deg) translate3d(0,8px,0);
  25. -webkit-transform:rotate3d(0,1,0,90deg) translate3d(0,8px,0);
  26. }
  27. span.content3 i{
  28. transform:translate3d(0,-2px,0);
  29. -webkit-transform:translate3d(0,-2px,0);
  30. }
  31. span.content4{
  32. transform:translate3d(0,-12px,0);
  33. -webkit-transform:translate3d(0,-12px,0);
  34. }
  35. span.content4 i{
  36. transform:translate3d(0,12px,0);
  37. -webkit-transform:translate3d(0,12px,0);
  38. }
  39. span.content5{
  40. transform:scale(0.01) translate3d(0,10px,0);/*最重要的,就是scale如果你把它缩成0,可能会发生效果不发出现的情况,不行你可以去试,所以尽可能把他弄成0,01*/
  41. -webkit-transform:scale(0.01) translate3d(0,10px,0);
  42. }
  43. span.content5 i{
  44. transform:translate3d(0,20px,0);
  45. -webkit-transform:translate3d(0,20px,0);
  46. }
  47. </style>
  48. </head>
  49. <body>
  50. <div class="da">
  51. <ul>
  52. <li>
  53. <a href="#">nomalse<span class="content1"><i class="fa fa-camera"></i></span></a>
  54. </li>
  55. <li>
  56. <a href="#">palse<span class="content2" ><i class="fa fa-bicycle"></i></span></a>
  57. </li>
  58. <li>
  59. <a href="#">mate<span class="content3" ><i class="fa fa-bus"></i></span></a>
  60. </li>
  61. <li>
  62. <a href="#">script<span class="content4"><i class="fa fa-ship"></i></span></a>
  63. </li>
  64. <li>
  65. <a href="#">css3<span class="content5"><i class="fa fa-plane"></i></span></a>
  66. </li>
  67. </ul>
  68. </div>
  69. </body>
  70.  
  71. </html>

  

 

css3 小图标提示特效的更多相关文章

  1. CSS3小图标菜单导航

    在线演示 本地下载

  2. 9款超绚丽的HTML5/CSS3应用和动画特效

    1.CSS3飘带状3D菜单 菜单带小图标 这次我们要来分享一款很特别的CSS3菜单,菜单的外观是飘带状的,并且每一个菜单项有一个精美的小图标,鼠标滑过菜单项时,菜单项就会向上凸起,像是飘带飘动一样,形 ...

  3. 精美的HTML5/CSS3表单 带小图标

    今天我们要来分享一款非常精美的HTML5/CSS3表单,准备地说,这是一款经过美化的input输入表单,每一个输入表单都可以定义其两侧的小图标,非常华丽.另外,这款表单应用还采用了3种不同的风格主题, ...

  4. 使用css3新属性clip-path制作小图标

    一般一个网页上面,或多或少都会用到一些小图标,展示这些小图标的方法有很多种.最简单的做法就是将UI图上面的每个小图标都保存为图片,一个小图标就一张图片.但这也是比较笨的方法,因为浏览器同一时间最多加载 ...

  5. 9款基于CSS3 Transitions实现的鼠标经过图标悬停特效

    之前给大家分享了很多css3实现的按钮特效.今天给大家分享9款基于CSS3 Transitions实现的鼠标经过图标悬停特效.这款特效适用浏览器:360.FireFox.Chrome.Safari.O ...

  6. jQ小图标上下滑动特效

    嗯,又到了,夜静饥寒的时候,手指颤抖,回望去,屋内满是寂静,寥寥绰影,咳咳咳,想我程序员之路还没到终点...就...咳咳咳 好了日常神经结束,还要涂我的唇膏.还剩下,最后一章,js动画(四),明天放上 ...

  7. 基于CSS3飘带状3D菜单 菜单带小图标

    这次我们要来分享一款很特别的CSS3菜单,菜单的外观是飘带状的,并且每一个菜单项有一个精美的小图标,鼠标滑过菜单项时,菜单项就会向上凸起,像是飘带飘动一样,形成非常酷的3D视觉效果.这款CSS3飘带状 ...

  8. 利用纯粹的CSS3替代小图标---向右箭头

    1.向右的箭头>  . 看到很多网站里面向右的箭头都是图片代替的,但是为了网站的性能,我们一般的原则是能够避免使用图片的尽量不用图片   比如看下携程个人中心首页面,向右的箭头 其实现思路是这样 ...

  9. css3 向上淡入 小图标翻转 360度旋转

    代码 <!DOCTYPE HTML> <html> <style type="text/css"> div { border: 1px soli ...

随机推荐

  1. eclipse的插件

    jode_1.0.6(Java Optimize and Decompile Environment ) 非常好用的Eeclipse的反编译插件,随时点击,随时查看源代码,但他的官方下载的都是核心源码 ...

  2. svn branch 的使用

    svn revision graph 中选中 "wc"(Mark current revision of your working copy.)这个选项后, 当前工作副本的版本号会 ...

  3. 丑数 LeeTCode

    题目链接:http://www.lintcode.com/zh-cn/problem/ugly-number-ii/ 题目描述:设计一个算法,找出只含素因子2,3,5 的第 n 大的数.符合条件的数如 ...

  4. Knockout 系列

    由于近期要做的项目要兼容到IE6,原来的angular框架已经不能满足现在的兼容性要求. 解决方案: 1. 放弃框架,改为库 2. UI库采用 Knockout,css 3. css库 采用 boot ...

  5. Codeforces #350

    A题: 题意:判断火星上的节假日最多和最少 分析:除以7,然后我们对原数模7的余数进行判断一下即可 #include <iostream> #include <cstdio> ...

  6. mysql的python api

    我采用的是MySQLdb操作的MYSQL数据库.先来一个简单的例子吧: 1 2 3 4 5 6 7 8 9 10 import MySQLdb   try:     conn=MySQLdb.conn ...

  7. 对float的理解

    从IE6下的双边距引出 对一个div设置float:left;同时设置了margin-left:100px时在IE6下会出现双边距. 有两种解决办法: 1,推荐办法.加display:inline 2 ...

  8. 2016年最全面的VR资源盘点,不只有VR视频播放器还有具体到步骤的VR资源

    2016年过去了,有多少人开始使用VR来观看我们喜欢的视频资源呢?比传统视频更高的沉浸感,甚至在VR眼镜的视角中,自己仿佛化生成视频中的主角一般.然而,这种体验只有VR眼镜还是不行的,还需要有一个VR ...

  9. 解决KVM中鼠标不同步问题

    VNCViewer中的鼠标走得总是比本地系统中的鼠标要慢,不同步,往往实体机中的鼠标都移出vnc窗口外边了,虚拟机中的鼠标指针还没移到需要点击的位置,操作起来很不方便. 起初的想法也是配置的问题,就按 ...

  10. kvm 动态挂载硬盘

    根据最新需求需要动态的给kvm下的windows虚拟机挂载硬盘,网上查看了很多资料终于试通了,在这里记录下方便自己回忆,同事可以给大家做做参考,如果有问题欢迎吐槽 环境:先说说我使用的环境,环境是使用 ...