我想E在单词中反映字母,WEBLOG所以我使用了CSS转换属性,但是如果我将文本包装在一个span中,它就不起作用但是如果我在分配display: inline-block;或display: block;
所以变换不适用于内联元素？
示例1(无法转换)
<h1>W<span>E</span>BLOG</h1>
h1 span {
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-moz-transform:rotate(7deg); /* Firefox */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
-o-transform:rotate(7deg); /* Opera */
}
示例2(Works,如果使用display: blockORdisplay: inline-block)
是否有使用nth-childCSS属性内部值的"纯CSS"方式(而不是Less/Sass)？像这样的东西:
span.anim:nth-child(N) { animation-delay: N * 0.5s; }
如果有,我该怎么办？如果没有,我怎么能以干净的方式模仿它？(我确定我在这里过于复杂了)
我正在创建一个简单的动画,其中字母在旋转时淡入.为此,我使用了javascript(与jQuery)和CSS的组合,但这产生了一些问题(见下文); 所以我试图转向仅限CSS的解决方案,并以大量规则结束.
这个(简化的)CSS对于两种解决方案都是通用的:
span.anim {
font-size:30px;
opacity:0;
animation: anim 1s;
animation-fill-mode: forwards;
}
@keyframes anim {
from {
transform: rotate(0deg);
opacity:0;
}
to {
transform: rotate(360deg);
opacity:1;
}
}
使用JavaScript + CSS
我的JavaScript代码如下所示:
var aux = $("#animate").text();
$("#animate").text("");
for (var x = 0; x < aux.length; x++) {
setTimeout('$("#animate").append("<span class=\'anim\'>' + aux[x] + '</span>")', 500 * x);
}
这很有效......除非用户移动到另一个选项卡,否则动画会混乱,结果是意外的.你可以在这个JSFiddle上看到它:http://jsfiddle.net/e7b9ygk4/(运行脚本,移动到另一个选项卡,几秒钟后返回).
仅使用CSS
我可以通过破坏较小元素中的元素来实现相同的效果(这是我觉得我过于复杂的部分),然后将动画应用于具有不同延迟的每个元素:
span.anim:nth-child(1) …我正在应用这个css类:
.turn90{
-moz-transform: rotate(90deg); /* FF3.5+ */
-o-transform: rotate(90deg); /* Opera 10.5 */
-webkit-transform: rotate(90deg); /* Saf3.1+, Chrome */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)"; /* IE8 */
}
通过:
document.getElementById("advancedsearchtoggle").className += " turn90";
它适用于Firefox和Opera,但不适用于Safari或Chrome.(还没试过IE)
我究竟做错了什么？
完整的JavaScript功能:
var expanded=0;
function searchparts(n)
{
if(expanded == 0){
document.getElementById('search2').style.visibility = 'visible';
document.getElementById('search3').style.visibility = 'visible';
document.getElementById('search2').style.display = 'block';
document.getElementById('search3').style.display = 'block';
//window.scrollTo(0,findPos(document.getElementById('search'+n))-60);
document.getElementById("advancedsearchtoggle").className += " turn90";
document.getElementById('advancedsearchtoggle').style['-webkit-transform'] = 'rotate(90deg)';
expanded = 1;
}else if(expanded == 1){
document.getElementById('search2').style.visibility = 'collapse';
document.getElementById('search3').style.visibility = 'collapse';
document.getElementById('search2').style.display …我正在制作一个网站，我希望它完全响应移动设备。我以为我已经通过标题实现了这一目标，直到我用 ipad 看到它。“转换：translateX(-100%);” 声明适用于除 IOS 设备之外的所有设备，我在 Android 手机上尝试过它，效果非常好。我尝试了很多方法，包括使用像 -webkit- 这样的前缀和使用“！important”声明。我一直在网上搜索，但找不到任何可以解决我的问题的东西。这是代码。
超文本标记语言
<!DOCTYPE html>
<h<html lang="en">
<head>
<title>Home</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Alegreya+Sans' rel='stylesheet' type='text/css'>
<script src="http://timthumb.googlecode.com/svn/trunk/timthumb.php"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<script src="js/header.js"></script>
</head>
<body>
<div class="header">
<div class="container">
<div class="logo">
</div>
<div class="wrapper">
<div class="menu-icon">
<div class="line first"></div>
<div class="line second"></div>
<div class="line third"></div>
</div>
<div class="nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="http://4para.net/forums">Forums</a></li>
<li><a href="about-us.html">About Us</a></li>
<li><a href="role-finder.html">Role Finder</a></li>
<li><a …