我花了很多时间创建这个非常酷的Logo动画我们的网站!我制作的徽标动画与徽标图像的大小相同,我可以轻松地将它应用到网站上.

问题是我的网站上的徽标设置为一旦屏幕宽度达到某个点就开始缩小.它设置为最大宽度,但也设置为缩放到其父div的大小.我的动画没有这样做......我意识到在将我的徽标动画应用到我的网站之前我需要弄清楚这一点.因为它不会以同样的方式行事......而且我真的不会使用css缩放和媒体查询,因为那将是一团糟.

在这里我的动画.

// Create an array to store our particles
var particles = [];

// The amount of particles to render
var particleCount = 10;

// The maximum velocity in each direction
var maxVelocity = 3;

// The target frames per second (how often do we want to update / redraw the scene)
var targetFPS = 33;

// Set the dimensions of the canvas as variables so they can be used.
var canvasWidth = 400;
var canvasHeight = …

所以我发现了这个令人惊奇的codepen动画,它通过<text>标签使用(GSAP我想)为任何文本提供"水填充"效果.

Codepen截图如下 点击此处获取CODEPEN

我的问题:我如何使用.PNG图像而不是HTML文本来实现相同的结果？

例如

而不是当前的代码: <text id="text" transform="matrix(1 0 0 1 -8.0684 116.7852)" font-family="'Cabin Condensed'" font-size="161.047">LOADING</text>

我当时希望做更多的事情

<img src="LOADING.png" id="text" transform="matrix(1 0 0 1 -8.0684 116.7852)" width="569" height="186">

加载.PNG IMG的示例可以使用:( 与<img>上面的代码片段相同的尺寸)

谢谢你的帮助!不是最好的这个东西,并希望使用效果!

如果效果更好,这是上面发布的png文件的SVG:imgh.us/loadingpng.svg

JS FIDDLE

我有2个动画元素.一个是简单的旋转脚本,它像硬币一样旋转徽标的中间部分. 

另一个动画是在中间部分翻转时看到的徽标背后的粒子画布烟雾动画.

我遇到的问题是画布烟雾动画改变了它的位置,硬币翻转动画落后于烟幕画面动画隐藏自身或其自身的一部分,就像翻转动画开始时几乎其z-index位置的变化...

这只发生在Iphone和苹果设备上.但在Android和桌面上工作正常.如果你删除画布,翻转动画效果很好而没有问题.但是如果画布在那里它会在翻转动画开始时掩盖翻转动画. 

我不能使用我的动画,直到我弄明白这一点.这让我很伤心.大声笑

任何帮助深表感谢!看看我的完整JS FIDDLE

如何在这个8点星外面添加红色边框？或者有没有人知道的简单的svg解决方案？

IS: 需要:

JS小提琴

HTML

<div id="star8"></div>

CSS

#star8 {
 border: 3px solid red;
 background: blue; width: 80px;
 height: 80px;
 position: relative;
 -webkit-transform: rotate(20deg);
 -moz-transform: rotate(20deg);
 -ms-transform: rotate(20deg);
 -o-transform: rotate(20eg);
 }
#star8:before {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 height: 80px;
 width: 80px;
 background: blue;
 -webkit-transform: rotate(135deg);
 -moz-transform: rotate(135deg);
 -ms-transform: rotate(135deg);
 -o-transform: rotate(135deg);
 }

我试图把这个css八角形,并给它一个坚实的红色边框.但是,当我添加边框时,它只适用于形状的一部分.有人有解决方案吗？

这是一个JS FIDDLE

HTML

<div class='octagonWrap'>
      <div class='octagon'></div>
  </div>

CSS

.octagonWrap{
        width:200px;
        height:200px;
        float: left;
        position: relative;
        }
    .octagon{
        position: absolute;
        top: 0; right: 0; bottom: 0; left: 0;
        overflow: hidden;
        }
    .octagon:before {
        position: absolute;
        top: 0; right: 0; bottom: 0; left: 0;
        transform: rotate(45deg);
        background: #777;
        content: '';
        border: 3px solid red;
        }

