读css揭秘(二)

1.文字效果
空心字

<style>
div {
  background: deeppink;
  color: white;
  text-shadow: 1px 1px black, -1px -1px black, -1px 1px black, 1px -1px black
}
</style>
<div>
  css
</div>

用多次模糊的text-shadow的效果比上面在放大情况下更好
<style>
div {
  background: deeppink;
  color: white;
  text-shadow: 0px 0px 1px black,0px 0px 1px black;
}
</style>

<div>
css
</div>

<style>
div {
  background: deeppink;
  color: white;
}
div text {
  fill: currentColor;
  stroke: black;
  stroke-width: 1;
}
</style>
<div>
  <svg>
    <text y='1em'>css</text>
  </svg>
</div>

发光字体

注意多重text模糊效果的叠加
<style>
div {
  background: black;
  color: #ffc;
  text-shadow: 0 0 .1em currentcolor, 0 0 .3em currentcolor
}
</style>

<div>
  css
</div>

文字模糊

<style>
div {
  background: black;
  color: #ffc;
}
div:hover {
  //filter: blur(.1em)
  color: transparent
  text-shadow: 0 0 .1em #ffc, 0 0 .1em #ffc; 
}
</style>
<div>
css
</div>

2.弹窗阴影

<style>
.lay {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, .5)
}
.content {
  position: absolute;
  z-index: 1
}
</style>

<div class='lay'>
</div>
<div class='content'>
</div>

<style>
div {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background: raba(0, 0, 0, .8)
}
</style>
<div />

3.图片交互

<style>
.outer {
  display: inline-block;
  position: relative;
}
.outer>div {
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  max-width: 100%;
  overflow: hidden;
  resize: horizontal
}
img {
  display: block;
}
</style>
<div class='outer'>
  <div>
    <img src='1614955396-ad-3.jpg' style='filter: blur(10px)'/>
  </div>
  <img src='' />
</div>

4.图片和文字

注意点： min-content将解析为这个容器内部最大的不可断行元素的宽度（即最宽的单词、图片或具有固定宽度的盒元
素）
<style>
div {
  max-width: min-content;
  margin: auto
}
</style>
<div>
  <img src='1614955396-ad-3.jpg' />
  <span>The great Sir Adam Catlace was named after Countess Ada Lovelace, the first programmer.</span>
</div>

5.css范围选择
li:first-child:nth-last-child(n+2):nth-last-child(-n+6)

6.居中定宽内容

<style>
div {
  padding: 1em;//回退
  padding: 1em calc(50% - 450px)
}
</style>

<div>
添加代码添加代码添加代码
</div>

7.垂直居中

注意点：元素需要定宽
<style>
div {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18em;
  height: 6em;
  margin-top: -3em;
  margin-left: -9em;
  //
  left: calc(50% - 3em);
  top: calc(50% - 3em)
  
}
</style>
<div>
  <p>Center me, please!</p>
</div>

<style>
div {
  width: 18em;
  margin: 50vh auto 0;
  transform: translateY(-50%)
}
</style>
<div>
  <p>Center me, please!</p>
</div>

8.紧贴底部的页脚

<style>
html, body {
  height: 100%
}
body {
  display: flex;
}
.footer {
  height: 50px;
  margin-top: auto
}
</style>
<div class="content">
  content
</div>
<footer class="footer">
  footer
</footer>

9.打字

<style>
@keyframes blink {
  50% {
    border-color: currentColor
  }
}
@keyframes typing{
  from {
    width: 0
  }
}
div {
  width: 3em;//配合中文比较好用
  width: 3ch;//配合英文比较好用
  overflow: hidden;
  white-space: nowrap;
  border-right: 1px solid transparent;
  animation: typing 3s steps(3), blink 1s steps(1)
}
</style>
<div>
我是谁
</div>

10.transition-origin
“transform-origin 只是一个语法糖而已。实际上你总是可以用translate() 来代替它。”

play.csssecrets.io/circular