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. scrapy 中crawlspider 爬虫

    爬取目标网站: http://www.chinanews.com/rss/rss_2.html 获取url后进入另一个页面进行数据提取 检查网页: 爬虫该页数据的逻辑: Crawlspider爬虫类: ...

  2. jmeter 上传附件 如图片

    1.要勾选 Use multipart/form-data for POST,否则request中将不包含上传的文件 2.MIME类型为application/octet-stream 图如下:对应 ...

  3. Petrozavodsk Winter Camp, Warsaw U, 2014, A The Carpet

    一个地图上有若干障碍,问允许出现一个障碍的最大子矩形为多大? 最大子矩形改编 #include<bits/stdc++.h> using namespace std; #define re ...

  4. FreeMaker入门介绍

    一.FreeMaker介绍 FreeMarker是一款免费的Java模板引擎,是一种基于模板和数据生成文本(HMLT.电子邮件.配置文件.源代码等)的工具,它不是面向最终用户的,而是一款程序员使用的组 ...

  5. CentOS 7 配置nginx并默认强制使用https对http进行跳转

    1.安装nginx yum install nginx 2.启动nginx服务 service nginx start 3.开启防火墙80端口,云服务器和本地虚拟服务器各有不同,不再赘述. 4.访问你 ...

  6. java 动态增/减集合元素

    1. 简介 有时候需要在集合遍历过程中进行增/删,下面介绍几种正确的操作方式. 2. 示例 例如有如下集合[1, 2, 2, 3, 5],需要删除被2整除的元素. import java.util.* ...

  7. Jenkins结合shell脚本实现（gitLab/gitHub）前端项目自动打包部署服务器

    原始发布部署: 石器时代的我们,先是本地打包好项目,在去服务器上把原来的文件删了,然后回到本地copy到服务器: 这操看起来简单,实际部署的人就知道多烦了,假如来几个项目都要重新发布:那就爽了: 今天 ...

  8. 转载：Shell 脚本加密 - 略有修改

    shc是一个加密shell脚本的工具.它的作用是把shell脚本转换为一个可执行的二进制文件. shc 安装 yum -y install shc 如果yum不能安装,请移步官方下载rpm包 http ...

  9. history program（language）

    1950与1960年代 有三个现代编程语言于1950年代被设计出来,这三者所衍生的语言直到今日仍旧广泛地被采用: Fortran (1955),名称取自"FORmula TRANslator ...

  10. 关于$(function(){})的问题

    在开发过程中遇到了一个问题 , 页面需要一个列表展示 , 为了方便数据的获取和渲染 ,就选择了easy UI的网格来做 , 这个时候问题就出现了 , 那就是网格需要触发的函数不写在$(function ...