css
beichen3997
每一天都是一个进步
展开
-
页面全局灰度实现原理
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> html { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: .原创 2020-05-19 18:33:53 · 251 阅读 · 0 评论 -
让超出DIV宽度范围的文字自动显示省略号...
div.jieshao{ padding:1rem 0.2rem; font-size: 1.5rem; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}div.jieshao{ padding:1rem 0.2rem; font-size: 1.5re...原创 2017-12-16 14:44:59 · 2849 阅读 · 0 评论 -
循环加载动画
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> body { background: #eaecfa; } .loader { width:...原创 2019-10-25 18:58:40 · 203 阅读 · 0 评论 -
模拟跳动的wify
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> html { height: 100%; } body { height: 100%; b...原创 2019-10-25 18:51:52 · 134 阅读 · 0 评论 -
跳动的舞蹈
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> /* ----- Loader ----- */ body { background-color: #55c1FA...原创 2019-10-25 18:44:25 · 194 阅读 · 0 评论 -
进度条动画
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>loading</title> <style> body { background: #000; } canvas { backgr...原创 2019-10-25 18:36:47 · 185 阅读 · 0 评论 -
好看的css动画2
html<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href=""> <link rel="stylesheet" type="t...原创 2019-10-17 19:28:40 · 110 阅读 · 0 评论 -
好看的css动画
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> * { box-sizing: border-box; } html { height: 100%; }...原创 2019-10-17 19:25:33 · 294 阅读 · 0 评论 -
CSS三大特性—— 继承、 优先级和层叠。
继承:即子类元素继承父类的样式;优先级:是指不同类别样式的权重比较;层叠:是说当数量相同时,通过层叠(后者覆盖前者)的样式。css选择符分类 首先来看一下css选择符(css选择器)有哪些? 1.标签选择器(如:body,div,p,ul,li) 2.类选择器(如:class="head",class="head_logo") 3.ID选择器(如:id="name...转载 2019-04-23 11:34:48 · 167 阅读 · 0 评论 -
css阴影shadow
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .list{ width:100px; height原创 2018-11-30 14:16:37 · 635 阅读 · 0 评论 -
css中filter过滤修改图片
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style> .img{ /* filter:blur( ) 高斯模糊 */ /* filter:blur(2px原创 2018-11-30 14:15:25 · 780 阅读 · 0 评论 -
浅谈vue中style的scoped属性(修改特定Element组件样式的方法)
在单页.vue文件中,为了保证各组件间的css样式不冲突,很可能会使用到局部css,也就是给<style>标签加上一个scoped属性(当然也可以用各种命名规则来规避这个问题)。一开始用的时候感觉很神奇,于是看代码查资料了解了一下原理。所谓的局部css,就是通过vue-loader这个插件,在编译打包的时候将带有scoped属性的css打上一个tag,同时将template内的所...原创 2018-11-27 11:00:50 · 1040 阅读 · 0 评论 -
利用CSS改变图片颜色的100种方法!
利用CSS改变图片颜色的100种方法!前端指南 前端大全 3天前(给前端大全加星标,提升前端技能) 来源: 前端指南 前言“说到对图片进行处理,我们经常会想到PhotoShop这类的图像处理工具。作为前端开发者,我们经常会需要处理一些特效,例如根据不同的状态,让图标显示不同的颜色。或者是hover的时候,对图片的对比度,阴影进行处理。” 本文略长,请耐心阅...转载 2018-11-11 16:40:02 · 406 阅读 · 0 评论 -
vue中scoped样式与css Module 对比
在现代化的 Web 开发中,CSS 还远未完美,这一点应该没有什么意外。现今的项目通常都相当复杂,而 css 样式天生又是全局性的,所以到最后总是极容易地就发生样式冲突——要么是样式相互覆盖,要么就是隐式地级联到了下面那些我们未考虑到的元素。在减轻 CSS 存在的主要痛点方面,我们普遍采用的解决方案是引入 BEM (Block Element Modifier) 方法学。不过这只能解决我们...转载 2018-11-13 09:32:36 · 472 阅读 · 0 评论 -
vue关于class和样式的使用
vue关于class和样式的使用这篇文章主要为大家详细介绍了Vue.js的Class与样式绑定,具有一定的参考价值,感兴趣的小伙伴们可以参考一下数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是 attribute,我们可以用 v-bind 处理它们:只需要计算出表达式最终的字符串。不过,字符串拼接麻烦又易错。因此,在 v-bind 用于 class 和 s...转载 2018-10-26 11:37:17 · 258 阅读 · 0 评论 -
css:子元素div 上下左右居中方法总结
最近在面试,不停地收到了知识冲击,尤其是对于一些基础的css、html、js问题居多,所以自我也在做反思,今天就css问题,如何让一个子元素div块元素上下左右居中 (以下总结方法,都已得到验证)。 情景一:一个浏览器页面中,只有一个div模块,让其上下左右居中 解决方案: { position:fixed; left:0; ri...原创 2018-06-20 17:23:51 · 555 阅读 · 0 评论 -
css布局:左边固定宽度,右边自适应宽度或右侧固定,左侧自适应三种方法
方法一:浮动布局这种方法我采用的是左边浮动,右边加上一个margin-left值,让他实现左边固定,右边自适应的布局效果HTML Markup<div id="left">Left sidebar</div> <div id="content">Main Content</div>CSS Code<style type="text转载 2018-06-20 17:14:19 · 6323 阅读 · 0 评论 -
css布局两边固定中间自适应的四种方法
第一种:左右侧采用浮动 中间采用margin-left 和 margin-right 方法。代码如下: <div style="width:100%; margin:0 auto;"> <div style="width:200px; float:right; background-color:#960">这是右侧的内容 固定宽度</div>...转载 2018-06-20 17:00:24 · 1105 阅读 · 0 评论