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. android手机短信获取

    关于Android中对短信的一些相关操.我看到一个文章下面我就从标题中的三个方面来对Android系统中的短信操作进行一个简单地学习. 短信发送: 由于Android中对短信发送方法的优良封装,之后对 ...

  2. 浅谈UML中常用的几种图——用例图

    1.UML简介 统一建模语言(Unified Modeling Language,UML)又称标准建模语言,是始于1997年的一个OMG标准,它是一个支持模型化和软件系统开发的图形化语言,为软件开发的 ...

  3. Django中ORM介绍和字段及字段参数

    Object Relational Mapping(ORM) 1 ORM介绍 1.1 ORM概念 对象关系映射(Object Relational Mapping,简称ORM)模式是一种为了解决面向对 ...

  4. SQL Server 创建索引方法

    转自 <SQL Server 创建索引的 5 种方法> 地址:https://www.cnblogs.com/JiangLe/p/4007091.html 前期准备: create tab ...

  5. gevent模块学习(三)

    3. Group类,常用于不限制数量的管理异步任务的分组且可搜集运行结果 g = gevent.pool.Group(*args) -> Group 说明: 创建一个组对象,其实就是一个不限gr ...

  6. ldap 导出、导入ldif数据

    ldap 导出.导入ldif数据有如下方式: 1.dsadm(速度快,需要停止ldap实例) 2.dsconf(速度慢,需要保持ldap实例开启) windows导出.导入需要加上参数--unsecu ...

  7. FastCGI 进程意外退出造成500错误

    在一台新服务器上,安装新网站,之前只放至了一个网站.是服务器商配置好的,非集成环境. 添加了一个新站,路径都制定好了,但是在访问时出现了500错误.提示貌似是php的问题,但是之前的网站,运行的是di ...

  8. java按照指定格式输出系统时间使用SimpleDateFormat方法

    public class TimeThree { public static void main(String[] args) { SimpleDateFormat d = new SimpleDat ...

  9. 假如有Thread1、Thread2、Thread3、Thread4四条线程分别统计C、D、E、F四个盘的大小

    假如有Thread1.Thread2.Thread3.Thread4四条线程分别统计C.D.E.F四个盘的大小,所有线程都统计完毕交给Thread5线程去做汇总,应当如何实现? 实现1:用concur ...

  10. 一条命令关掉centos所有不必要的服务和端口号

    centos作为服务器开放的服务多了,难免一些服务软件有漏洞,开放的端口号越多,上线的服务器越危险,所以我们必须在服务器上线之前把centos里面不必要的服务全部干掉,不让坏人有可乘之机. 首先看一下 ...