Css3
关注
分享
扫一扫
Bright2017
学，然后知不足！
展开
-
vue动画 右侧滑出层
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> <meta name="flexible" content="initial-dpr=2" /...原创 2021-04-25 10:35:55 · 988 阅读 · 0 评论 -
css3 文字横向无缝滚动
<div class="notice-container"> <div class="header-notice-marquee" id="notice-marquee"> <div class="header-marquee-item1 flex"> <div>111111111111111111111111111</div> <div>222222222222222222222222222<.转载 2021-01-30 15:19:44 · 1170 阅读 · 0 评论 -
font-weight 对应ps中的粗细
light 对应font-weight值为100~300，regular对应font-weight值为400，medium对应font-weight值为500，bold一般对应600或700，black对应font-weight值为800，ultrablack对应font-weight值为900...原创 2020-04-29 14:55:48 · 1524 阅读 · 0 评论 -
css3瀑布流顶部不对齐，列断裂
问题展现.waterfall{ padding: .2rem .28rem; column-count: 2; //显示两列 column-gap: normal; //列间距}.waterfall .item{ width: 3.2rem; overflow:hidden; box-sizing: border-box; ...转载 2019-11-22 09:38:14 · 1932 阅读 · 0 评论 -
圆角兼容ie8
ie8下不支持圆角属性，这里需要引入iecss3.htc文件演示地址：http://www.bright2017.top/test1/test1-17/原创 2018-06-20 14:51:56 · 1002 阅读 · 0 评论 -
HTML5----响应式（自适应）网页设计
第一步：在网页代码的头部，加入一行viewport元标签<meta name="viewport" content="width=device-width, initial-scale=1" /> viewport是网页默认的宽度和高度，上面这行代码的意思是：网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1...转载 2018-07-24 15:09:57 · 2174 阅读 · 0 评论 -
CSS3 @keyframes 规则
CSS3真的很棒，很酷炫。但是很多动画特效基本的方法都写过一遍，都看过。但是遇到一些酷炫的特效时，有时候真的挺懵逼的，一时间想不到如何去实现它。比如下面这个效果，是使用CSS3 @keyframes 规则实现的，之前在某个网站上看到过，研究了一下。在线Demo1:http://www.bright2017.top/test1/test1-19/在线Demo2:http://www.br...原创 2018-07-31 10:33:06 · 492 阅读 · 0 评论 -
滚动条左右滑动
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="flexible" content="initial-dpr=2" /> <meta name="viewport" conte原创 2018-09-11 17:11:02 · 1696 阅读 · 0 评论 -
-webkit-overflow-scrolling解决移动端iOS滚动卡顿现象
css3中-webkit-overflow-scrolling使用方法-webkit-overflow-scrolling: touch; //有回弹效果 -webkit-overflow-scrolling: auto; //滑到哪停到哪实现滚动回弹效果的页面布局 (实战)<div class="containBox no-scrollbar"> <div...转载 2018-10-12 14:00:58 · 2702 阅读 · 0 评论 -
css 实现div内显示两行或三行，超出部分用省略号显示
一、div内显示一行，超出部分用省略号显示 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;二、div内显示两行或三行，超出部分用省略号显示 overflow: hidden; text-overflow: ellipsis; display: -webkit...转载 2018-12-19 10:47:20 · 4253 阅读 · 0 评论 -
HTML和CSS特殊字符表
HTML有许多特殊的字符，您对此有多少了解？平时在WEB制作中，您又有用到多少？或者说你在平时使用之时，是否也会碰到，有许多特殊字符要如何打印出来？比如说“笑脸”，比如说“版权号”。要是你用时忘记了这些特殊字符，不要紧，请记住今天这个地址，你就随时可以查到这些特殊字符的表示方法。简单的介绍一下其使用方法：1、这些字符属于unicode字符集，你的文档需要声明为”utf-8“2、列表符号...转载 2019-02-25 11:43:04 · 712 阅读 · 0 评论 -
纯 CSS 实现高度与宽度成比例的效果
纯 CSS 实现高度与宽度成比例的效果首先需要知道，一个元素的padding，如果值是一个百分比，那这个百分比时相对于其父元素的宽度而言的，即使对于padding-bottom和padding-top也是如此。另外在计算overflow时，是将元素的内容区域（即width/height对应的区域）和 padding 区域一起计算的。换句话说，即使将元...转载 2019-08-14 11:29:04 · 1531 阅读 · 0 评论 -
移动端rem加载时页面字体先放大再缩小
先给body 设置visibility：hidden；<body id="body" style="visibility: hidden;"></body>然后需要在body下将body的样式设置为visibility：visible；<script> document.getElementById('body').style.visi...转载 2019-08-14 16:37:03 · 2032 阅读 · 0 评论 -
css字体适配rem 根据屏幕大小变换字体大小
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>css适配</title> <meta name="viewport" content="width=device-width,initial-scale=1,max...转载 2019-08-17 13:56:52 · 6384 阅读 · 1 评论 -
常用Css3特效和图形
整理了一些常用的css效果和css图形，方便自己查看和使用。不喜勿喷，谢谢。截图:预览地址：https://www.bright2017.top/animation原创 2018-06-05 17:51:19 · 872 阅读 · 0 评论 -
Wow.js常用特效对应名称
wow.js是我非常喜欢使用的一个插件，不过每次用的时候都要去查一下每个类名代表什么意思，比较麻烦，这里记录一下。1）引入animate.css<link rel="stylesheet" type="text/css" href="css/animate.css"/>2)引入wow.js<script src="js/wow.js" type="text/javascript原创 2018-05-24 09:34:33 · 1297 阅读 · 0 评论 -
IE兼容H5和CSS3方法
1：加载兼容文件JS因为IE8既不支持HTML5也不支持CSS3 Media，所以我们需要加载两个JS文件，来保证我们的代码实现兼容效果：<!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script s...转载 2018-06-04 15:50:34 · 1372 阅读 · 0 评论 -
Zoom:1 是什么鬼？有什么作用？
zoom:1的作用转载 2017-06-17 12:35:52 · 4412 阅读 · 0 评论 -
Css3由远到近属性练习
Css3的属性是很强大的，我比较喜欢这个效果，看起来很棒。由远到近的一个缩放效果。就像上图展示的一样，刚开始没有，然后慢慢出现，变大。废话就这么多，下面是代码，例子比较多简单，不要见怪。 Css3由远到近属性练习 .Admin{ position: relative; } .demo { animation: mo原创 2017-06-08 11:21:53 · 3567 阅读 · 0 评论 -
Css3阴影
为元素添加阴影通过：box-shadow 属性语法：box-shadow:h-shadow v-shadow blur spread color inset;解释：h-shadow：必须写，这是水平阴影的位置，可以是负数。v-shadow：必须写，这是垂直阴影的位置，可以是负数。blur：可选值，这是模糊的距离，不明白一会可以修改下面示例的参数。spread：可选值，阴原创 2017-06-08 14:30:33 · 548 阅读 · 0 评论 -
去除select边框和三角-----appearance:none
隐藏select边框原创 2017-06-24 16:10:24 · 3944 阅读 · 0 评论 -
css强制换行
css强制换行转载 2017-08-08 12:18:34 · 636 阅读 · 0 评论 -
移动端项目下input自动变成圆角？
移动端项目下input自动变成圆角？原创 2017-08-10 14:42:46 · 2682 阅读 · 0 评论 -
css超出变成省略号
css超出变成省略号转载 2017-08-05 18:26:10 · 609 阅读 · 0 评论 -
常用的css图形
在大佬博客看到的，稍微整理了一下，效果图： css绘画常见图形 css:div{ display: inline-block !important; float: left !important; margin-转载 2018-01-04 16:25:00 · 389 阅读 · 0 评论 -
Css3属性box-sizing
今天和大家分享一个Css3的属性：box-sizing属性。语法：box-sizing: content-box | border-box | inherit ;值：1. content-box 我的理解是，设置的宽度不包含内边距，边框，外边距。2. border-box 我的理解是，设置的宽度包含内边距，边框，外边距。3. inherit原创 2017-06-09 13:47:20 · 469 阅读 · 0 评论 -
比较酷炫的css鼠标悬浮效果
效果如下：原文链接：https://zhuanlan.zhihu.com/p/34173506我是写不出来了，学习了。原创 2018-03-08 00:01:51 · 1688 阅读 · 0 评论 -
Css3引入外部字体
设计师选择了一个字体“汉仪细行楷简”,计算机本身并没有这个字体，需要下载下来才可以展示给用户。这个时候需要把你自己下载好的字体放在项目文件中，同时重新引入才可以使用外部字体。结果如下:字体文件“汉仪细行楷简.ttf”：https://pan.baidu.com/s/1y8RkHnwdrhPYFwoeOZ3evQ...原创 2018-04-10 16:09:43 · 1288 阅读 · 0 评论 -
Css3动画库Animate.css的使用
演示地址：https://daneden.github.io/animate.css/下载animate.css，页面引入，在需要使用动画的元素上添加相对应的类名即可。默认给需要动画的元素添加animated，这是必须添加的，然后再添加想对象的动画效果的类名即可。如下：...原创 2018-04-11 10:18:23 · 568 阅读 · 2 评论 -
input 新属性type="range"
因为之前写了一个模拟的音乐播放器，所以对这个input的新属性稍微关注了一下，功能还是很强大的。type="range" 直接显示一个滑块控件，可拖动。不过很多时候这个样式不太能满足我们项目的需求，所以这里可以适当调整一下。修改前样式：修改后样式：作为一个拿来主义者，代码给你们：<!DOCTYPE html><html> <head> <meta ...转载 2018-04-22 20:21:41 · 4852 阅读 · 2 评论 -
修改placeholder的文本颜色
今天早上遇到一个问题，修改input的提示信息文字的颜色。但是placeholder这个属性是H5的新属性，他的颜色不归color管理。纠结了5分钟开始百度各种答案。对于 ie 浏览器我们可以通过自定义的 class 名称，直接修改 span 这个标签的样式。对于其他浏览器诸如谷歌和火狐就需要特殊处理了，不多说直接上代码：css：::-webkit-input-转载 2017-03-27 11:17:03 · 1036 阅读 · 0 评论