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. echarts常用方法，饼图切换圆环中文字（三）

    在echarts的饼图应用时,遇到过一个需求就是鼠标移到半环上可以切换环中的文字,同时支持legend点击事件.误区是,鼠标移动到环上重新渲染option,以切换内部的文字.重新渲染option的做法 ...

  2. nodejs常见问题

    Js 基础问题 与前端 Js 不同, 后端是直面服务器的, 更加偏向内存方面. [Basic] 类型判断    [Basic] 作用域    [Basic] 引用传递    [Basic] 内存释放  ...

  3. zzw原创_非root用户下安装nginx

    想自己安装nginx,又不相用到root用户. 非root用户下(本文为用户bdctool)来ngnix安装,要依赖pcre库.zlib库等, 1. 下载依赖包:下载地址 pcre(www.pcre. ...

  4. BackBone Network

    总结至维基百科https://en.wikipedia.org/wiki/Backbone_network 骨干连接各个网络,用于不同的局域网或子网(LANs or subnetworks)之间信息交 ...

  5. 【性能测试】LoadRunner11安装（包含破解、汉化）

    LoadRunner安装(包含破解.汉化) 安装LoadRunner a.以解压包的方式打开[性能测试工具LR11.00].loadrunner-11.iso文件,运行“setup.ext”(花费时间 ...

  6. 构建微服务：Spring boot 入门篇

    什么是Spring Boot Spring Boot 是由 Pivotal 团队提供的全新框架,其设计目的是用来简化新 Spring 应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而 ...

  7. 发现sql注入的一些技巧

    1.如果一个'导致错误,试着查看\'能否成功(因为反斜杠在MySQL中取消了单引号)2.你也可以尝试注释掉,--',看页面返回是否正常.3.如果正常的输入只是一个整数,你可以尝试减去一些量,然后查看减 ...

  8. python 语法

    Python基础语法举例# 1 缩进和空格表示代码块# 2()连接多行print("()连接多行")str = ("uhfjfjkfj"       " ...

  9. C# 向程序新建的窗体中添加控件，控件需要先实例化，然后用controls.add添加到新的窗体中去

    C# 向程序新建的窗体中添加控件,控件需要先实例化,然后用controls.add添加到新的窗体中去 Form settingForm = new Form(); setForm deviceSet ...

  10. Scrapy的piplines.py存储文件和存储mongodb

    一.将数据保存到文件 1.piplines.py文件 import json class TencentPipeline(object): def open_spider(self,spider): ...