html - 制作框阴影并使文本更接近文本

标签 html css flexbox responsive

如何为每个文本 block 制作阴影，当我这样做时我失去了我的动画并且它没有t work correctly. That这就是为什么我把它做成 2 个 block ，但我需要 4 个带阴影的 block 。那么，我该怎么做，以及如何使 4 个文本 block 更接近图像？ 我有这个 CSS:

.div-wrap {
  display: flex;
  align-items: center;
  flex-flow: column nowrap;
  justify-content: space-between;
  text-align: center;
}

 :root {
  --time: 24;
}

.div-txt p.label {
  color: #0065de;
  font: bold 16px 'Arial';
  animation-duration: calc(var(--time) * 1s);
  animation-iteration-count: infinite;
  animation-name: color-change;
}

.div-txt:nth-child(1) p.label:nth-child(2) {
  animation-delay: 0s;
}

.div-txt:nth-child(1) p.label:nth-child(5) {
  animation-delay: calc(var(--time) / 4 * 1s);
}

.div-txt:nth-child(3) p.label:nth-child(2) {
  animation-delay: calc(var(--time) / 2 * 1s);
}

.div-txt:nth-child(3) p.label:nth-child(5) {
  animation-delay: calc(var(--time) / 1.33 * 1s);
}

.div-img {
  position: relative;
  height: 600px;
  width: 600px;
  max-width: 100%;
  /*  border: 2px solid #ccc;*/
  /*  background: radial-gradient(ellipse at center, rgba(153,153,153,1) 0%,rgba(0,0,0,1) 100%);*/
}

.div-img img {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  transform: translateX(-50%);
  opacity: 0;
  animation-duration: calc(var(--time) * 1s);
  animation-iteration-count: infinite;
  animation-name: fade;
}

.div-img img:nth-child(1) {
  animation-delay: 0s;
}

.div-img img:nth-child(2) {
  animation-delay: calc(var(--time) / 8 * 1s);
}

.div-img img:nth-child(3) {
  animation-delay: calc(var(--time) / 4 * 1s);
}

.div-img img:nth-child(4) {
  animation-delay: calc(var(--time) / 2.66 * 1s);
}

.div-img img:nth-child(5) {
  animation-delay: calc(var(--time) / 2 * 1s);
}

.div-img img:nth-child(6) {
  animation-delay: calc(var(--time) / 1.6 * 1s);
}

.div-img img:nth-child(7) {
  animation-delay: calc(var(--time) / 1.33 * 1s);
}

.div-img img:nth-child(8) {
  animation-delay: calc(var(--time) / 1.14 * 1s);
}

@keyframes color-change {
  0%,
  25%,
  100% {
    color: #0065de;
  }
  1%,
  24% {
    color: #ED0008;
  }
}

@keyframes fade {
  0%,
  20%,
  100% {
    opacity: 0;
    z-index: auto;
  }
  1%,
  99% {
    z-index: 1;
  }
  8%,
  12% {
    opacity: 1;
  }
}

@media all and (min-width: 1170px) {
    .div-wrap {
    flex-flow: row nowrap;
    justify-content: space-around;
  }
}

和这个 html:

 <div class="div-wrap">
  <div class="div-txt" style="box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);">

    <img src="img/svgforlia/connect.svg" style="width: 36px; height: 36px;">
    <p class="label" style="margin-top: 5px;">Connect</p>
    <p>Wear Lia device on the shoulders, <br>turn on it and connect application <br>with device.</p>

    <img src="img/svgforlia/calibrate.svg" style="width: 36px; height: 36px;">
    <p class="label" style="margin-top: 5px;">Calibrate</p>
    <p>After connection, set up calibration to <br>help device remember your upright <br>and slouch positions.</p>

  </div>
  <div class="div-img">
    <img src="img/mockups/2.png" title="Image 1">
    <img src="img/mockups/3.png" title="Image 2">
    <img src="img/mockups/5.png" title="Image 3">
    <img src="img/mockups/6.png" title="Image 4">
    <img src="img/mockups/7.png" title="Image 5">
    <img src="img/mockups/8.png" title="Image 6">
    <img src="img/mockups/9.png" title="Image 7">
    <img src="img/mockups/10.png" title="Image 8">
  </div>
  <div class="div-txt" style="box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);">

    <img src="img/svgforlia/train.svg" style="width: 36px; height: 36px;">
    <p class="label" style="color: #0065de;">Train</p>
    <p>Train your posture anytime you want, <br>set up daily goal to improve gradually <br>your posture.</p>

    <img src="img/svgforlia/analyze.svg" style="width: 36px; height: 36px;">
    <p class="label" style="margin-top: 5px;">Analyze</p>
    <p>Statistics let you track and analyze the <br>progress you’ve made from first <br>training to the last.</p>

  </div>
</div>

我如何才能在不失去响应式设计的情况下做到这一点？

最佳答案

右边的'white-space'是因为div-img元素固定宽度为600px；所以当然，当屏幕小于 600px 时，该元素将导致水平滚动。

当低于 600 像素时，您应该使用媒体查询使 div 宽度为 100%；

关于 box-shadow 的第二个问题，我让 div-txt 类环绕每个 img 和文本。所以现在你有 4 个 div-txt 而不是 2 个。

还为 div 添加了 70% 的宽度。您可以根据需要对其进行编辑。

添加的css是:

.div-txt {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  width: 70%;
  margin: 0 auto;
}

框阴影是您将其作为内联样式写入 div 的阴影。

见下文或 jsFIddle 

