CSS实现鼠标移动到图片或按钮上改变大小

2019-04-24 06:28:26   前端

CSS实现鼠标移动到图片或按钮上缓慢变大,添加过渡动画效果,自定义动画时间。鼠标指向元素,元素变大CSS示例。

效果示例

这里是一个效果示例:https://findcatsname.com/cats-do-know-their-own-names

CSS实现鼠标移动到图片或按钮上缓慢变大

我们可以看到页面顶部和底部都有分享的按钮。然后我把鼠标移动到其中一个按钮上:

CSS实现鼠标移动到图片或按钮上缓慢变大

可以看到,中间的按钮变大了。当然,图片看不出动画效果,大家可以自己去站点查看(好吧,我承认,这是我的站,想骗你进去,哈哈)。

实现代码

接下来我们就来用css实现这个样式

这是三个按钮

<button class="btn-share">Twitter</button>
<button class="btn-share">Pinterest</button>
<button class="btn-share" >Facebook</button>

这是css样式:

.btn-share {
  transition: all 0.3s;
}

.btn-share:hover {
  transform: scale(1.3);
}

transition定义的是过渡动画效果时间,transform 定义的是放大的倍数。而 :hover 则定义鼠标滑过事件。

当然,你会发现,这些代码跟展示的示例不一样。不要担心、因为一些与本教程无关的样式我省去了。要做出什么炫酷的样式、请你自己定义哦。

vien.tech版权所有,允许转载,但转载请注明出处和原文链接: https://viencoding.com/article/154
欢迎小伙伴们在下方评论区留言 ~ O(∩_∩)O
文章对我有帮助, 点此请博主吃包辣条 ~ O(∩_∩)O

猜你喜欢


评论

There are no comments yet.
未登录

登录后即可发表评论

登录或注册

标签

AdSense Anaconda Android API Auth AWS B-tree Bandwagon Blog bower brew bytes Caffe Catalina cloudcone Composer conda CPU crontab CSS Cuda cv2 datetime Digitalocean DNS Docker Docker-Compose export Flask GET Git GitHub Gmail GoDaddy Google GTM hash Homebrew Homestead HTML http HTTPS IDEA image imagemagick imagick imgick import InnoDB ISO8601 iTerm2 Java JPG Keras Laravel Laravel-Admin lazyload Linux list lnmp load logs Lravel Mac Markdown matplotlib md5 mix Mojave mongo MongoDB MySQL Namesilo Nginx npm numpy Nvidia Nvidia-Docker onevps OpenCV Openpose Outline parse PayPal PHP php-fpm PhpStorm PHP扩展 PIL Pillow pip PNG POST Protobuf PyCharm pyenv pymongo Python Python,人工智能,机器学习,VOC,xml Queue Redis requests save selenium SEO Shadowsock Shadowsocks ShadowsocksR simplemde Spring Boot SQLServer ssd SSH SSL证书 SSR str Sublime sudo swap Tensorflow Terminal Terminator Ubuntu urllib UTC v2ray Valet Validation Validator VienBlog virtualenvs VPN VPS Vultr Web Windows WordPress Xcode zip zmq zsh 下载图片 云主机 云服务器 人工智能 优化 优惠码 伪原创 作弊与反作弊 免费ss账号 免费提现 切片 前端 加密 协议 博客 友链 后台运行 命令 图片操作 图片转换 域名 大小写转换 安卓模拟器 定时任务 定时执行 导出导入 延迟加载 懒加载 提现 搜索引擎 搬瓦工 搭梯子 教程 数据库 文件上传 日志 时区 时间戳 服务器 机器学习 梯子 港版支付宝 生活服务 科学上网 系统升级 索引 编辑器 自动付款 英文伪原创 计划任务 语法 远程连接 重定向 错误异常 错误提示 队列 阿里云 香港 香港手机号
亲情非友情链接