我试图<h1>通过jquery 更改元素中的文本.
我很亲密!由于某种原因,它需要2次点击才能切换文本.知道如何解决这个问题吗？

DEMO

HTML

<center> 
<div class="contentTab"> 
<div class="triangle-up"></div>
<h1>CLOSE TOP HEADER</h1>
</div>
</center>

CSS

.contentTab{
    width:300px;
    height:49px;
    background:#f1efef;
    border-top-right-radius:12px;
    border-top-left-radius:12px;
    position:absolute;
    margin-left:50%;
    left:-150px;
    margin-top:23px;
    cursor:pointer;
        }
.contentTab h1{
    color:#a9a9a9;
    text-shadow: 1px 1px #fcfcfc;
    font-size:12px;
    margin-top:3px;
    font-weight:bold;
        }

.triangle-up {
    width: 7px;
    height: 0;    
    padding-left: 7px;
    padding-bottom: 7px;
    overflow: hidden;
    margin-top:8px;
    }
.triangle-up:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    margin-left:-500px;
    border-left: 500px solid transparent;
    border-right: 500px solid transparent;
    border-bottom: 500px solid #b0b0b0;
    }

.triangle-down …

我做了一个SVG蒙版动画.我遇到的问题是SVG的边缘是"锯齿状的"当动画进来时我可以在面具周围看到一个轻微的黑色边缘.(它非常轻微.我看到动画GIF具有更好的质量.使用SVG我想的它会更干净).

寻找更柔软边缘的解决方案.如果这意味着我需要使用PNG蒙版或应用某种类型的滤镜效果？我很乐意为任何解决方案.

CODEPEN

<mask id="text-mask">
<use x="0" y="0" xlink:href="#text" opacity="1" fill="#fff"/>
</mask>

<use x="0" y="0" xlink:href="#text" fill="#0d0d0d"/>

<rect class="water-fill" mask="url(#text-mask)" fill="url(#water)" x="-400"     y="0" width="6000" height="650"/>

我知道这是错的,但我想模拟我想要完成的事情.

我如何制作它以使<li>特定内容<ul class="myul">中的每个元素具有相同的mousedown/mouseout/hover/etc效果,但是单独而不是一次全部.

目前,如果您悬停或点击其中一个<li>,则会对所有人产生影响.我不想要个人身份证,因为<li>'s不会手动更新 - 而且数字总是会有所不同.

 $(".deleteIcon").mouseover(function(){
     $(".deleteIcon").closest('li').css("opacity", "0.7");
 });

 $(".deleteIcon").mouseout(function(){
     $(".deleteIcon").closest('li').css("opacity", "1");
     $(".deleteIcon").closest('li').css("background-color", "#89b8d7");
 });

 $(".deleteIcon").mousedown(function(){
     $(".deleteIcon").closest('li').css("background-color", "#76101c");
 });

 $(".deleteIcon").mouseup(function(){
     $(".deleteIcon").closest('li').css("background-color", "#89b8d7");
 });

<ul>
<li><span>example1.pdf</span><div class="deleteIcon"></div></li>
<li><span>example1.pdf</span><div class="deleteIcon"></div></li> 
<li><span>example1.pdf</span><div class="deleteIcon"></div></li> 
<li><span>example1.pdf</span><div class="deleteIcon"></div></li> 

</ul>

我有这个漂亮的代码片段，它在我的文本末尾添加了“多读”和“少读”，允许可见文本扩展和收缩。

我试图为此添加一个动画..所以它会上下滑动，而不仅仅是即时变化..

我尝试在多个部分中添加.slidDown和.slideUp。但它要么不起作用，要么隐藏了整个内容。

我还尝试添加transition: all 0.5s ease;内容包装器，但这也没有创建过渡。

任何帮助深表感谢！

工作 JS 小提琴