html - 制作框阴影并使文本更接近文本
问题描述
如何为每个文本块制作阴影,当我这样做时,我失去了我的动画,这t work correctly. That
就是为什么我对 2 个块做阴影,但我需要 4 个带阴影的块。那么,我该怎么做,如何才能让 4 块文本更接近图像?我有这个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>
如何在不丢失响应式设计的情况下做到这一点?
解决方案
右边的“空白”是因为div-img
元素的固定宽度为 600px;所以当然当屏幕小于 时600px
,该元素会导致水平滚动。
当低于 600px 时,您应该使用媒体查询使 div 的宽度为 100%;
关于我的第二个问题,box-shadow
我制作了div-txt
每个 img 和 text 的类。所以现在你有 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>
推荐阅读
- java - ForkJoinFramwork,无需显式 ForkJoinPool/ExecutorService 直接调用 compute()
- r - 使用注释功能将汇总统计信息添加到图形中:ggplot2
- c++ - C++ Visual Studio 错误 C2995 无法解决问题
- reactjs - 存储在本地存储中的渲染/更新列表
- python - 在 Python 中绘图时,如何解决错误“没有足够的值来解包(预期 2,得到 1)”?
- javascript - 为什么工具提示没有隐藏在鼠标离开事件中的反应?
- python - 使用 Tkinter、Tensorflow 的应用程序的 Pyinstaller 调试日志
- here-api - 查找给定纬度和经度的速度限制的最有效方法
- r - 为什么 ggsave(..., dpi=300) 没有将图形 psi 更改为 300 而只是增加了图形的维度
- angular - 未处理的承诺拒绝:您在预期流的位置提供了“未定义”。使用 SwitchMap 和 Observable 类型的函数