单击使用纯CSS的CSS3过渡
我正在尝试将图像（加号）旋转45度以创建十字符号。到目前为止，我已经设法使用下面的代码实现了这一点，但是它可以在悬停状态下工作，我想让它在点击时旋转。
是否有 使用CSS 的简单方法？
我的代码是：
CSS
img {
display: block;
margin: 20px;
}
.crossRotate {
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
transition-duration: 1s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
}
.crossRotate:hover {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
HTML
<body>
<img class="crossRotate" src="images/cross.png" alt="Cross Menu button" />
</body>
问题答案：
如果您只想使用CSS解决方案，可以使用active
.crossRotate:active {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
}
但是，当活动移动时，转换将不会持续。为此，您需要javascript（jqueryclick和css是最干净的IMO）。
$( ".crossRotate" ).click(function() {
if ( $( this ).css( "transform" ) == 'none' ){
$(this).css("transform","rotate(45deg)");
} else {
$(this).css("transform","" );
}
});
-
问题内容： 我有一个菜单和三个隐藏的div，这些div取决于用户选择的选项。我只想使用CSS来显示/隐藏它们。我现在正在使用jquery，但我希望禁用js即可访问它。此处有人为其他人提供了此代码，但仅在div：hover或div：active时有效，当我将其更改为div：visited时它不起作用。我是否需要添加某些内容，或者这不是正确的方法？感谢您的帮助:) 问题是我的客户希望菜单被选中时此di
-
问题内容： 我使用纯CSS创建了一个下拉菜单，并且将其放到我喜欢的地方，但我希望它是“下拉”而不是“下拉”，因为菜单栏位于菜单的底部。布局。我需要添加或更改以使其成为“下拉菜单”吗？ 问题答案： 添加到您的规则 还是要防止子菜单具有相同的效果，只需添加此规则 演示2 为了获得边框，您可以添加以下属性
-
问题内容： 以前，我没有对多级纯CSS下拉菜单进行过很多工作，但是现在我正在寻找最干净的方法。当我搜索了这个网上我发现了很多那名4-5岁的解决方案，我不知道是否有更好的方法来实现这一目标，而不是做一些这样的。 问题答案： .third-level-menu 我还整理了一个现场演示，可在此处使用
-
.animated_div { width:60px; height:40px; background:#92B901; color:#ffffff; position:absolute; font-weight:bold; font-size:15px; padding:10px; float:left; margin:5px; -webkit-transition:-webkit-transf
-
本文向大家介绍纯css下拉菜单 无需js，包括了纯css下拉菜单 无需js的使用技巧和注意事项，需要的朋友参考一下 再来个今天某人说过的例子：纯css下拉菜单： 效果图 这个的实现很简单，主要是:hover和过渡属性transition的使用。 代码： 因为ul是个伸缩对象，所以要让它脱离文档流，不是在实用时会影响到布局，给它一个绝对定位即可。 以上就是本文的全部内容，希望对大家的学习有所帮助，也