我正在尝试使用×× HTML字符作为对话框链接上的关闭图标
.close:before {
content: "\0274c";
display: block;
text-align: center;
vertical-align: middle;
}
Firefox使用上面的示例并使用
content: "\274c";
Chrome也不会接受,只是给我一个缺少角色的方块.我使用Arial作为字体.我需要做些什么才能使这个跨浏览器兼容？
我有以下一点LESS代码工作
@iterations: 940;
@iterations: 940;
@col:2.0833333333333333333333333333333%;
// helper class, will never show up in resulting css
// will be called as long the index is above 0
.loopingClass (@index) when (@index > -20) {
// create the actual css selector, example will result in
// .myclass_30, .myclass_28, .... , .myclass_1
(~".gs@{index}") {
// your resulting css
width: (@index/20+1)*@col;
}
// next iteration
.loopingClass(@index - 60);
}
// end the loop when index is 0
.loopingClass (-20) {}
// "call" the …我正在玩Scrollmagic,想在这里使用效果:http://scrollmagic.io/examples/advanced/svg_drawing.html
我创建了一个squiggle svg来测试它,需要将路径的长度插入到stroke-dasharray:2000px; stroke-dashoffset:2000px;
如何找到路径的长度？
function pathPrepare ($el) {
var lineLength = $el[0].getTotalLength();
$el.css("stroke-dasharray", lineLength);
$el.css("stroke-dashoffset", lineLength);
}
var $word = $("path#word");
var $dot = $("path#dot");
// prepare SVG
pathPrepare($word);
// init controller
var controller = new ScrollMagic.Controller();
// build tween
var tween = new TimelineMax()
.add(TweenMax.to($word, 0.9, {strokeDashoffset: 0, ease:Linear.easeNone})) // draw word for 0.9
.add(TweenMax.to("path", 1, {stroke: "#33629c", ease:Linear.easeNone}), 0); // change color during the whole thing
// build scene
var scene = new ScrollMagic.Scene({triggerElement: "#trigger1", …我正在尝试制作气球飞行的动画。在所有现代浏览器中，IE11都是如此。
我正在使用translateX和translateY没问题，但是缩放导致图像变得模糊。
@media (min-width: 1100px) {
.balloon-outer,
.balloon-inner,
.balloon {
height: 100%;
position: absolute;
width: 100%;
bottom: 0;
right: 0;
animation-duration: 60s;
animation-delay: 0;
animation-iteration-count: infinite;
animation-direction: normal;
will-change: transform;
pointer-events: none;
}
.balloon-outer {overflow-y: hidden;
transform-origin: 50% 50%;
animation-name: travel-x;
animation-timing-function: ease-in;
transform: translateX(-20%);
}
.balloon {
transform-origin: 50% 50%;
animation-name: travel-y;
animation-timing-function: ease-out;
transform: translateY(90%);
}
.balloon-inner {background:url("https://www.inty.com/wp-content/uploads/balloon.png") no-repeat scroll 100% 100% / auto 40%;
transform-origin: 100% 100%;
animation-name: scale;
animation-timing-function: linear;
transform: scale(3);
}
}
@keyframes scale …css animation css-transforms css-animations internet-explorer-11
我想使容器中的每个元素具有从数组中随机选择的不同背景色。如何让脚本针对每个新元素分别运行？
$(document).ready(function(){
var colors = ["#ff0000","#ff00ff","#00ff00"];
var rand = Math.floor(Math.random()*colors.length);
$('.resource-cards > div').css("background-color", colors[rand]);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="resource-cards">
<div>some text</div>
<div>some text</div>
<div>some text</div>
<div>some text</div>
<div>some text</div>
<div>some text</div>
</div>