CSS
关注
分享
扫一扫
文章平均质量分 66
小强有个dream
这个作者很懒，什么都没留下…
展开
-
css: css3动画（淡入淡出）
@keyframes 规则用于创建动画，并且必须 把它捆绑到某个选择器，否则不会产生动画效果。您必须定义动画的名称和时长。如果忽略时长，则动画不会允许，因为默认值是 0。（动画的名称和时长这两个属性是动画必要的）/*定义动画*/@keyframes myfirst{0% {background: red;}25% {background: yellow;}50% {background: blue;}100% {background: green;}}/*使用动画：将动画..原创 2022-04-13 20:24:49 · 12697 阅读 · 0 评论 -
css:动画 小米官网盒子阴影 心跳动画
小米官网盒子阴影<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" href="css/index.css"> <style> *原创 2021-10-08 21:40:34 · 544 阅读 · 0 评论 -
css:动画 高级垂直导航栏 王者荣耀导航栏
垂直导航栏<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> <meta http-equiv="Content-Type" content=原创 2021-10-08 21:40:08 · 750 阅读 · 0 评论 -
css：布局 瀑布流 黏底布局
瀑布流（column方式）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>原创 2021-10-08 21:39:44 · 146 阅读 · 0 评论 -
css: 图形 会动的钟表 旋转的魔方
会动的钟表<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>钟表</title> <style id="css"> #wrap { width: 200px; height: 200px; border: 2px solid #000; margin: 100p原创 2021-09-29 02:13:45 · 138 阅读 · 0 评论 -
css: 动画 微信导航栏 电梯导航
微信导航栏<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } li { list-style: none; } .nav li { float: left; margin:原创 2021-09-29 02:13:36 · 387 阅读 · 0 评论 -
css: 动画 背景遮罩（穷游） 热点新闻滚动文字
背景遮罩<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title&原创 2021-09-29 02:13:24 · 230 阅读 · 0 评论 -
css: 图形 旋转环 太极图 旋转的风车
旋转环<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { margin: 0; padding: 0; } ul,li,div,span {原创 2021-09-29 02:13:09 · 214 阅读 · 0 评论 -
css: loadding效果14种
可以看这个 链接下载链接1.2.3.4.5.6.7.8.9.11.13.14.原创 2021-09-29 02:13:01 · 536 阅读 · 0 评论 -
css:动画 斜切导航栏 图片翻转
斜切导航栏<!DOCTYPE html><html><head> <title></title> <meta charset="utf-8" /> <!-- <link href="css/reset.css" rel="stylesheet" type="text/css" /> --> <style> * { margin: 0; paddi原创 2021-09-29 02:11:29 · 278 阅读 · 0 评论 -
css:布局 等高布局 双飞翼布局/圣杯布局
等高布局<!DOCTYPE html><html><head> <title></title> <meta charset="utf-8" /> <style> body,p{margin: 0;} .parent{ position: relative; } .center{ box-sizing:border-box; p原创 2021-09-29 02:11:20 · 103 阅读 · 0 评论 -
css/js: 手动实现焦点图（轮播图）
实现思路：A： 鼠标经过父盒子focus,显示隐藏左右按钮B：动态生成小圆圈个数（ol中li等于ul中li的个数）；第一个圆圈默认选中(遍历ul中li个数，为il中的li添加事件，遍历ol干掉所有li的样式留下我自己的样式)C：点击小圆圈滚动图片（滚动距离=索引号*父盒子宽度；生成li的同时设置自定义索引号，得到点击的索引号 动画animate(ul, -index * focusWidth)）D: 右侧按钮，点击右侧按钮滚动一张（同上）E： 图片无缝滚动：（克隆第一张到最后一张。当滚动原创 2021-09-20 12:42:53 · 1157 阅读 · 0 评论 -
css： 自定义滚动条
来源.el-checkbox-group { max-height: 55px;}/* 修改某个div的滚动条样式 */.el-checkbox-group::-webkit-scrollbar { width: 5px; height: 37px;}.el-checkbox-group::-webkit-scrollbar-track { background: #fff; // border-radius: 2px;}.el-checkbox原创 2021-08-18 14:39:47 · 483 阅读 · 0 评论 -
CSS: 动画及效果
js原生点击某区域（如图片）实现上传文件关键设置 opacity: 0;.tou-xiang dl { position: relative; } #upcover { position: absolute; left: 0; right: 0; width: 100%; height: 100%; .原创 2021-04-09 16:33:47 · 180 阅读 · 0 评论 -
css:文字和段落
css属性描述text-align:justify固定宽度的盒子，文字两端对齐text-align-last:left多行文字最后一行左对齐text-indent:2em首行缩进letter-spacing: 0.5em按钮中的文字间的距离...原创 2019-12-06 19:57:33 · 109 阅读 · 0 评论 -
swiper:动态加载dom结构后，swiper无法拖动也无法点击下一页
动态创建这张图片后，隐藏之后就无法点击下一页并且图片也无法拖动项目：链接// 在元素创建后，重新初始化下swiper原创 2019-12-05 16:14:07 · 784 阅读 · 0 评论 -
css:文本垂直居中
文本居中方式描述单行文本，垂直居中1)实际开发只需写行高就可居中; 2) 如果未设置高度和边框时，盒子的实际高度就是行高(line-height)的值 ;// flex布局; 盒子内文字用display-inline-block盒子包裹vertical-align:midlle;...原创 2019-12-04 15:40:47 · 135 阅读 · 0 评论 -
使用fastciclk谷歌浏览器报错：Unable to preventDefault inside passive event listener due to target being treate
转载链接：链接// 在app.vue中加入改端代码html { touch-action: none;}原创 2019-12-04 13:42:21 · 191 阅读 · 0 评论 -
css: 项目前的基础样式
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain)*/html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr...原创 2019-12-04 12:00:30 · 259 阅读 · 0 评论 -
布局问题汇总
布局样式–单位布局方式说明移动端页面必须用rem小程序必须用rpxPC单位没有限制 ,看是否需要响应式原创 2019-12-03 15:41:44 · 150 阅读 · 0 评论 -
css：布局。左边图标右边文字（文字超出自动换行）
图标绝对定位通过top,left调整位置。右边文字div包裹（text-indent来调整与左边图标的距离）原创 2019-11-13 12:32:42 · 4191 阅读 · 0 评论 -
css:高度等于行高 和 行高的区别
多行文本设置高度等于行高会影响后面的布局所以单行文本写高度等于行高多行文本直接写行高原创 2019-11-13 12:00:46 · 1976 阅读 · 0 评论 -
CSS:固定宽高的图片放在行内块，无法和父亲一样大
//行内块放行内块对不齐，给图片来一份display:block;原创 2019-09-23 12:42:25 · 250 阅读 · 0 评论 -
CSS:兼容ie8
你看谷歌下正常的页面ie8下（圆角,placeholder属性,）原创 2019-09-22 23:09:18 · 261 阅读 · 0 评论 -
CSS:网页右边没有滚动条，内容超出也看不到怎么办
去掉body的overflow:hidden原创 2019-08-28 08:01:59 · 6292 阅读 · 0 评论