小编Aks*_*hay的帖子
如何用随机锯齿获得撕裂的纸张效果？
我试图制作撕碎的纸张效果,如下图所示:
底部撕裂的效果.我看到了这个并且能够产生撕裂的纸张效果,如下所示
.box {
width: 300px;
height: 150px;
background: darkred;
position: relative;
display: inline-block;
}
.box:after {
position: absolute;
content: "";
width: 15px;
height: 15px;
transform: rotate(45deg);
transform-origin: 0% 100%;
background: darkred;
left: 0;
bottom: 0;
box-shadow: 15px -15px 0 0 darkred, 30px -30px 0 0 darkred, 45px -45px 0 0 darkred, 60px -60px 0 0 darkred, 75px -75px 0 0 darkred, 90px -90px 0 0 darkred, 105px -105px 0 0 darkred, 120px -120px 0 0 darkred, 135px …44
推荐指数
推荐指数
3
解决办法
解决办法
6323
查看次数
查看次数
如何创建切出的六边形？
如何使用CSS创建切出的六边形？
通过切出六边形形状我的意思是这样的:
我能够创建一个带背景图像的六边形,但我需要它像图像中一样.
.hexagon {
position: relative;
width: 300px;
height: 173.21px;
margin: 86.60px 0;
background-image: url('https://placeimg.com/300/400/any');
background-size: auto 346.4102px;
background-position: center;
}
.hexTop,
.hexBottom {
position: absolute;
z-index: 1;
width: 212.13px;
height: 212.13px;
overflow: hidden;
-webkit-transform: scaleY(0.5774) rotate(-45deg);
-ms-transform: scaleY(0.5774) rotate(-45deg);
transform: scaleY(0.5774) rotate(-45deg);
background: inherit;
left: 43.93px;
}
/* Counter transform the background image on the caps */
.hexTop:after,
.hexBottom:after {
content: "";
position: absolute;
width: 300.0000px;
height: 173.20508075688775px;
-webkit-transform: rotate(45deg) scaleY(1.7321) translateY(-86.6025px);
-ms-transform: rotate(45deg) scaleY(1.7321) translateY(-86.6025px);
transform: rotate(45deg) …21
推荐指数
推荐指数
4
解决办法
解决办法
2636
查看次数
查看次数
如何在边框侧创建带有链接的圆圈
我想做一个像这样的圈子.我能够在小提琴中做到这一点,但问题是我需要每个橙色的一面是一个链接,我不能用边框做.如果有人能帮助我,我将非常感激.
#circle {
width: 200px;
height: 200px;
border-radius: 50%;
background: green;
}
#incircle {
width: 100px;
height: 100px;
border-radius: 50%;
border: 50px dotted orange;
}<div id="circle">
<div id="incircle"></div>
</div>16
推荐指数
推荐指数
3
解决办法
解决办法
2803
查看次数
查看次数
创建一个24个或更高点爆发的"新"尖刺标签
我试图像下面的图像做一个点爆炸的东西:
目前,我已经尝试使用伪元素,但是,我只能生成12点突发并且不能反映图像中显示的内容.
反正是否只用少量元素创建一个点爆发？
以下是我用来尝试此解决方案的代码:
div{
width:100px;
height:100px;
background:grey;
transform:rotate(45deg);
margin:50px;
}
div:after{
position:absolute;
content:"";
background:grey;
width:100px;
height:100px;
transform:rotate(135deg);
}
div:before{
position:absolute;
content:"";
background:grey;
width:100px;
height:100px;
transform:rotate(250deg);
}<div></div>15
推荐指数
推荐指数
4
解决办法
解决办法
1420
查看次数
查看次数
背景图像,线性渐变锯齿状边缘结果需要平滑边缘
我试图让图像的底部指向.我试图通过在底部生成两个三角形来获得此效果.他们必须有回应.并且在搜索了整个互联网之后,有很多例子对我的要求不起作用,这是迄今为止我设法制作的最好的例子.
body,
html {
height: 100%
}
.image {
width: 1410px;
margin-right: auto;
margin-left: auto;
height: 500px;
overflow: hidden;
position: relative;
}
.pointer {
height: 50px;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
.triangleWrapper {
width: 50%;
height: 50px;
float: left;
}
.lefttriangle {
width: 100%;
height: 10px;
left: 0px;
top: 0px;
background-image: linear-gradient(to right top, #ffffff 50%, transparent 50%);
}
.righttriangle {
width: 100%;
height: 10px;
right: 0px;
top: 0px;
background: linear-gradient(to left top, #ffffff 50%, transparent …11
推荐指数
推荐指数
2
解决办法
解决办法
6350
查看次数
查看次数
在svg中查找圈内的元素
我试图找到一个坐标之间的元素circle.在小提琴中 我有一个根据鼠标位置动画的圆圈我想要设置/选择所有来自大圆圈区域内的小圆圈
var s = Snap('svg')
for (var x = 10; x < 500; x = x + 30) {
for (var y = 10; y < 500; y = y + 30) {
var circle = s.circle(x, y, 5)
circle.attr({
fill: 'black' //'#8BFE03'
})
}
}
s.mousemove(function(e) {
$('.circle').attr({
cx: e.pageX,
cy: e.pageY
})
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>
<svg width="1500" height="1500" id="svg">
<circle class="circle" cx="0" cy='0' r='80' />
</svg>8
推荐指数
推荐指数
2
解决办法
解决办法
1007
查看次数
查看次数
在FireFox中高度100%折叠的内联块隐藏图像
我的CSS问题只在FireFox中可见(cur.ver.31).我正在尝试制作一个响应式布局,带有一排图像(带有链接),这些图像居中,并且具有与视口宽度相同的高度和比例.我的方法是创建一个具有固定宽高比的容器,并将图像放在里面(每个图像在一个单独的<a>标签内),居中,然后将它们的高度缩放到容器高度.它在FireFox中除外,效果很好.要做到这一点我申请display: inline-block; height: 100%到<a>标签和height: 100%; width: auto以<img>标签.对于某些(未知)原因,FF没有<a>正确计算标签的宽度(当它包含上述<img>标签时)并且它水平折叠.结果是,所有<a>具有0宽度的所有宽度彼此非常接近(仅由白色空间分开),并且图像彼此重叠.我display: block; float: left;在<a>标签上得到了相同的结果.
CSS
.container-ratio {
width: 100%;
height: 0;
position: relative;
padding-bottom: 10%;
background: #ddd;
}
.container-inner {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #ddf;
text-align: center;
}
.block {
display: inline-block;
height: 100%;
background: #f00;
}
.block img {
height: 100%;
width: auto;
display: block;
} …7
推荐指数
推荐指数
1
解决办法
解决办法
1349
查看次数
查看次数
如何在画布上创造障碍
我试图制作一个像游戏一样简单的平台游戏.我使用的代码如下所示
window.onload = function(){
var canvas = document.getElementById('game');
var ctx = canvas.getContext("2d");
var rightKeyPress = false;
var leftKeyPress = false;
var upKeyPress = false;
var downKeyPress = false;
var playerX = canvas.width / 2;
var playerY = -50;
var dx = 3;
var dy = 3;
var dxp = 3;
var dyp = 3;
var dxn = 3;
var dyn = 3;
var prevDxp = dxp;
var prevDyp = dyp;
var prevDxn = dxn;
var prevDyn = dyn;
var playerWidth …7
推荐指数
推荐指数
1
解决办法
解决办法
2208
查看次数
查看次数
HTML/CSS:聚焦一个段落
当我点击它时,我想分别关注每个"p"标签,就像输入上的CSS"焦点:"一样.问题是选择器"焦点"不适用于段落,这是一个例子:
HTML
<div id="myDiv">
<p>Some Content 1</p>
<p>Some Content 2</p>
<p>Some Content 3</p>
<p>Some Content 4</p>
</div>
CSS
#myDiv p:focus {background-color:red;}
如何找到替代解决方案才能使其正常工作？
6
推荐指数
推荐指数
1
解决办法
解决办法
3736
查看次数
查看次数
5
推荐指数
推荐指数
1
解决办法
解决办法
9711
查看次数
查看次数
标签 统计
css ×9
html ×8
css-shapes ×6
css3 ×5
svg ×5
jquery ×3
javascript ×2
aspect-ratio ×1
canvas ×1
firefox ×1
width ×1