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. Lab 9-3

    Analyze the malware found in the file Lab09-03.exe using OllyDbg and IDA Pro. This malware loads thr ...

  2. docker使用笔记

    项目部署时用到了docker,以下分享了我在实践中使用的指令,和对docker一些个人的理解(※和字体加重部分) 本文选择使用网易的镜像源:https://c.163.com/hub#/m/home/ ...

  3. mac上运行window程序。

    wine https://wiki.winehq.org/Wine_User%27s_Guide#Quick_start #使用brew brew install Caskroom/cask/xqua ...

  4. SpringBoot+mybatis:报错Fri Oct 19 14:29:24 CST 2018 WARN: Establishing SSL connection without server's identity verification is not recommended. According to MySQL 5.5.45+, 5.6.26+ and 5.7.6+ requiremen

    报错:Fri Oct 19 14:29:24 CST 2018 WARN: Establishing SSL connection without server's identity verifica ...

  5. 客户端与服务器之间通信收不到信息——readLine()

    写服务器端和客户端之间通信,结果一直读取不到信息,在https://blog.csdn.net/yiluxiangqian7715/article/details/50173573 上找到了原因:使用 ...

  6. kubeadm安装kubernetes-v1.13.1

    kubeadm安装kubernetes-v1.13.1 centos虚拟机使用kubeadm安装k8s-v1.13.1. 机器信息如下: 主机名 ip master 192.168.239.200 n ...

  7. vue1.0配置路由

    1,//创建 router 实例 var router = new VueRouter() 2,//components下新建home.vue组件,并在app.vue中引入模块: import hom ...

  8. angular6 input节流

    一直以为   pipe(debounceTime(1000), distinctUntilChanged())  不起作用 原因:使用方法错误 <input type="text&qu ...

  9. Html+css学习笔记一 创建一个网页

    第一个网页 新建一个记事本,把名字改成first.html <html> <head> <title>MyFristHtml</title> </ ...

  10. Mybatis逆向工程自动生成代码（Ubuntu18.04-idea环境）

    最近在学习taotao商城项目,有一节是关于mybatis逆向工程的,参考了这个博文,https://blog.csdn.net/yerenyuan_pku/article/details/71909 ...