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 ...
随机推荐
- 升级降级（期望DP）2019 Multi-University Training Contest 7 hdu杭电多校第7场（Kejin Player）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6656 题意: 有 1~n 个等级,你现在是1级,求升到n级的花费期望.会给你n个条件(i~i+1级升级 ...
- FFmpeg4.0笔记：VS2019编译FFmpeg4.0源码
0.下载TDM.msys和yasm 1.安装TDM-GCC-64 2.安装msys到TDM-GCC的安装目录中 3.将call "C:\Program Files (x86)\Microso ...
- VMware 无法开机
无法打开磁盘 虚拟机无法打开磁盘 "或者某一个快照所依赖的磁盘 原因:未能锁定文件"的解决办法 很多人在使用虚拟机是都会遇到“无法打开磁盘" x:\*\*vmdk &qu ...
- nginx配置：静态访问txt文件
有一个A网站,访问的话会重定向跳转到B网站上,在A网站的nginx配置文件中配置的有如下: location / { rewrite ^/(.*) http://B/$1 redirect; } 现在 ...
- C# 文件基本操作
概括的说,File,FileInfo,FileStream是用于文件 I/O 的类,StreamReader是用于从流读取和写入流的类,使用之前都需using System.IO. 先定义一个TXT文 ...
- Spring的AOP，Struts2的拦截器（Interceptor），以及springMVC的（interceptor）
参考外链:http://www.ibm.com/developerworks/cn/java/j-lo-springaopfilter/ 1.首先,spring的AOP作用范围很广,可以使用Aspec ...
- 转：spring中InitailizingBean接口的简单理解
转自:https://www.cnblogs.com/wxgblogs/p/6849782.html spring中InitializingBean接口使用理解 InitializingBean接 ...
- JDK1.8中LinkedList的实现原理及源码分析
详见:https://blog.csdn.net/cb_lcl/article/details/81222394 一.概述 LinkedList底层是基于双向链表(双向链表的特点, ...
- copy模块与fetch模块
copy:将本地机器上的文件拷贝到远程机器 fetch:将远程机器上的文件拷贝到本地机器 [root@localhost zabbix]# ansible-doc -s copy - name: Co ...
- ValueError:Object arrarys cannot be loaded when allow_pickle=False
运行python程序报错:ValueError:Object arrarys cannot be loaded when allow_pickle=False 错误原因:numpy版本太高 解决方案: ...