JS框架_(JQuery.js)带阴影贴纸标签按钮
百度云盘 传送门 密码:azo6
纯CSS带阴影贴纸标签按钮效果：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3带阴影贴纸标签按钮样式</title> <style>
html {
box-sizing: border-box;
font: 18px PT Mono;
background: antiquewhite;
} *,
*::before,
*::after {
box-sizing: inherit;
} body {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 100vh;
} .box {
width: 15%;
min-width: 150px;
display: block;
height: 50px;
position: relative;
border-radius: 5px;
background: linear-gradient(to right, #abbd73 35%, #d6e2ad 100%);
margin-bottom: 40px;
padding: 15px 25px 0 40px;
color: darkslategray;
box-shadow: 1px 2px 1px -1px #777;
transition: background 200ms ease-in-out;
text-align:right;
} .box a{color:#fff;text-decoration:none;} .shadow {
position: relative;
}
.shadow:before {
z-index: -1;
position: absolute;
content: "";
bottom: 13px;
right: 7px;
width: 75%;
top: 0;
box-shadow: 0 15px 10px #777;
-webkit-transform: rotate(4deg);
transform: rotate(4deg);
transition: all 150ms ease-in-out;
} .box:hover {
background: linear-gradient(to right, #abbd73 0%, #abbd73 100%);
} .shadow:hover::before {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
bottom: 20px;
z-index: -10;
} .circle {
position: absolute;
top: 14px;
left: 15px;
border-radius: 50%;
box-shadow: inset 1px 1px 1px 0px rgba(0, 0, 0, 0.5), inset 0 0 0 25px antiquewhite;
width: 20px;
height: 20px;
display: inline-block;
text-align:right;
padding:0 20px 0 0;
}
</style>
</head>
<body> <div class="box shadow">
<a href="#">Gary</a>
<div class="circle"></div>
</div>
<div class="box shadow">
<a href="#">jQuery</a>
<div class="circle"></div>
</div>
<div class="box shadow">
<a href="#">贴纸标签</a>
<div class="circle"></div>
</div> </div>
</body>
</html>
index.html
实现过程：
一、设置CSS样式
justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。 flex-start 默认值。项目位于容器的开头
flex-end 项目位于容器的结尾
center 项目位于容器的中心
space-between 项目位于各行之间留有空白的容器内
space-around 项目位于各行之前、之间、之后都留有空白的容器内
justify-content: center;
1、绘制标签盒子
.box {
width: 15%;
min-width: 150px;
display: block;
height: 50px;
position: relative;
border-radius: 5px;
background: linear-gradient(to right, #abbd73 35%, #d6e2ad 100%);
margin-bottom: 40px;
padding: 15px 25px 0 40px;
color: darkslategray;
box-shadow: 1px 2px 1px -1px #777;
transition: background 200ms ease-in-out;
text-align:right;
}
min-width ：设置元素的最小宽度。
border-radius：向 div 元素添加圆角边框
background: linear-gradient(direction, color-stop1, color-stop2, ...) 百度经验
linear-gradient(线性渐变)
radial-gradient(径向渐变)
direction：渐变方法
color-stop1, color-stop2：要呈现平稳过渡的颜色
margin-bottom ：设置元素的下外边距
color: darkslategray;深石板灰......（英语差）
transition:鼠标碰到时触发过度动画 传送门
2、绘制盒子阴影
.shadow:before {
z-index: -1;
position: absolute;
content: "";
bottom: 13px;
right: 7px;
width: 75%;
top: 0;
box-shadow: 0 15px 10px #777;
-webkit-transform: rotate(4deg);
transform: rotate(4deg);
transition: all 150ms ease-in-out;
}
z-index ：设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面
使得阴影位于标签按钮下方
bottom ：规定盒子的底部边缘与阴影之间的偏移(调大了会有点丑∑(= = ！))
transform: rotate(4deg)定义 2D 旋转4度
3、绘制标签圆角
.circle {
position: absolute;
top: 14px;
left: 15px;
border-radius: 50%;
box-shadow: inset 1px 1px 1px 0px rgba(0, 0, 0, 0.5), inset 0 0 0 25px antiquewhite;
width: 20px;
height: 20px;
display: inline-block;
text-align:right;
padding:0 20px 0 0;
}
border-radius：向标签添加圆角边框
antiquewhite颜色：古董白(石材百科说是中国产花岗岩！！！)上一张图
二、在Body中给“标签”添加CSS样式
<body> <div class="box shadow">
<a href="#">Gary</a>
<div class="circle"></div>
</div> <div class="box shadow">
<a href="#">jQuery</a>
<div class="circle"></div>
</div> <div class="box shadow">
<a href="#">贴纸标签</a>
<div class="circle"></div>
</div>
</div> </body>
JS框架_(JQuery.js)带阴影贴纸标签按钮的更多相关文章
- JS框架_(JQuery.js)绚丽的3D星空动画
百度云盘: 传送门 密码:8ft8 绚丽的3D星空动画效果(纯CSS) (3D星空动画可以用作网页背景,Gary为文本文字) <!doctype html> <html lang=& ...
- JS框架_(JQuery.js)Tooltip弹出式按钮插件
百度云盘 传送门 密码:7eh5 弹出式按钮效果 <!DOCTYPE html> <html > <head> <meta charset="UTF ...
- JS框架_(JQuery.js)圆形多选菜单选项
百度云盘 传送门 密码:zb1c 圆形多选菜单选项效果: <!DOCTYPE html> <html lang="en" > <head> &l ...
- JS框架_(JQuery.js)夜晚天空满天星星闪烁动画
百度云盘 传送门 密码:xftr 满天星星闪烁动画效果: (可用星空动画来作为页面背景,白色文字改为文章或者其他的O(∩_∩)O) <!doctype html> <html> ...
- JS框架_(JQuery.js)文章全屏动画切换
百度云盘 传送门 密码:anap 文章全屏动画切换效果 <!doctype html> <html lang="zh"> <head> < ...
- JS框架_(JQuery.js)动画效果鼠标跟随
百度云盘 传送门 密码 :4n9u 火狐浏览器上纯CSS_动画效果鼠标跟随效果: (作者:lily_lcj 传送门) <!DOCTYPE html PUBLIC "-//W3C//DT ...
- JS框架_(JQuery.js)点赞按钮动画
百度云盘 传送门 密码: 0ihy 点赞按钮动画效果: (点击一次随机生成一颗小爱心,作为点赞动画~) <!doctype html> <html lang="en&quo ...
- JS框架_(JQuery.js)图片相册掀开切换效果
百度云盘 传送门 密码:y0dk 图片掀开切换效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo ...
- JS框架_(JQuery.js)上传进度条
百度云盘 传送门 密码: 1pou 纯CSS上传进度条效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...
随机推荐
- composer命令介绍之install和update及其区别
composer 是 php 的一个依赖管理工具.它允许你申明项目所依赖的代码库,它会在你的项目中为你安装他们. 然而,对于如何『安装他们』,新手可能并不清楚.网上的答案有的说 composer in ...
- SpringBoot-2-基本配置
自定义启动配置 在resources下面新建一个banner.txt文件,里面写入自己想要的内容 /////////////////////////////////////////////////// ...
- js数据结构-链表
链表和数组 大家都用过js中的数组,数组其实是一种线性表的顺序存储结构,它的特点是用一组地址连续的存储单元依次存储数据元素.而它的缺点也正是其特点而造成,比如对数组做删除或者插入的时候,可能需要移动大 ...
- 通过设置访问密码查看Tomcat服务器运行状态
安装tomcat 设置访问manager用户名,密码 vim /usr/local/tomcat9/conf/tomcat-users.xml # 设置访问manager用户名,密码 # 在倒数第二行 ...
- 自定义字段的设计与实现（Java实用版）
前言 自定义字段又叫做"开放模型",用户可以根据自已的需求,添加需要的字段,实现个性化定制. 使用自定义字段的目的,使用自定义字段解决哪些问题 如现有一套CRM系统,客户模块中客户 ...
- (转)Dubbo服务暴露过程源码分析
参考
- Python 东方财富网-股市行情数据抓取
东方财富网 股市行情数据抓取: http://quote.eastmoney.com/center/gridlist.html#hs_a_board 请求数据未入库处理,其中数据只存入数据文本,未做存 ...
- SQL学习（一）之简介
什么是 SQL? SQL 指结构化查询语言(Structured Query Language) SQL 使我们有能力访问数据库 SQL 是一种 ANSI 的标准计算机语言 SQL 能做什么? SQL ...
- 06 基本数据结构 - 双端队列(Deque)
一.双端队列(Deque) - 概念:deque(也称为双端队列)是与队列类似的项的有序集合.它有两个端部,首部和尾部,并且项在集合中保持不变. - 特性:deque 特殊之处在于添加和删除项是非限制 ...
- scrapy常用设置和注意点！！！！
setting里的设置 HTTPERROR_ALLOWED_CODES = [405] //这一条是忽略405错误退出进程,有可能跳到405页面,在parse注意判断,重新请求页面 爬虫里的设置 ...