相关疑难解决方法(0)
如何在CSS中创建点划线和点划线点线和矩形
如何创建点划线和点划线点线和矩形像
在CSS中没有使用外部链接到图像或其他(如果没有更好的方法可以使用内联数据网址).
https://codepen.io/ibrahimjabbari/pen/ozinB
包含一些样本
hr.style17:after {
content: '§';
display: inline-block;
position: relative;
top: -14px;
padding: 0 10px;
background: #f0f0f0;
color: #8c8b8b;
font-size: 18px;
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
transform: rotate(60deg);
}
.它使用内容和旋转CSS属性,也许可以使用.
推荐指数
解决办法
查看次数
如何从左到右动画下划线？
我正在尝试从 uber.design 站点复制此转换：
问题是我一直在扭转过渡：
.un {
display: inline-block;
}
.un:after {
content: '';
width: 0px;
height: 2px;
display: block;
background: black;
transition: 300ms;
}
.un:hover:after {
width: 100%;<span class="un">Underlined Text</span>推荐指数
解决办法
查看次数
如何为矩形的对角线设置动画？
我正在尝试对角线添加动画。我知道的矩形的高度和宽度（动态累加）。现在尝试从N到L，或从O到M或其他方式设置一条线的动画。我尝试使用svg并增加了行的x1，y1，x2，y2，但这变得越来越复杂。任何更简单的解决方案？
推荐指数
解决办法
查看次数
在div的中间插入一条曲线
我正在尝试在div的中间插入一条曲线，因此可以实现以下结果：
这是我到目前为止所做的。
.back{
background-color: grey;
width: 100%;
height: 200px;
display: inline-grid;
align-items: center;
overflow: hidden;
}
.line{
height: 3px;
background: linear-gradient(to right, yellow, purple, blue, green, red, orange);
transform: rotate(-10deg);
}<div class="back">
<div class="line"></div>
</div>推荐指数
解决办法
查看次数
如何在 CSS 中对流经背景图像的渐变波纹效果进行动画处理
不完全是脉冲动画——但有点相似（不是径向的，而是线性的）——如果你转动一块玻璃并看到一条光带扫过它，我试图创建一种镜头光晕的效果，在CSS。假设您在 CSS 中有一个常规背景图像，或一个无缝重复背景图像。现在，您想要在该图像上制作一条矩形光带的动画，该光带有点像白光的“淡入...全光...淡出”渐变。因此，您有一种线性渐变，类似于transparent, semi-transparent-white, white, semi-transparent-white, transparent流过背景图像（无缝/重复背景图像或常规背景图像），反复流过，就像不断运动的水池一样。
想知道这种事情在 CSS 中是否可行，以及如何做到。
也许它只是一个动画线性渐变蒙版（我不熟悉但听说过）。没有把握。
基本上像这样对半透明线性渐变进行动画处理（只是线条部分，想象它是一个简单的矩形）。
推荐指数
解决办法
查看次数
使用背景大小时忽略 CSS 背景位置
我试图隐藏background-image（即进行缩放background-size）使用background-position。
我故意不使用visibility或任何会导致重新布局的东西，因此在切换回视图时会导致渲染输出的轻微波动。此外，我当前的应用程序限制我使用伪元素作为黑客/解决方法。
div {
background: url(image.png) no-repeat 200% 200%/100%;
height: 100px; /* half height of image */
width: 250px; /* half width of image */
}
不幸的是，图像没有定位。如果/100%取下 ，则定位工作正常。
jsfiddle：http : //jsfiddle.net/prometh/60jtpust/
更新：
奇怪的是，它在background-size50% 时工作：http : //jsfiddle.net/60jtpust/8/
推荐指数
解决办法
查看次数
如何仅使用CSS和一个元素来编码此菜单图标？
到目前为止，我已经尝试过了。
body {
margin:0;
padding:20px;
background-color: #000;
}
.mobil-menu__icon {
height: 50px;
width: 50px;
background: linear-gradient(to bottom, #fff 0%, #fff 20%, transparent 20%, transparent 100%),
linear-gradient(to bottom, transparent 0%, transparent 40%, #fff 40%, #fff 60%, transparent 60%, transparent 100%),
linear-gradient(to bottom, transparent 0%, transparent 80%, #fff 80%, #fff 100%);
}<div class="mobil-menu__icon"></div>推荐指数
解决办法
查看次数
如何使我的无限线性动画流畅？
动画重置后，动画中会出现明显的中断。
这是我所拥有的：
@keyframes AnimationName {
0% {
background-position: 100% 0%
}
100% {
background-position: 0% 0%
}
}
.myanimation {
width: 50px;
height: 150px;
background: repeating-linear-gradient(-45deg, #43ABC9, #43ABC9 7px, #369ebc 7px, #369ebc 14px);
animation: AnimationName 2s linear infinite;
background-size: 200% 200%;
}<div class="myanimation"></div>如何使它平滑且不引人注意？
推荐指数
解决办法
查看次数
这个滚动阴影 CSS-magic 是如何工作的？
我在2012 年发现了这篇臭名昭著的文章。它详细介绍了如何创建滚动阴影并且仍然可以很好地工作，但我真的很想了解解决方案，而且我似乎无法在网上找到必要的信息。
这是最初由@kizmarh创建并由@leaverou 改进的缩小代码（博客文章）：
.scrollbox {
overflow: auto;
width: 200px;
max-height: 150px;
background:
/* Shadow covers */
linear-gradient(white 30%, rgba(255, 255, 255, 0)),
linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%,
/* Shadows */
radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)),
radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%;
background-repeat: no-repeat;
background-color: white;
background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
background-attachment: local, local, …css background-image linear-gradients radial-gradients background-color
推荐指数
解决办法
查看次数