简单的图标移入效果(css缩放)

有时候想要让鼠标移入图标的时候,

当前图标能有所变化,

但是直接切换背景色的话就显得有点呆板,

所以我在无聊是写了一个很简单的css demo ,

让变化更好看一点,

就像下面这样(类似于腾讯新闻,网易新闻分享按钮)

这样的效果就是通过css 的动画特性实现的, 废话不多说,直接上代码

<!DOCTYPE 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"><title>hoverCircle</title>
</head><body><div id="container"><div><i></i><img src="./images/QQ.png" alt="QQ"></div><div><i></i><img src="./images/weibo.png" alt="weibo"></div><div><i></i><img src="./images/weixin.png" alt="weixin"></div></div>
</body></html>

<style>/* 用 flex 布局*/#container {margin: 0 auto;width: 600px;display: flex;justify-content: space-around;padding-top: 40%;}#container div {background: #ada;width: 80px;height: 80px;border-radius: 50%;cursor: pointer;position: relative;}/* 图片的背景必须是透明的, 以下代码是为了图片居中 */#container div img {position: absolute;top: 50%;left: 50%;transform: translateY(-50%) translateX(-50%);}#container div i {position: absolute;width: 80px;height: 80px;border-radius: 50%;background: rgb(179, 235, 168);/* i 默认缩小为 0 倍 */transform: scale(0);/* 动画效果时间设置 */transition: all .3s;}/* 鼠标移入时, i 放大到原始大小 */#container div:hover i {transform: scale(1)}
</style>

哦啦~~~~~

无聊时乱写的,请大家不喜勿喷哦! ^-^

简单的图标移入效果(css缩放)相关推荐

html中flash的简单动画效果,css 动画效果
要搞就搞明白,一知半解时停止研究损失最大 css3意义: CSS3 动画通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片.Flash 动画以及 JavaScript. 重点知识 C ...
html5制作天气动画背景,CSS icon图标之纯CSS实现带动画效果的天气图标
CSS3动画属性并不是很多,但重点其实是你怎样去运用它,从简单的hover状态或复杂的小动画,都可以巧妙的用CSS3动画属性来实现. 今天主要是和大家分享一个比较有创意.实用的CSS天气图标动画,静态 ...
【前端实例代码】Html5+css3创建新拟态新拟物风格(Neumorphism)音乐播放器+注册登录页表单图标网页效果~前端开发网页设计基础入门教程~超简单~
b站视频演示效果: [前端实例代码]Html5+css3创建新拟态新拟物风格(Neumorphism)音乐播放器+注册登录页表单图标网页效果!前端开发网页设计基础入门教程!超简单~ 效果图: 完整代码 ...
【前端实例代码】Html5+css3创建新拟态新拟物风格(Neumorphism)动画特效图标网页效果！前端开发网页设计基础入门教程！超简单~
b站视频演示效果: [web前端特效源码]Html5+css3实现新拟态新拟物风格(Neumorphism)网页图标动画效果!手把手教学!新手必会!超简单 ~ 效果图: 完整代码: <!DOCT ...
【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个果冻导航标签栏图标按钮效果~~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个果冻导航标签栏图标按钮效果~~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: < ...
【web前端特效源码】Html5+css3+JavaScript实现计算器2功能+新拟态新拟物风格(Neumorphism)网页图标按钮效果~手把手教学~适合初学者~超简单~
b站视频演示效果: [web前端特效源码]Html5+css3+JavaScript实现计算器2功能+新拟态新拟物风格(Neumorphism)网页图标按钮效果!手把手教学! 效果图: 完整代码: & ...
css非常简单的打码效果
发现一个有趣的非常简单的打码效果 <style>.hide-content {color: transparent;text-shadow: #111 0 0 6px;user-selec ...
html 鼠标图标做成动画效果,怎么实现鼠标经过图标动画效果
学习前端的小伙伴们你知道鼠标经过图标动画效果如何实现吗?不知道的话跟着小编一起来学习标经过图标动画效果怎么实现把. 今天就为大家分享一组时尚而简单的鼠标经过图标动画效果. 构建HTML基本结构在本示 ...
【闪亮的玻璃图标悬浮效果】
文章目录前言一.html代码二.css 总结前言闪亮的玻璃图标悬浮效果提示:以下是本篇文章的代码内容,供大家参考,相互学习一.html代码代码如下: <!DOCTYPE html ...

简单的图标移入效果(css缩放)

简单的图标移入效果(css缩放)相关推荐

最新文章

热门文章