web前端-css3/h5
关注
分享
扫一扫
文章平均质量分 51
JinmyHe
每天记录一点滴
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
svg动态科技元素
<!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>科技.原创 2020-08-17 16:02:27 · 902 阅读 · 0 评论 -
css3 好看的按钮动态颜色变化效果
<!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>An.原创 2020-07-24 16:29:03 · 1164 阅读 · 0 评论 -
Css3 button hover effect
<!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>Bu.原创 2020-07-24 15:50:59 · 297 阅读 · 0 评论 -
css3 一个button hover 效果
<!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>Bu.原创 2020-07-21 11:20:31 · 3117 阅读 · 0 评论 -
css3 梯度渐变色
<article> <h1>Gradient Text</h1> <p>linear-gradient() + background-clip + text-fill-color</p> </article>article { background: linear-gradient(to right, hsl(98 100% 62%),hsl(204 100% 59%)); -webkit-ba..原创 2020-07-20 15:47:56 · 574 阅读 · 0 评论 -
纯css load带文本动画
* { margin: 0; padding: 0; } html,body { width: 100%; height: 100%; background: #3498db; } /*animation begin*/#loader-container { width: 200px; height: 200px; color: white; margin: 0 auto; position: absolute; to...原创 2020-07-16 15:37:14 · 264 阅读 · 0 评论 -
纯css3个点加载动画
<style>html,body { width: 100%; height: 100%;}body{ background: black; font-family: 'Poppins', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: flex; justify-content: center; a...原创 2020-07-16 14:41:48 · 1826 阅读 · 0 评论 -
前端插件收藏
1.Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。https://www.swiper.com.cn/2.WOW.js – 让页面滚动更有趣https://www.delac.io/wow/3.animate.css 动画库https://animate.style/4.hover.csshttp://ianlunn.github.io/Hover/5.Magic.css一款独特的CSS3动画特效包http://www.jq22..原创 2020-07-06 13:10:36 · 198 阅读 · 0 评论 -
CSS3酷炫加载动画
<style> *{ margin: 0; padding: 0; } body { display: flex; justify-content: center; align-items: center; padding-top: 50px; background: #000; } .load { position: relative; width: 150px; height: 150px;.原创 2020-07-02 14:43:43 · 369 阅读 · 0 评论 -
WEB标准化
WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准三方面：结构：用于结构化的Web标准化技术主要由：Html、Xhtml、Xml。表现：主要指CSS。行为：表现行为的标准技术主要有：DOM和Javascript。Dom是一种让浏览器和Web内容结构沟通的接口，jav...原创 2018-09-06 12:39:52 · 1601 阅读 · 0 评论 -
HTTP头部信息
HTTP头部信息每个HTTP请求和响应都会带有相应的头部信息。默认请问下，在发送xhr请求的同时， 还会发送下列头部信息:Accept:浏览器能够处理的内容类型Accept-Charset:浏览器能够显示的字符集Accept-Encoding:浏览器能够处理的压缩编码Accept-Language:浏览器 与服务器之间连接的类型Cookie:当前页面设置所在的域Re...原创 2018-09-23 00:17:59 · 1209 阅读 · 0 评论 -
BFC规范的理解
在一个Web页面的CSS渲染中，块级格式化上下文 (Block Fromatting Context)是按照块级盒子布局的。W3C对BFC的定义如下：浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下...原创 2018-09-09 18:56:01 · 1406 阅读 · 0 评论 -
link 和@import 的区别是
link属于HTML标签，而@import是CSS提供的; 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载; import只在IE5以上才能识别，而link是HTML标签，无兼容问题; link方式的样式的权重 高于@import的权重. ...原创 2018-09-09 20:47:15 · 174 阅读 · 0 评论 -
css各种居中
水平居中.parent{ text-align: center;}.child{ display: inline-block;}.child{ display:table; margin: 0 auto;}.parent{ position:relative;}.child{ position:absolute; ...原创 2018-09-09 15:19:34 · 203 阅读 · 0 评论 -
了解Web Components
Web Components是一套不同的技术，允许您创建可重用的定制元素（它们的功能封装在您的代码之外）并且在您的web应用中使用它们。概念和用法 Web Components旨在解决这些问题 — 它由四项主要技术组成，它们可以一起使用来创建封装功能的定制元素，可以在你喜欢的任何地方重用，不必担心代码冲突。Custom elements（自定义元素）：一组JavaScript AP...原创 2018-09-05 12:44:31 · 250 阅读 · 0 评论 -
移动端布局心得
1、viewport<meta name="viewport" content="width=device-width, initial-scale=1.0">2、百分比移动端使用百分比很重要3、单位 rem vh vw 的使用4.flex弹性布局在移动端常用5.fixedcss3的transform等给我们带来了fixed的相对定位问题，其次虚拟键...原创 2018-08-25 21:12:11 · 389 阅读 · 0 评论 -
rem使用
rem是什么？rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过rem计算的规则是依赖根元素,em是依赖父元素计算。首先，先说一个常识，浏览器的默认字体大小都是1...原创 2018-09-05 00:41:34 · 1540 阅读 · 0 评论 -
CSS3圆角详解
圆角 border-radius属性border-radius可以同时设置1到4个值。如果设置1个值，表示4个圆角都使用这个值。如果设置两个值，表示左上角和右下角使用第一个值，右上角和左下角使用第二个值。如果设置三个值，表示左上角使用第一个值，右上角和左下角使用第二个值，右下角使用第三个值。如果设置四个值，则依次对应左上角、右上角、右下角、左下角（顺时针顺序）。4个圆角（border-ra...原创 2018-07-17 22:06:01 · 2174 阅读 · 0 评论 -
CSS3阴影
外阴影：box-shadow: X轴 Y轴 Rpx color; 属性说明（顺序依次对应）： 阴影的X轴(可以使用负值) 阴影的Y轴(可以使用负值) 阴影模糊值（大小） 阴影的颜色 内阴影：box-shadow: X轴 Y轴 Rpx color inset; 注：默认是外阴影 内阴影：inset 可以设置成内部阴影...原创 2018-08-10 21:32:42 · 529 阅读 · 0 评论 -
css hack
兼容各大主流浏览器css hack汇总如下：.element{color:#000; /*w3c标准*/[;color:#f00;]; /*Webkit(chrome和safari)*/color:#666\9; /*IE8*/*color:#999; /*IE7*/_color:#333; ...原创 2018-07-11 16:40:42 · 151 阅读 · 0 评论 -
使用弹性盒子，子项内容过长把父盒子撑开超出范围的问题，使用定位来解决
今天项目的组件遇到一个隐藏的样式bug。该组件大概是这样设计，左中右结构，左侧放置标题，中间放置显示内容，右侧放置图标之类的,如下图。左侧内容和中间主体内容是必定显示的，右侧图标可能不用显示。就采用了弹性盒子布局。左侧和右侧不是固定，但会有一个具体的值，所有中间就会根据两侧分配后获得剩下的宽度分配，就采用flex:1; 这样的写法。当中间内容过长的时候，把会row-item的宽度给撑开，这就造成了...原创 2018-07-12 17:44:13 · 11434 阅读 · 0 评论 -
CSS3 2D 转换
CSS3 转换通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。translate() rotate() scale() skew() matrix()translate() 方法通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：div{transform: transl...原创 2018-08-05 12:02:05 · 93 阅读 · 0 评论 -
CSS3 过渡
CSS3 过渡 transition通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。要实现这一点，必须规定两项内容：规定您希望把效果添加到哪个 CSS 属性上 规定效果的时长几个实例：div{transition: width 2s;-moz-transition: width 2s...原创 2018-08-03 00:00:07 · 160 阅读 · 0 评论 -
fontawesome字体图标使用
Font Awesome 字体提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式。使用 CSS复制 font-awesome 目录到你的项目中.在<head>处加载font-awesome.min.css如下。 <link rel="stylesheet" href="path/to/font-awesome/css/font-awesom...原创 2018-07-29 22:23:37 · 1319 阅读 · 0 评论 -
CSS3 多列
CSS3 多列通过 CSS3，您能够创建多个列来对文本进行布局 - 就像报纸那样！column-count column-gap column-rule把 div 元素中的文本分隔为三列：div{-moz-column-count:3; /* Firefox */-webkit-column-count:3; /* Safari 和 Chrome */column-c...原创 2018-08-05 13:57:01 · 145 阅读 · 0 评论 -
CSS3 多媒体查询
@media 规则在 CSS2 中有介绍，针对不同媒体类型可以定制不同的样式规则。例如：你可以针对不同的媒体类型(包括显示器、便携设备、电视机，等等)设置不同的样式规则。但是这些多媒体类型在很多设备上支持还不多媒体查询语法多媒体查询由多种媒体组成，可以包含一个或多个表达式，表达式根据条件是否成立返回 true 或 false。@media not|only mediatype...原创 2018-08-07 23:07:11 · 465 阅读 · 0 评论 -
元素居中
用几行代码实现元素上下左右居 中element { position: relative; top: 50%; left: 50%; transform: translate(-50%,-50%);}原创 2018-08-03 20:25:40 · 111 阅读 · 0 评论 -
用CSS美化被鼠标选中的文字的样式
CSS代码/* webkit, opera, IE9 */::selection{background:lightblue;}/* mozilla firefox */::-moz-selection{background:lightblue;}-moz-属性前缀是个火狐浏览器用的，而基本的::selection选择器是给谷歌浏览器用的。跟其它CSS选择器的用法一样，...原创 2018-08-03 11:26:53 · 2707 阅读 · 0 评论 -
Sass总结
SASS - 成熟、稳定、强大的 CSS 扩展语言解析器。Sass 是一个 CSS 的扩展，它在 CSS 语法的基础上，允许您使用变量 (variables), 嵌套规则 (nested rules), 混合 (mixins), 导入 (inline imports) 等功能，令 CSS 更加强大与优雅。 一、特色完全兼容 CSS3 在 CSS 语言的基础上增加变量(variab...原创 2018-08-24 22:53:16 · 333 阅读 · 0 评论 -
Less用法
less一种 动态 样式 语言LESS 将 CSS 赋予了动态语言的特性，如 变量， 继承，运算， 函数. 一、变量变量允许我们单独定义一系列通用的样式，然后在需要的时候去调用。 // LESS@color: #4D926F;#header { color: @color;}h2 { color: @color;}/* 生成的 CSS */#he...原创 2018-08-20 17:52:55 · 460 阅读 · 0 评论 -
弹性盒子flex使用介绍
一、Flex 布局是什么Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性.box{ display: flex;}设置为Flex布局后，子元素的float、clear和vertical-align等属性将失效。 二、Flex基本概念用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容...原创 2018-08-17 15:18:41 · 923 阅读 · 0 评论 -
css3具体视图滚动条个性化设置
需要设置某个div视图的滚动条样式(chrome浏览器下).leftMenu-scroll { // position: absolute; // overflow-y: auto; // overflow-x: hidden; @include page-scroll; // width: 1000%; ...原创 2018-07-10 16:56:41 · 467 阅读 · 0 评论