HTML:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="css/style.css">
    <title></title>
</head>
<body>
    <div class="middle">
            <a class="btn" href="#">
                <i class="fa fa-chrome"></i>
            </a>
            <a class="btn" href="#">
                <i class="fa fa-edge"></i>
            </a>
            <a class="btn" href="#">
                <i class="fa fa-firefox"></i>
            </a>
            <a class="btn" href="#">
                <i class="fa fa-internet-explorer"></i>
            </a>
            <a class="btn" href="#">
                <i class="fa fa-opera"></i>
            </a>
    </div>
</body>
</html>

CSS:

body{
    margin:;
    padding:;
}
.middle{
    position: absolute;
    top:50%;
    transform: translateY(-50%);
    width:100%;
    text-align: center;
}
.btn{
    display: inline-block;
    width:90px;
    height:90px;
    border-radius: 30%;
    color:#3498db;
    background: #f1f1f1;
    margin:10px;
    box-shadow:0 5px 15px -5px #00000070;
    overflow: hidden;
    position: relative;
}
.btn i{
    line-height: 90px;
    font-size:28px;
    transition: 0.2s linear;
}
.btn:hover i{
    transform: scale(1.3);
    color:#f1f1f1;
}
.btn::before{
    content: "";
    position:absolute;
    width:120%;
    height:120%;
    background:#3498db;
    transform: rotate(45deg);
    left:-110%;
    top:90%;
}
.btn:hover::before{
    animation: aaa 0.7s 1;
    top:-10%;
    left:-10%;
}
@keyframes aaa {
    0%{
        left:-110%;
        top:90%;
    }
    50%{
        left:10%;
        top:-30%;
    }
    100%{
        left:-10%;
        top:-10%;
    }
}

效果：

CSS效果：动态图标的更多相关文章

  1. 有趣的纯CSS实现动态晴阴雨雪

    我们先来看看实现的效果吧 非常的美腻,对吧.这个是纯css,且单标签实现的哦~ 先贴完整代码,我们再来看看这个里面究竟有什么可以借鉴的知识点 <!DOCTYPE html> <htm ...

  2. 一步步打造自己的纯CSS单标签图标库

    图标作为网页设计中的一部分,其在凸显网页重要元素特性,视觉交互.引导以及网页装饰等充当的角色作用举足轻重.由于图标普遍具有尺寸小的特点,在项目实践时不宜将每个图标作为单个图片元素进行加载,这会增加Ht ...

  3. ASP.NET MVC 4 Optimization的JS/CSS文件动态合并及压缩

    JS/CSS文件的打包合并(Bundling)及压缩(Minification)是指将多个JS或CSS文件打包合并成一个文件,并在网站发布之后进行压缩,从而减少HTTP请求次数,提高网络加载速度和页面 ...

  4. CSS 让 fontawesome 图标字体变细

    一句 CSS 让 fontawesome 图标字体变细 自从 iOS 某个版本发布之后,前端的流行趋势是什么都越来越细…字体越来越细…图标线条也越来越细.而老物 fontawesome 粗壮的线条风格 ...

  5. CSS实现三角形图标原理解析

    CSS实现三角形图标原理解析: border边框语法: border 四条边框设置border-left 设置左边框,一般单独设置左边框样式使用border-right 设置右边框,一般单独设置右边框 ...

  6. css实现动态阴影、蚀刻文本、渐变文本

    css实现动态阴影 创建与类似的阴影box-shadow 而是基于元素本身的颜色. 代码实现: <div class="dynamic-shadow-parent"> ...

  7. 【转】提示框第三方库之MBProgressHUD iOS toast效果 动态提示框效果

    原文网址:http://www.zhimengzhe.com/IOSkaifa/37910.html MBProgressHUD是一个开源项目,实现了很多种样式的提示框,使用上简单.方便,并且可以对显 ...

  8. [转载] 高大上的 CSS 效果：Shape Blobbing

    这篇大部分是转载,来自<高大上的 CSS 效果:Shape Blobbing>和 <Shape Blobbing in CSS> 有部分是自己理解和整理,配合效果要做出 app ...

  9. CSS 效果汇总

    只要决心够, 就能征服痛苦. 把一些常用的 CSS 效果记录下来 1. 利用 z-index :hover 显示层 github 效果地址>> 此效果主要利用 a:hover 来改变 sp ...

  10. CSS效果：这里有你想要的CSS3漂亮的自定义Checkbox各种复选框

    在原来有一篇文章写到了<CSS效果篇--纯CSS+HTML实现checkbox的思路与实例>. 今天这篇文章主要写各种自定义的checkbox复选框,实现如图所示的复选框: 大致的html ...

随机推荐

  1. LeetCode--026--删除排序数组中的重复项(java)

    给定一个排序数组,你需要在原地删除重复出现的元素,使得每个元素只出现一次,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入数组并在使用 O(1) 额外空间的条件下完成. 示例 1 ...

  2. Python中怎么读写文件

    python中对文件的操作大概分为三步:打开文件.操作文件(读.写.追加写入).关闭文件. 1.无论对文件做哪种操作,操作前首先要保证文件被打开了,即需要一个打开的操作. 例:open(XXX.txt ...

  3. 蓝鲸DevOps深度解析系列（2）：蓝盾流水线初体验

    关注嘉为科技,获取运维新知 前面一篇文章<蓝鲸DevOps深度解析系列(1):蓝盾平台总览>,我们总览了蓝鲸DevOps平台的背景.应用场景.特点和能力: ​ 接下来我们继续解析蓝盾平台的 ...

  4. svn 的权限配置

    #分配用户所属组 g_admin=admin g_ui=zhangsan,lisi g_code=wangwu g_test=zhaoliu,qianqi #分配目录权限 #表示项目根目录 [/] @ ...

  5. 【图论】最短路问题之spfa

    写在算法前面: 前向星存图(一个神奇的超越邻接矩阵的存在) 首先讲一下需要定义的一些东西?? 1.head数组:head[点数]:head[i]表示以当前点i为起点的最后一条边(这里的最后指的是编号[ ...

  6. ajax请求多次刷新

    难道只能设置定时器每隔一秒通过 Ajax 向后台请求数据来实现吗?1.nodejs的 http://socket.io 支持上述 李宏训 所说的三种方式,另外还支持 Flash Socket.隐藏IF ...

  7. tensorflow lite的demo在android studio上环境搭建

    由于很久没有接触过Android开发,而且最早用的是eclipse,所以这个demo在android studio上的搭建过程,真的是踩了不少坑.记录这篇文章,纯粹是给自己一点收获. 环境搭建的过程, ...

  8. 322. Coin Change零钱兑换

    网址:https://leetcode.com/problems/coin-change/ 典型的动态规划问题,类比背包问题,这就是完全背包问题 问题的阶段:对数值 i 凑硬币 问题的状态:对数值 i ...

  9. div模拟文本框textarea

    需求:利用highlight.js对文本框中的内容进行高亮显示 1.highlight.js使用 js中:<script src="js/highlight/highlight.pac ...

  10. TP5.0 Redis(单例模式)(原)

    看到好多面试都问设计模式,我就简单的了解了一下,顺便把之前封装好的Reis做了一次修改. 单例模式(Singleton Pattern 单件模式或单元素模式) 单例模式确保某个类只有一个实例,而且自行 ...