~~~
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 按钮btn 基础样式 */
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #bdc3c7;
}
.btn-list {
display: grid;
grid-template-columns: repeat(3,200px);
gap: 50px;
background: #fff;
border-radius: 20px;
padding: 50px;
box-shadow: 0 0 5px 5px rgb(0 0 0 / 8%);
}
.btn {
width: 200px;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
font-size: 2rem;
cursor: pointer;
user-select: none;
letter-spacing: 1rem;
text-indent: 1rem;
border-radius: 20px;
box-sizing: border-box;
}
.twinkle {
overflow: hidden;
position: relative;
border: 2px solid #2c3e50;
color: #2c3e50;
transition: background-color .2s;
}
.twinkle::before {
content: "";
position: absolute;
width: 50px;
height: 200%;
background-color: rgba(255, 255, 255, .6);
transform: skew(45deg) translate3d(-200px,0,0);
}
.twinkle:hover {
background-color: #2c3e50;
}
.twinkle:hover::before {
transition: ease-in-out .5s;
transform: skew(45deg) translate3d(300px,0,0);
}
.slide {
border: 2px solid #2980b9;
color: #2980b9;
position: relative;
overflow: hidden;
z-index: 1;
transition: .5s;
}
.slide::before {
content: "";
position: absolute;
z-index: -1;
width: 0;
height: 100%;
left: 0;
background-color: #2980b9;
transition: ease-in-out .5s;
}
.slide:hover::before {
width: 100%;
}
.ball {
border: 2px solid #8e44ad;
color: #8e44ad;
position: relative;
}
.dot {
position: absolute;
left: 0;
top: 0;
width: 60px;
height: 100%;
border-radius: 20px;
background-color: #bdc3c7;
transition: all .3s ease;
display: none;
}
.dot::before {
content: "";
position: absolute;
top: -11px;
width: 10px;
height: 10px;
background-color: #8e44ad;
border-radius: 50%;
border: 4px solid #8e44ad;
box-shadow: 0 0 10px 0 #8e44ad;
}
.ball:hover {
color: #8e44ad;
}
.ball:hover .dot {
animation: move 2s infinite linear;
display: block;
}
@keyframes move {
0% {
transform: translateX(0) rotate(0);
}
30% {
transform: translateX(calc(200px - 60px)) rotate(0);
}
50% {
transform: translateX(calc(200px - 60px)) rotate(180deg);
}
80% {
transform: translateX(0) rotate(180deg);
}
100% {
transform: translateX(0) rotate(360deg);
}
}
.boom {
background-color: #16a085;
color: #fff;
position: relative;
z-index: 1;
}
.boom::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
bottom: 0;
right: 0;
border: 2px solid #16a085;
border-radius: 20px;
transform-origin: center;
}
.boom:hover::before {
transform: scale(1.25);
transition: all ease-out .5s;
border: 1px solid #96f3e0;
opacity: 0;
}
.circle {
background-color: #e74c3c;
color: #fff;
position: relative;
z-index: 1;
overflow: hidden;
}
.circle::before {
content: "";
position: absolute;
z-index: -1;
top: 50%;
left: 50%;
width: 1rem;
height: 1rem;
transform: translate3d(-50%,-50%,0) scale(0,0);
border-radius: 50%;
background-color: #c0392b;
transform-origin: center;
transition: ease-in-out .5s;
}
.circle:hover::before {
transform: translate3d(-50%,-50%,0) scale(15,15);
}
.three-d {
color: #fff;
background-color: #f1c40f;
text-shadow: -2px 2px 2px rgb(209 132 0),
-2px 2px 2px rgb(209 132 0),
-2px 2px 2px rgb(209 132 0),
-2px 2px 2px rgb(209 132 0),
-2px 2px 2px rgb(209 132 0),
-2px 2px 2px rgb(209 132 0);
box-shadow: 0px 15px 0px 0px #f39c12;
transition: all .2s;
}
.three-d:hover {
background-color: #fcdc5e;
}
.three-d:active {
transform: translate(0,4px);
box-shadow: 0px 1px 0px 0px #f39c12;
}
</style>
</head>
<body>
<div class="btn-list">
<div class="btn twinkle">开始</div>
<div class="btn slide">开始</div>
<div class="btn ball">
<span>开始</span>
<div class="dot"></div>
</div>
<div class="btn boom">开始</div>
<div class="btn circle">开始</div>
<div class="btn three-d">开始</div>
</div>
</body>
</html>
~~~
- 后端
- composer
- composer配置国内镜像
- composer安装及设置2
- PHP
- 贝塔SG11加密
- 申请KEY
- 开始加密
- php 中连接tcp服务的三种方式
- php websocket 教程
- editor内容转换数组
- 使用正则判断中文维吾尔文
- PHP常用函数总结
- 常用助手函数
- 通过Imagick把pdf转换图片
- 维吾尔语基本区转换扩展区
- php GD库生成一个由文字和图片生成新的图片
- aes加密
- php数组函数 -- array_column,array_multisort 实现二维数组排序
- PHP操作Excel
- php更新内容
- 辅助查询（*）
- 【时间】操作
- 时间函数例子
- Date/Time 函数（不包含别名函数）
- php网络相关
- HTTP请求的返回值含义说明
- 使用php语言开发一个类似数据库操作的文件表类
- pinyin
- 维吾尔语基本区转换扩展区(2)
- php获取当前环境的信息
- laravel
- laravel 队列的使用
- laravel 自定义助手函数
- laravel seeder的使用
- laravel项目从git下载命令
- laravel 多个数据库配置
- laravel 填充假数据
- laravel 动态路由
- laravel 自定义 validate 响应
- laravel 创建追加字段的模拟访问器
- laravel 线上环境的数据库更改或添加字段
- laravel 模型查询按照whereIn排序
- laravel 使用 workerman 通过TCP 文件传输功能
- laravel api Header添加Accept头
- Laraval IDE 自动补全插件 laravel-ide-helper
- laravel 网站后台
- laravel 设置路由
- laravel-第三方composer包
- laravel 开发技巧
- laravel 昨天，今天时间
- 使用宝塔计划任务启动laravel调度器
- laravel结合workerman第二节
- Laravel - 上传多个文件
- 查询聊天好友列表
- 事件系统 event, listener
- laravel 安装 laravel-modules
- 自定义求看守器-toekn
- laravel限流
- 使用 Laravel api Resource 类时自定义分页信息
- Laravel php artisan命令大全
- 验证器
- workerman 创建wss服务
- 架构师必须知道的26项PHP安全实践
- python
- Python读取文件代码块已经备好，用的时候光拿（建议收藏）
- Python常用库大全
- api 签名验证
- git
- git命令
- 十分钟学会git基础
- Git代码同时上传到GitHub和Gitee(码云)
- Git - 多人协同开发利器，团队协作流程规范与注意事项
- 删除远程仓库的文件
- github查询方法
- 错误
- 解除项目git版本控制
- linux
- sentos安装supervisor
- PHP怎么守护进程运行php脚本
- 600条最强Linux命令总结
- centos开启防火墙、开放指定端口
- 前端
- vue
- vue2发布之前的config简单配置
- vue2安装scss命令
- vue2父子组件之间双向数据绑定
- 国际化双语--安装VueI18n
- vue3-setup 组件传参（defineProps、defineEmits、defineExpose
- Vue3 新写法速览：十分钟内轻松get
- 关于vue的外连接
- watch讲解
- computed
- webpack 打包后生成很多小文件怎么优化？
- vue2 vue.config.js常见配置和打包部署测试
- 小程序
- 小程序长期订阅消息
- 小程序自定义TabBar后如何实现keep-alive
- 收藏的html和css和js
- CSS 省略号（单行省略号、多行省略号）
- UyghurInput_a.js
- font.css
- 漂亮按钮样式
- clock.html
- css
- scroll css样式
- CSS流动布局-页面自适应
- css grid布局
- 禁止wap页面调整字体大小
- CSS @media 和 min-width/max-width
- 网站变灰是怎么实现的
- 瀑布流实现方式
- javascript
- SortableJS拖动排序
- wondow scroll滚动到上边
- 原生js插入HTML元素
- Konva.js —— 像操作DOM一样操作canvas
- 通过canvas合并俩个图片
- js scroll更多加载
- js 实现复制功能
- js判断安卓和苹果或者微信
- 浏览器打开控制台禁止
- 原生js一些dom操作
- js http客户端集合
- fetch
- axios
- canvas 点钟
- layer dialog
- jquery 和 laravel ajax全局配置
- layui 获取select的自定义参数
- konva.js中文开发文档
- js 大文件分片上传
- js监听网络状态实现断网重连后自动刷新页面
- js生成video缩略图
- JS获取当前系统电量情况
- uniapp
- uni-app swiper数量过多时卡顿优化方案
- uniapp 帖子集合
- 微信wap
- wap分享朋友和朋友圈
- wap 手机页面微信支付
- JsSdk微信公众号支付
- 通用各种小知识
- 正则表达式
- JS正则匹配过滤字符串中的html标签及html标签内的内容
- 判断维吾尔文输入
- 正则表达式符号
- 正则表达式练习
- 百度网盘不限速下载助手
- 解决VSCode下载慢或下载失败的问题
- 性能测试 使用Apache的ab测试工具
- nginx从入门到精通
- nginx
- Nginx 是怎么禁止访问php的 ？
- 宝塔面板
- supervisor
- 卸载宝塔
- redis
- redis实用笔记
- redis入门到精通
- phpredis
- redis数据库基础
- PHP对Redis的基本操作
- ffmpeg
- 合并多个音视
- 获取音视时长
- FFmpeg视频处理入门教程(新手必看)
- 外连接
- 安装
- PHP基于ffmpeg实现转换视频，截图及生成缩略图的方法
- Linux安装ffmpeg
- docker
- 服务实现
- docker基本命令
- rewrite笔记
- 别人笔记链接
- 计算机常用知识
- 二进制1-10
- 斐波那契数列
- mysql
- 高性能高可用的MySQL,得从各种规范开始
- 读写分离配置
- 重要外连接，前端/ 后端/数据库等等
- 关于程序必须收藏的文章链接集合
- markdown
- 一篇文章讲清楚markdown