html+css 实现简约社交分享按钮

效果

html+css 实现简约社交分享按钮效果

原理解析

1.事件是由a标签的hover触发的
2.动画效果是transition动画效果
a标签的hover触发transition动画

上代码,可以直接复制使用

目录

目录

html

<!DOCTYPE html>
<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><title>简约不简单的社交分享按钮</title><link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"><link rel="stylesheet" href="./style.css">
</head><body>
<h1 style="text-align: center;color:#fff; margin-bottom: 100px">html+css 实现简约社交分享按钮</h1><div class="btn-box"><a href="#"><i class="fa fa-qq" aria-hidden="true"></i></a><a href="#"><i class="fa fa-wechat" aria-hidden="true"></i></a><a href="#"><i class="fa fa-weibo" aria-hidden="true"></i></a><a href="#"><i class="fa fa-renren" aria-hidden="true"></i></a></div>
</body></html>

css

body{/* 取消页面内外边距 */margin: 0;padding: 0;/* 100%窗口高度 */height: 100vh;/* 渐变背景 */background: linear-gradient(200deg,#517fa4,#243949);
}
.btn-box{/* 弹性布局 水平、垂直居中 */display: flex;justify-content: center;align-items: center;}
.btn-box a{font-size: 40px;color: #88bef5;width: 100px;height: 100px;line-height: 100px;text-align: center;margin: 0 16px;display: inline-block;/* 相对定位 */position: relative;/* 动画过渡:时长 线性的 */transition: 0.2s linear;
}
.btn-box a::before,.btn-box a::after{content: "";/* 绝对定位 */position: absolute;/* 这个是告诉浏览器:你想要设置的边框和内边距的值是包含在总宽高内的 */box-sizing: border-box;width: 100%;height: 100%;left: 0;top: 0;/* 加个动画过渡 */transition: 0.2s linear;
}
/*hover时触发动画*/
/*过渡动画 start*/
.btn-box a:hover{/* 缩小为原来的0.8倍 */transform: scale(0.8);
}
.btn-box a:hover::before{border-left: 4px solid;border-right: 4px solid;/* 沿X轴倾斜20度 */transform: skewX(20deg);
}
.btn-box a:hover::after{border-top: 4px solid;border-bottom: 4px solid;/* 沿Y轴倾斜-20度 */transform: skewY(-20deg);
}
/*过渡动画 end*/

整理不易,点赞关注宝码香车

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/48063.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

环境变量配置文件中两种路径添加方式

环境变量配置文件中两种路径添加方式 文章目录 环境变量配置文件中两种路径添加方式代码示例区别和作用 代码示例 export HBASE_HOME/opt/software/hbase-2.3.5 export PATH$PATH:$HBASE_HOME/binexport SPARK_HOME/opt/software/spark-3.1.2 export PATH$SPARK_HOME/bin:$PAT…

抖音客户端一面

C | 字节抖音客户端一面 Http握手过程 1. 客户端问候(Client Hello) 客户端向服务器发送一个“问候”消息&#xff0c;其中包含客户端支持的SSL/TLS版本、加密算法、压缩方法以及一个随机数。 version 版本号,https也有版本号哦TLS 1.0、TLS 1.1、TLS 1.2等等 random 随机数…

使用API有效率地管理Dynadot域名,设置待删除域名抢注请求

简介 Dynadot是通过ICANN认证的域名注册商&#xff0c;自2002年成立以来&#xff0c;服务于全球108个国家和地区的客户&#xff0c;为数以万计的客户提供简洁&#xff0c;优惠&#xff0c;安全的域名注册以及管理服务。 Dynadot平台操作教程索引&#xff08;包括域名邮箱&…

爬虫学习2:爬虫爬取网页的信息与图片的方法

爬虫爬取网页的信息与图片的方法 爬取人物信息 import requestshead {"User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36 Edg/126.0.0.0" } # 这是get请求带参数的模式…

了解Linux中的shell脚本

目录 1、什么是shell 2、编写第一个shell文件 3、shell的权限 4、变量 5、 shell传递参数 6、shell数组 7、shell基本运算符 7.1 算术运算符 7.2 关系运算符 7.3 布尔运算符 7.4 逻辑运算符 7.5 字符串运算符 8、控制语句 8.1 if 8.2 for 8.3 while语句 9、其他 1、…

C#初级——条件判断语句和循环语句

条件判断语句 简单的条件判断语句&#xff0c;if()里面进行条件判断&#xff0c;如果条件判断正确就执行语句块1&#xff0c;如果不符合就执行语句块2。 if (条件判断) { 语句块1 } else { 语句块2 } int age 18;if (age < 18){Console.WriteLine("未…

Anaconda安装-超详细版(2023)

Anaconda安装 - 超详细版&#xff08;2023&#xff09; 前言&#xff1a;彻底卸载pythonAnaconda下载地址安装详细步骤配置环境变量检验安装是否成功更改conda源&#xff08;后续安装第三方库可以加快速度&#xff09;超详细彻底卸载Anaconda教程Tensorflow-gpu 安装 前言&…

ORBSLAM3 ORB_SLAM3 Ubuntu20.04 ROS Noetic 虚拟机镜像 下载

下图是build.sh 和 build_ros.sh编译结果截图&#xff1a; slam数据集测试视频&#xff1a; orbslam3 ubuntu20.04 test 下载地址&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1nre0Y9vig5QXIGU52qCLbQ?pwd9rbi 提取码&#xff1a;9rbi

【系列教程之】1、点亮一个LED灯

1、点亮一个LED灯 作者将狼才鲸创建日期2024-07-23 CSDN教程目录地址&#xff1a;【目录】8051汇编与C语言系列教程本Gitee仓库原始地址&#xff1a;才鲸嵌入式/8051_c51_单片机从汇编到C_从Boot到应用实践教程 本源码包含C语言和汇编工程&#xff0c;能直接在电脑中通过Keil…

【iOS】内存五大分区

目录 堆&#xff08;Heap&#xff09;是什么五大分区栈区堆区全局/静态区常量区&#xff08;即.rodata&#xff09;代码区&#xff08;.text&#xff09; 函数栈堆和栈的区别和联系图解 OC语言是C语言的超集&#xff0c;所以先了解C语言的内存模型的内存管理会有很大帮助。C语言…

常识判断1

1.法律 &#xff08;1&#xff09;行政法 &#xff08;2&#xff09;刑法 3.新公务员法 &#xff08;4&#xff09;宪法 &#xff08;5&#xff09;民法 &#xff08;6&#xff09;监察法 &#xff08;7&#xff09;婚姻法 &#xff08;8&#xff09;反不正当竞争法

二次元手游《交错战线》游戏拆解

交错战线游戏拆解案 游戏亮点即核心趣味 一、关键词&#xff1a; 回合制游戏、二次元、机甲、横板、剧情、养成、异星探索。 二、游戏亮点&#xff1a; 符合目标群体审美的原画。 三、核心趣味&#xff1a; 抽卡、肝或者氪金解锁新皮肤。 核心玩法及系统规则 核心玩法&…

英特尔终于宣布了解决CPU崩溃和不稳定性问题的方法,声称过高的电压是根本原因;补丁预计将于8月中旬推出【更新】

英特尔终于宣布了解决CPU崩溃和不稳定性问题的方法&#xff0c;声称过高的电压是根本原因&#xff1b;补丁预计将于8月中旬推出【更新】 英特尔官方宣布&#xff0c;已找到困扰其CPU的崩溃问题的根本原因&#xff0c;并将于8月中旬前发布微码更新以解决这一问题&#xff0c;从而…

Godot游戏制作 02玩家1.0版

Unity大神&#xff0c;YouTube百万游戏开发者的启蒙老师&#xff0c;Brackeys&#xff0c;携 Godot 新手教程&#xff0c;正式回归。 转自&#xff1a;https://youtu.be/LOhfqjmasi0?si4RguI6-pXHZ2mk9K 资产&#xff1a;https://brackeysgames.itch.io/brackeys-platformer-b…

SpringBoot3整合Druid报错Cannot load driver class: org.h2.Driver

报错显示springboot自带的H2数据库报错&#xff0c;其实是因为druid并未加载进去。如果你其它配置都没问题的话&#xff0c;请检查druid的依赖是什么版本的&#xff0c;因为springboot3刚开始是不支持druid的。 方案一&#xff1a; 即需要手动在resources目录下创建META-INF/s…

java算法day20

java算法day20 701.二叉搜索树中的插入操作450.删除二叉搜索树中的节点108 将有序数组转换为二叉搜索树 本次的题目都是用递归函数的返回值来完成&#xff0c;多熟悉这样的用法&#xff0c;很方便。 其实我感觉&#xff0c;涉及构造二叉树的题目&#xff0c;用递归函数的返回值…

优秀的Linux Shell终端Starship Shell的安装和配置

文章目录 简介安装startship1.安装 starship 二进制文件:2.将初始化脚本添加到您的 shell 的配置文件3、配置4、日志安装字体nerd-fonts编写脚本安装字体Nerd字体全量安装文档简介 Starship是一款轻量、迅速、可无限定制的高颜值终端! Starship Shell是一个用Rust编写的开源…

visio 打开、插入、转换以及保存 DWG 和 DXF (AutoCAD) 绘图

打开、插入、转换以及保存 DWG 和 DXF (AutoCAD) 绘图 Visio 计划 2 Visio Professional 2021 Visio Standard 2021 Visio Professional 2019 更多... 如果要在 Visio 绘图中使用AutoCAD对象&#xff0c;可以使用 Visio 打开它们并将其转换为 Visio 形状。 还可以将 Visio 绘…

图灵测试:人工智能与人类沟通的界限

图灵测试是评估人工智能&#xff08;AI&#xff09;是否能够表现出与人类相似的智能的重要标准之一。它由英国数学家兼计算机科学家艾伦图灵在1950年提出&#xff0c;其核心目的是测试一个机器是否能够表现出类似于人类思维的能力&#xff0c;从而模拟人类的智能。这一测试也因…

汇编语言例题分析

以下数据段定义了如下数据&#xff0c;对应内存图请填空&#xff0c;写出每个内存字节中的2位16进制数&#xff08;注意写准确&#xff0c;2位16进制数&#xff0c;末尾不带h&#xff09;。 Data1 segment x db 1,2,3 y db “ABa” z dw 1,2 Data1 ends 物理地址从0000开始&…