用CSS3编写:div旋转90度 0.5秒后变圆 0.5秒后放大2倍
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了用CSS3编写:div旋转90度 0.5秒后变圆 0.5秒后放大2倍相关的知识,希望对你有一定的参考价值。
有一个相同的问题可是没有给正确答案 求大神列出代码指导
参考技术A <!DOCTYPE><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
body
padding:0;
margin:0;
width:100%;
height:100%;
.demo
width:100px;
height:100px;
background:#ff6600;
margin:100px auto;
transition:transform 0.5s, border-radius 1s, height 2.5s, width 2.5s;
-moz-transition:-moz-transform 0.5s, border-radius 1s, height 2.5s, width 2.5s ; /* Firefox 4 */
-webkit-transition:-webkit-transform 0.5s,border-radius 1s, height 2.5s, width 2.5s; /* Safari and Chrome */
-o-transition:-o-transform 0.5s, border-radius 1s, height 2.5s, width 2.5s; /* Opera */
div.demo:hover
width:200px;
height:200px;
border-radius:200px;
-moz-border-radius:200px;
-webkit-border-radius:200px;
transform:rotate(90deg);
-webkit-transform: rotate(90deg);/*Safari 4+,Google Chrome 1+ */
-moz-transform: rotate(90deg);/*Firefox 3.5+*/
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);/*ie*/
div.demo2
width:100px;
height:100px;
margin:200px auto;
background:red;
animation:myfirst 2s linear 2s infinite alternate;;
-moz-animation:myfirst 2s linear 2s infinite alternate;; /* Firefox */
-webkit-animation:myfirst 2s linear 2s infinite alternate;; /* Safari and Chrome */
-o-animation:myfirst 2s linear 2s infinite alternate;; /* Opera */
@keyframes myfirst
0% background:red;
50%
transform:rotate(90deg);
-webkit-transform: rotate(90deg);/*Safari 4+,Google Chrome 1+ */
-moz-transform: rotate(90deg);/*Firefox 3.5+*/
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);/*ie*/
75%
border-radius:100px;
-moz-border-radius:100px;
-webkit-border-radius:100px;
100%
width:200px;
height:200px;
border-radius:200px;
-moz-border-radius:200px;
-webkit-border-radius:200px;
@-moz-keyframes myfirst /* Firefox */
0% background:red;
50%
transform:rotate(90deg);
-webkit-transform: rotate(90deg);/*Safari 4+,Google Chrome 1+ */
-moz-transform: rotate(90deg);/*Firefox 3.5+*/
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);/*ie*/
75%
border-radius:100px;
-moz-border-radius:100px;
-webkit-border-radius:100px;
100%
width:200px;
height:200px;
border-radius:200px;
-moz-border-radius:200px;
-webkit-border-radius:200px;
@-webkit-keyframes myfirst /* Safari and Chrome */
0% background:red;
50%
transform:rotate(90deg);
-webkit-transform: rotate(90deg);/*Safari 4+,Google Chrome 1+ */
-moz-transform: rotate(90deg);/*Firefox 3.5+*/
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);/*ie*/
75%
border-radius:100px;
-moz-border-radius:100px;
-webkit-border-radius:100px;
100%
width:200px;
height:200px;
border-radius:200px;
-moz-border-radius:200px;
-webkit-border-radius:200px;
@-o-keyframes myfirst /* Opera */
0% background:red;
50%
transform:rotate(90deg);
-webkit-transform: rotate(90deg);/*Safari 4+,Google Chrome 1+ */
-moz-transform: rotate(90deg);/*Firefox 3.5+*/
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);/*ie*/
75%
border-radius:100px;
-moz-border-radius:100px;
-webkit-border-radius:100px;
100%
width:200px;
height:200px;
border-radius:200px;
-moz-border-radius:200px;
-webkit-border-radius:200px;
</style>
</head>
<body>
<div class="demo"></div>
<div class="demo2"></div>
</body>
</html>
用了css3两种效果一种过渡demo 一种动画demo2本回答被提问者和网友采纳
jquery css在每次按下按钮时连续旋转90度
【中文标题】jquery css在每次按下按钮时连续旋转90度【英文标题】:jquery css continous rotate by 90 degrees on each button press 【发布时间】:2014-07-11 02:45:54 【问题描述】:我找到了部分满足我需求的解决方案。当按下一个按钮时,我需要一个 div 旋转 90 度,然后再按下 90 度等。我需要另一个按钮,它会以相同的方式以相反的方向旋转它。我找到了一个 JavaScript Fiddle 并对其稍作修改,但问题是按下按钮时,div 会在每次旋转之前恢复到原来的位置。所以它不可能旋转超过 90 度。我该如何解决?第二个问题是,如果我将 broderSpacing 从“-90”更改为“90”,为什么它只会旋转一次(按钮只能工作一次,然后点击时什么也没有发生)?
JSFIddle
HTML
<div id="foo">Text</div>
<button onclick="rotateFoo()">rotate</button>
CSS
#foo
width:100px;
height:100px;
position:absolute;
top:100px;
left:100px;
border-spacing: 0;
background-color:red;
JS
function rotateFoo()
$('#foo').animate(borderSpacing: -90,
step: function(now,fx)
$(this).css('-webkit-transform','rotate('+now+'deg)');
$(this).css('-moz-transform','rotate('+now+'deg)');
$(this).css('transform','rotate('+now+'deg)');
,
duration:'slow'
,'linear')
【问题讨论】:
您的“now
”值从何而来?您需要一种存储元素的新位置(多个元素的数组)的方法,“现在”可以添加到当前位置(或在您实现其他 buttkn 时减去)
有趣的是我无法弄清楚“现在”的来源。我以linkJSFIDDLE 为基础。
【参考方案1】:
你可以稍微改变一下,让它成为你想要的东西:
DEMO
var rotate=0;
function rotateFoo()
$('#foo').animate(borderSpacing: -90,
step: function(now,fx)
rotate+=2.1;
$(this).css('-webkit-transform','rotate('+rotate+'deg)');
$(this).css('-moz-transform','rotate('+rotate+'deg)');
$(this).css('transform','rotate('+rotate+'deg)');
,
duration:'slow'
,'linear')
function rotateFoo2()
$('#foo').animate(borderSpacing: -90,
step: function(now,fx)
rotate-=2.1;
$(this).css('-webkit-transform','rotate('+rotate+'deg)');
$(this).css('-moz-transform','rotate('+rotate+'deg)');
$(this).css('transform','rotate('+rotate+'deg)');
,
duration:'slow'
,'linear')
和 HTML:
<div id="foo">Text</div>
<button onclick="rotateFoo()">rotate</button>
<button onclick="rotateFoo2()">rotate</button>
请看DEMOJSFIDDLE
你也可以使用这个js库Transit
【讨论】:
请测试一些数字或添加一些条件来修复它。让我现在修复它。【参考方案2】:我做了一个简单一点的例子,请看https://jsfiddle.net/HwTMb/1517/
function rotateFoo()
var angle = ($('#foo').data('angle') + 90) || 90;
$('#foo').css('transform': 'rotate(' + angle + 'deg)');
$('#foo').data('angle', angle);
另外,我不确定你为什么需要边框间距。
【讨论】:
【参考方案3】:Anton 的回答是一个好的开始,但对于希望在两个方向上旋转的人来说,它需要一些工作。这是一个演示:https://jsfiddle.net/hyrLcw0f/
function rotateLeft()
var angle = ($('#foo').data('angle')) || 0;
angle -= 90;
$('#foo').css('transform': 'rotate(' + angle + 'deg)');
$('#foo').data('angle', angle);
function rotateRight()
var angle = ($('#foo').data('angle')) || 0;
angle += 90;
$('#foo').css('transform': 'rotate(' + angle + 'deg)');
$('#foo').data('angle', angle);
【讨论】:
以上是关于用CSS3编写:div旋转90度 0.5秒后变圆 0.5秒后放大2倍的主要内容,如果未能解决你的问题,请参考以下文章