摘自<css世界>(张鑫旭著)经典案例---------持续更新中

MageekChiu 发布于2019-08-30 10:59 / 1828人阅读

摘要：需求页面某个模块的文字内容是动态的可能是几个字也可能是一句话然后希望文字少的时候居中显示文字超过一行的时候居左显示该如何实现呢核心代码如下需求展开收起带有滑动效果核心代码如下一个足够大的最大高度值需求鼠标移动到文字上方时文字被替

1.需求:页面某个模块的文字内容是动态的,可能是几个字,也可能是一句话.然后,希望文字少的时候居中显示,文字超过一行的时候居左显示.该如何实现呢?

/**核心css代码如下:**/
.box {
  text-align:center;
}
.content {
  display:inline-block;
  text-align:left;
}

2.需求:展开收起,带有滑动效果

/**核心代码如下**/
.element {
  max-height:0;
  overflow:hidden;
  transtion: max-height .25s;
}
.element.active {
  max-height:666px; //一个足够大的最大高度值
}

3.需求:鼠标移动到文字上方时,文字被替换为图片

/**核心代码如下**/
h1:hover {
  content: url("图片链接")
}

4.需求:css加载中...动态效果

正在加载中...
dot {
  display:inline-block;
  height:1em;
  line-height:1;
  text-align: left;
  vertical-align: -.25em;
  overflow: hidden;
}
dot::before {
  display:block;
  content: "...A..A.";
  white-space: pre-wrap;
  animation: dot 3s infinite step-start both;
}
@keyframes dot {
  33% {transform: translateY(-2em);}
  66% {transform: translateY(-1em);}
}

GPU云服务器云服务器 asp中&lt&gt的意思 python &lt&gt java &lt=&gt java&lt &gt

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114703.html

摘自<JavaScript语言精粹>经典案例----------持续更新

摘要：定义一个函数它设置一个节点为黄色然后把它渐变成白色不想当厨子的画家不是一个好老师郭德纲根据书上的例子有感而发自己用递归也写了一个类似的使用记忆功能技巧编写斐波那契数列得到的总数原例一普通递归的斐波那契数列共调用了函数多次升级 1.定义一个函数,它设置一个DOM节点为黄色,然后把它渐变成白色 var fade = function (node) { var level = 1; ...

张迁 2019-08-26 13:49 评论0 收藏0
《第五届中国CSSConf开发者大会》参会总结

摘要：剖析新版，为你所用大漠第二个议题是大漠老师的，大漠老师是的站长，著有图解核心技术与案例实战。自定义属性大漠老师多次强调，这叫做自定义属性，不叫变量。前言对于我来讲，虽然做前端那么多年，但对 CSS 的探索非常少，很多 CSS 知识还是在毕业之前积累下来。揣着一本《精通CSS:高级Web标准解决方案(第二版)》（现在出第三版了，这是我在 CSS 道路上的启蒙书）在前端路上走了这么几...

TerryCai 2019-08-29 18:34 评论0 收藏0
GMTC 全球大前端技术大会2019汇总（持续更新）

摘要：最新进展与未来展望主题演讲嘉宾董韬团队高级研究员演讲实录闲鱼基于的架构演进与创新专题演讲嘉宾于佳宗心阿里巴巴闲鱼客户端团队负责人基于跨平台框架的动态化平台建设专题演讲嘉宾刘志磊美团大前端技术专家前端开发编程语言的过去现在和未来贺师俊高级前端 Flutter 最新进展与未来展望主题演讲嘉宾：董韬Google Flutter 团队高级研究员 GMTC2019演讲实录|闲鱼基于Flutt...

qylost 2019-08-23 18:34 评论0 收藏0
关于css命名的一点思考，探讨一下css命名空间的可行性

摘要：毕竟这是张鑫旭七年前的文章。命名法的意思就是块元素修饰符是由团队提出的一种前端命名方法论。但此法没有经过大型项目的考验，希望大神们来探讨一下可行性。本文主要是探讨传统项目中的css命名，vue、react等单页应用都可以使用css-module来解决这个问题作为一名初级前端，免不了要切图(写css、html静态部分)，写css最头痛的就是给class命名了，词汇有限，本人又比较懒，...

lk20150415 2019-08-29 12:36 评论0 收藏0
关于css命名的一点思考，探讨一下css命名空间的可行性

摘要：毕竟这是张鑫旭七年前的文章。命名法的意思就是块元素修饰符是由团队提出的一种前端命名方法论。但此法没有经过大型项目的考验，希望大神们来探讨一下可行性。本文主要是探讨传统项目中的css命名，vue、react等单页应用都可以使用css-module来解决这个问题作为一名初级前端，免不了要切图(写css、html静态部分)，写css最头痛的就是给class命名了，词汇有限，本人又比较懒，...

crossoverJie 2019-08-01 16:52 评论0 收藏0