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 ...
随机推荐
- Git 实习一个月恍然大悟合集
从开始实习到现在大概有一个月了,这个月时间接触了很多新东西,其中就包括了git版本控制.分支管理等等.我在这段时间里,深深地感受到了git对公司项目代码管理和控制.团队合作带来的益处和其重要性.其实在 ...
- 如何实现一个简化版的 jQuery
对于操作 DOM 来说,jQuery 是非常方便的一个库,虽然如今随着 React, Vue 之类框架的流行,jQuery 用得越来越少了,但是其中很多思想还是非常值得我们学习的,这篇文章将介绍如何从 ...
- ProGuard 最全混淆规则说明
Input/Output Options 输入输出选项 -include filename 递归引入目录的配置文件 -basedirectory directoryname -injars class ...
- JDK SPI
最近学习了JDK SPI JDK SPI是什么 最近工作中听几个同事说了好几次SPI这个名词,虽然和我没关系,但是心里默默想还是学习一下,不然下次和我说到SPI,连是什么都不知道那就尴尬了. 所以 ...
- mysql架构总结
1.单机架构模式,多用于测试,实际生产中需优化: 2.一主多从,主数据库读和写,从数据库从主数据库同步,仅负责读,可解决一定访问量的需求: 3.MHA(Master High Availability ...
- css样式水平居中和垂直居中的方法
水平居中(包含块中居中) 1. 定宽,左右margin为auto.(常规流块盒.弹性项目[不用定宽]) 例子:在box1盒子上设置宽,再设置margin:auto: <style> .bo ...
- python根据已有数据库生成model.py
有时我们需要根据已存在的数据库进行django开发时,手写model.py是不现实的 先执行下面的语句,在命令行终端会输出所有表的类 python .\manage.py inspectdb 检查无误 ...
- Delphi Form组件
- 如何删掉git版本库master分支的第一个commit
这个操作会将库清空,一般来说在建库开始的时候操作. 适用场景: git init初始化版本库之后,提交第一个点之后发现这个点出问题了,但是此时内心如果有洁癖的话, 你会觉得不完美,很想把这个点干掉重来 ...
- python-嵌套函数
python-嵌套函数 定义:在函数体内用def定义一个函数,它的作用域只在该函数体内有效. def outside(): print("int the outside") def ...