.div-wrap {
  display: flex;
  align-items: center;
  flex-flow: column nowrap;
  justify-content: space-between;
  text-align: center;
}

:root {
  --time: 24;
}

.div-txt p.label {
  color: #0065de;
  font: bold 16px 'Arial';
  animation-duration: calc(var(--time) * 1s);
  animation-iteration-count: infinite;
  animation-name: color-change;
}

.div-txt:nth-child(1) p.label {
  animation-delay: 0s;
}

.div-txt:nth-child(2) p.label {
  animation-delay: calc(var(--time) / 4 * 1s);
}

.div-txt:nth-child(4) p.label {
  animation-delay: calc(var(--time) / 2 * 1s);
}

.div-txt:nth-child(5) p.label {
  animation-delay: calc(var(--time) / 1.33 * 1s);
}

.div-img {
  position: relative;
  height: 600px;
  width: 600px;
  /*  border: 2px solid #ccc;*/
  /*  background: radial-gradient(ellipse at center, rgba(153,153,153,1) 0%,rgba(0,0,0,1) 100%);*/
}

.div-img img {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  transform: translateX(-50%);
  opacity: 0;
  animation-duration: calc(var(--time) * 1s);
  animation-iteration-count: infinite;
  animation-name: fade;
}

.div-img img:nth-child(1) {
  animation-delay: 0s;
}

.div-img img:nth-child(2) {
  animation-delay: calc(var(--time) / 8 * 1s);
}

.div-img img:nth-child(3) {
  animation-delay: calc(var(--time) / 4 * 1s);
}

.div-img img:nth-child(4) {
  animation-delay: calc(var(--time) / 2.66 * 1s);
}

.div-img img:nth-child(5) {
  animation-delay: calc(var(--time) / 2 * 1s);
}

.div-img img:nth-child(6) {
  animation-delay: calc(var(--time) / 1.6 * 1s);
}

.div-img img:nth-child(7) {
  animation-delay: calc(var(--time) / 1.33 * 1s);
}

.div-img img:nth-child(8) {
  animation-delay: calc(var(--time) / 1.14 * 1s);
}

.div-txt {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  width: 300px;
  margin: 0 auto;
}

@keyframes color-change {
  0%,
  25%,
  100% {
    color: black;
  }
  1%,
  24% {
    color: #ED5F8A;
  }
}

@keyframes fade {
  0%,
  20%,
  100% {
    opacity: 0;
    z-index: auto;
  }
  1%,
  99% {
    z-index: 1;
  }
  8%,
  12% {
    opacity: 1;
  }
}

@media all and (min-width: 1170px) {
  .div-wrap {
    flex-flow: row nowrap;
    justify-content: space-around;
  }
}

@media all and (max-width: 600px) {
  .div-img {
    max-width: 100%;
  }
}

body {
  margin: 0;
}
<div class="div-wrap">
  <div class="div-txt">

    <img src="img/svgforlia/connect.svg" style="width: 36px; height: 36px;">
    <p class="label" style="margin-top: 5px;">Connect</p>
    <p>Wear Lia device on the shoulders, <br>turn on it and connect application <br>with device.</p>
  </div>
  <div class="div-txt">
    <img src="img/svgforlia/calibrate.svg" style="width: 36px; height: 36px;">
    <p class="label" style="margin-top: 5px;">Calibrate</p>
    <p>After connection, set up calibration to <br>help device remember your upright <br>and slouch positions.</p>
  </div>



  <div class="div-img">
    <img src="img/mockups/2.png" title="Image 1">
    <img src="img/mockups/3.png" title="Image 2">
    <img src="img/mockups/5.png" title="Image 3">
    <img src="img/mockups/6.png" title="Image 4">
    <img src="img/mockups/7.png" title="Image 5">
    <img src="img/mockups/8.png" title="Image 6">
    <img src="img/mockups/9.png" title="Image 7">
    <img src="img/mockups/10.png" title="Image 8">
  </div>
  <div class="div-txt" style="">

    <img src="img/svgforlia/train.svg" style="width: 36px; height: 36px;">
    <p class="label" style="color: #0065de;">Train</p>
    <p>Train your posture anytime you want, <br>set up daily goal to improve gradually <br>your posture.</p>



  </div>
  <div class="div-txt">
    <img src="img/svgforlia/analyze.svg" style="width: 36px; height: 36px;">
    <p class="label" style="margin-top: 5px;">Analyze</p>
    <p>Statistics let you track and analyze the <br>progress you’ve made from first <br>training to the last.</p>
  </div>
</div>

关于html - 制作框阴影并使文本更接近文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53539173/

上一篇：java - 如何从 JavaFX 中的 Java Controller 控制 CSS 文件

下一篇：html - 如何让 child 成长并包裹在第一个元素下面？

相关文章：

html - 仅将没有 html 的网页中的文本复制到 Gmail 正文电子邮件中

jquery - 在 jquerymobile 中动态创建的评级星插件中未正确应用样式

html - 无法使 div 在 td 表格单元格内垂直堆叠

css - justify-content 在 Flex 和 Grid 布局中的工作方式不同

javascript - 带有 ScrollView 的 Flex 按钮 React Native

html - 为什么这段 CSS 代码没有按预期工作？

html - 内部有滚动图像的 iphone 剪影

javascript - 页面加载后的弹出窗口每 24 小时仅打开一次

css - 在 Internet Explorer 6 中降低图像饱和度

css - 如何在溢出 :scroll 的父级内部将子元素调整到其最高兄弟的高度

©2024 IT工具网  联系我们