小编Tem*_*fif的帖子
使用JavaScript创建16x16网格
我正在尝试用JavaScript创建一个16x16的网格。我尝试使用的方法是div在HTML中创建一个空白，然后将其他div附加到其上，并勾勒出边框。我似乎无法完成这项工作，并且将我的代码放在下面。
HTML：
<!DOCTYPE html>
<head>
<title>Etch-a-Sketch</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<div id="container">
</div>
</body>
JavaScript：
// Sets important constants and variables
const container = document.getElementById("container");
let rows = document.getElementsByClassName("gridRow");
let cells = document.getElementsByClassName("cell");
// Creates a default grid sized 16x16
function defaultGrid() {
makeRows(16);
makeColumns(16);
}
// Takes (rows, columns) input and makes a grid
function makeRows(rowNum) {
// Creates rows
for (r = 0; r < rowNum; r++) {
let row = …15
推荐指数
推荐指数
2
解决办法
解决办法
2759
查看次数
查看次数
如何在 CSS“过山车”动画中弯曲一条线？
我正在尝试使用 CSS 创建过山车风格的动画。
我想知道如何在循环阶段弯曲“过山车”。
我正在寻找一个全 CSS 解决方案，但如果需要一点 JavaScript，我可以接受。
到目前为止我的代码：
#container {
width: 200px;
height: 300px;
margin-top: 50px;
position: relative;
animation: 10s infinite loop;
animation-timing-function: linear;
}
#coaster {
width: 100px;
height: 10px;
background: lightblue;
position: absolute;
bottom: 0;
left: 1px;
right: 1px;
margin: 0 auto;
}
@keyframes loop {
from {
margin-left: -200px;
}
30% {
margin-left: calc(50% - 75px);
transform: rotate(0deg);
}
60% {
margin-left: calc(50% - 125px);
transform: rotate(-360deg);
}
to {
transform: rotate(-360deg);
margin-left: 100%;
}
} …15
推荐指数
推荐指数
1
解决办法
解决办法
521
查看次数
查看次数
使用CSS3对角切割图像
如何使用CSS3对角切割部分图像或容器？
需要切除的部分具有三角形的形状
更具体地说:如果上面的图片是图像,则应该剪切蓝色部分,而不是黄色
HTML应该是:
<figure>
<img src="img_pulpit.jpg" alt="The Pulpit Rock">
</figure>
要么:
<div class="container">
content
</div>
我自己的调查有很多方法可以做到这一点,但大多数都是hacky,所以寻找最好的方法
最低浏览器支持:IE11,最新webkits等
14
推荐指数
推荐指数
3
解决办法
解决办法
2万
查看次数
查看次数
如何组合 line-clamp 和 text-overflow:ellipsis？
我如何（在 Chrome 中）将“超过 3 行的省略号”和“不适合一行的单词的省略号”与纯 CSS结合起来？
据我所知，-webkit-line-clamp需要display:-webkit-box，但这确实阻止text-overflow: ellipsis了生效。
在示例中，您应该看到两个椭圆。最后一行有一个省略号，因为整个文本较大，第二行有一个省略号，因为该单词无法容纳一行。但事实并非如此？我怎样才能实现这个目标？
p {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
height:56px /* fallback */
}<p>Lorem ipsumnnnnnnnnnn dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et.</p>14
推荐指数
推荐指数
1
解决办法
解决办法
2130
查看次数
查看次数
在鼠标悬停时反转文本颜色
我想用自定义的黑色光标悬停它时反转黑色文本.这个GIF证明了这个效果:
无法用头脑来解决这个问题,使用CSS和JS.我想有些混合混合模式,剪切蒙版,伪元素和滤镜.
以下代码使光标变为白色,但不会将黑色文本变为白色.听起来很抽象？这是一个演示.
mix-blend-mode: difference;
filter: invert(1) grayscale(1) contrast(2);
我已经在Codepen上安装了一个游乐场,但是还没有找到解决方案.
如何使用CSS和Javascript重新创建这种悬停效果？
14
推荐指数
推荐指数
2
解决办法
解决办法
1283
查看次数
查看次数
从两侧将两列文本环绕在图像/形状周围 html css
我正在尝试将文本环绕在两侧使用的图像上，如下所示：
这是html。
<div class="container">
<div class="row">
<div class="col-lg-4">
<p>
There’s nothing like the feeling of driving a brand new luxury car or fully equipped SUV – especially if it’s free! That’s right! As part of B-Epic’s Compensation Plan, one of the awesome ways we reward our Brand Partners is with a car payment bonus of $500 per month.
</p>
<p>
With our one-of-a-kind Car Bonus program, you only need to focus on one simple thing: Get 4 Brand …14
推荐指数
推荐指数
1
解决办法
解决办法
1542
查看次数
查看次数
CSS过渡自动宽度
我有一个元素,当它的内容发生变化时,它的宽度我想要动画.它有width: auto,而且永远不会改变.我已经看过这个技巧,但那是为了在两个值之间转换而设置一个.我根本不操纵值,只是内容,我希望我的元素大小随动画而改变.这在CSS中完全可能吗？
这是我的代码的简化版本:
.myspan {
background-color: #ddd;
}
.myspan:hover::after {
content: "\00a0\f12a";
font-family: Ionicons;
font-size: 80%;
}<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>
<html>
<body>
<span class="myspan">Hello!</span>
</body>
</html>当用户将鼠标悬停在元素上时,我希望将大小改变为动画.
13
推荐指数
推荐指数
2
解决办法
解决办法
2万
查看次数
查看次数
选择除一个元素之外的所有元素
我试图找到一种选择除一个特定元素之外的所有元素的方法。在这种情况下，它:not(selector)不起作用。
选择容器内除指定元素之一之外的所有元素的最佳方法是什么？
.container not:(.test2) {
color: red
}<div class='container'>
<p class='test'>test</p>
<p class='test'>test</p>
<p class='test'>test</p>
<p class='test'>test</p>
<p class='test2'>test 2</p>
</div>13
推荐指数
推荐指数
2
解决办法
解决办法
2万
查看次数
查看次数
如何在循环中使用随机值重新启动CSS动画？
我有一个元素,在CSS自定义属性的帮助下,用CSS和JS随机动画,方法如下:
var myElement = document.querySelector('#my-element');
function setProperty(number) {
myElement.style.setProperty('--animation-name', 'vibrate-' + number);
}
function changeAnimation() {
var number = Math.floor(Math.random() * 3) + 1;
setProperty(number);
/* restart the animation */
var clone = myElement.cloneNode(true);
myElement.parentNode.replaceChild(clone, myElement);
}
myElement.addEventListener('animationend', changeAnimation, false);#my-element {
width: 50px;
height: 50px;
background: #333;
}
:root {
--animation-name: vibrate-1;
}
#my-element {
animation: 3.3s 1 alternate var(--animation-name);
}
@keyframes vibrate-1 {
0% {
opacity: 0;
transform: scale(0.95);
}
50% {
opacity: 1;
transform: scale(1);
}
100% …13
推荐指数
推荐指数
2
解决办法
解决办法
792
查看次数
查看次数
在线性渐变上使用背景位置的百分比值
有没有办法background-position取出百分比值？目前我的按钮仅适用于一个明确的价值观width和background-position.
body {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.button {
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
color: white;
font-weight: bold;
width: 350px;
height: 50px;
border: 1px solid green;
transition: background 0.5s;
background-repeat: no-repeat;
background-image: linear-gradient(to left, #2484c6, #1995c8 51%, #00bbce), linear-gradient(to right, #2484c6 0%, #1995c8 51%, #00bbce 76%);
}
.button-pixel {
background-position: -350px 0px, 0px 0px;
}
.button-pixel:hover {
background-position: 0px 0px, 350px 0px;
}
.button-percentage …12
推荐指数
推荐指数
1
解决办法
解决办法
1634
查看次数
查看次数
标签 统计
css ×10
html ×6
css3 ×3
javascript ×3
css-shapes ×2
animation ×1
background ×1
loops ×1
random ×1