随笔分类 -  css

滚动条样式
摘要：// 滚动条宽、高 .table::-webkit-scrollbar { width: 6px; height: 10px; } // 默认滚动条背景色白色 .table::-webkit-scrollbar-thumb { background-color: white; border-radi 阅读全文
posted @ 2022-07-15 15:06 yw3692582 阅读(199) 评论(0) 推荐(0) 编辑
animate.css动画效果
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content 阅读全文
posted @ 2022-01-12 11:19 yw3692582 阅读(41) 评论(0) 推荐(0) 编辑
vivify.css动画效果
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content 阅读全文
posted @ 2022-01-12 11:13 yw3692582 阅读(379) 评论(0) 推荐(0) 编辑
css流光溢彩的button
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文
posted @ 2022-01-04 21:59 yw3692582 阅读(143) 评论(0) 推荐(1) 编辑
vue的transition标签配合animate.css与vivify.css使用的方式
摘要：vue版本：v.2.5.2 <transition name="fade-box"> <div v-show="show" class="box"></div> </transition>.box { width: 200px; height: 200px; background-color: pi 阅读全文
posted @ 2021-12-29 16:36 yw3692582 阅读(155) 评论(0) 推荐(0) 编辑
3D旋转
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文
posted @ 2021-12-27 20:11 yw3692582 阅读(21) 评论(0) 推荐(0) 编辑
css实现图片放大效果
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文
posted @ 2021-12-26 23:08 yw3692582 阅读(570) 评论(0) 推荐(0) 编辑
css的transform移动、旋转、缩放动画
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文
posted @ 2021-12-26 23:00 yw3692582 阅读(486) 评论(0) 推荐(0) 编辑
css伸缩栏
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文
posted @ 2021-12-26 22:45 yw3692582 阅读(17) 评论(0) 推荐(0) 编辑
css的transition过渡效果
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文
posted @ 2021-12-26 22:17 yw3692582 阅读(34) 评论(0) 推荐(0) 编辑
css三角形
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文
posted @ 2021-12-26 21:59 yw3692582 阅读(28) 评论(0) 推荐(0) 编辑
css三角形升级（秒杀效果）
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文
posted @ 2021-12-26 21:50 yw3692582 阅读(41) 评论(0) 推荐(0) 编辑
css一行显示不下用省略号
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文
posted @ 2021-12-26 21:13 yw3692582 阅读(385) 评论(0) 推荐(0) 编辑
css三角形效果
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文
posted @ 2021-12-26 21:00 yw3692582 阅读(27) 评论(0) 推荐(0) 编辑
css清除浮动
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文
posted @ 2021-12-26 20:32 yw3692582 阅读(13) 评论(0) 推荐(0) 编辑
css四宫格、九宫格（grid实现）
摘要：1、HTML部分 <div class="parent"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> <div class="box5"></ 阅读全文
posted @ 2021-08-03 14:06 yw3692582 阅读(2067) 评论(0) 推荐(0) 编辑
图片叠加
摘要：<template> <div id="bg_img"> <img src="/static/img/pexels-pixabay-209831.jpg" alt="叠加图片" height="100%" width="100%" /> </div> </template> <script> exp 阅读全文
posted @ 2021-06-04 09:24 yw3692582 阅读(48) 评论(0) 推荐(0) 编辑
修改 input 光标颜色
摘要：<input id="input" type="text" /> input { caret-color: red; } 阅读全文
posted @ 2021-06-04 09:05 yw3692582 阅读(113) 评论(0) 推荐(0) 编辑
垂直水平居中div
摘要：// 第一种：grid布局 <div id="bg_img"> <div> <input type="text" /> </div> </div> // css #bg_img{ display: grid; place-items: center;　height:100vh; // 必须设置高度 阅读全文
posted @ 2021-06-04 09:02 yw3692582 阅读(27) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示