Css3 - 动画旋转
旋转1:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
#box
{
background:red;
color:#fff;
width:100px;
height:100px;
}
#box:hover{
transform: rotateY(360deg);
transition: .5s all;
-webkit-transition: .5s all;
-moz-transition: .5s all;
-o-transition: .5s all;
-ms-transition: .5s all; transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out; /* Firefox 4 */
-webkit-transition-timing-function: ease-out; /* Safari 和 Chrome */
-o-transition-timing-function: ease-out; /* Opera */
}
</style>
<body>
<div id="box">Lee</div>
</body>
</html>
旋转2
神坑:必须当图标的(字体)大小与div一致时,才会原地旋转,过大或者过小都会异常旋转
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.close {
height:auto;
width:auto;
position: absolute;
transition: .8s ease all;
-moz-transition: .8s ease all;
-webkit-transition: .8s ease all;
} .rotate:hover {
transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);} </style>
</head>
<body>
<div class="close rotate">
<!-- 必须当图标的(字体)大小与div一致时(或者DIV的宽高为auto时),才会原地旋转,过大或者过小都会异常旋转 -->
<span style="font-size:2rem">×</span>
</div>
</body>
</html>
旋转2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.rotate_default {
height:auto;
width:auto;
position: absolute;
transition: .8s ease all;
-moz-transition: .8s ease all;
-webkit-transition: .8s ease all;
}
/*
.rotate:hover {
transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}*/ </style>
</head>
<body>
<div class="rotate_default rotate">
<!-- 必须当图标的(字体)大小与div一致时(或者DIV的宽高为auto时),才会原地旋转,过大或者过小都会异常旋转 -->
<span style="font-size:2rem">×</span>
</div>
<script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function(){
var cir = Math.floor(Math.random()*5) + 1;
var rotate = "rotate(" + cir * 180 + "deg)";
console.log(rotate);
$(".rotate").css("transform",rotate);
})
</script>
</body>
</html>
通过jquery旋转
Css3 - 动画旋转的更多相关文章
- CSS3动画旋转——(图片360°旋转)
今天在重构网页特效的时候,想着用到一个css3的旋转特效.简单来一个demo. html <div class="box"> <img src="./y ...
- css3制作旋转动画
现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片 思路:1.制作之前呢,我们先来 ...
- 用css3制作旋转加载动画的几种方法
以WebKit为核心的浏览器,例如Safari和Chrome,对html5有着很好的支持,在移动平台中这两个浏览器对应的就是IOS和Android.最近在开发一个移动平台的web app,那么就有机会 ...
- 鼠标HOVER时区块动画旋转变色的CSS3样式掩码
鼠标hover时区块动画旋转变色的css3样式掩码<!DOCTYPE html> <html> <head> <meta charset="utf- ...
- css3动画使用技巧之—border旋转时的应用。
<html> <head> <title>css3动画border旋转时的应用.</title> <meta charset="UTF- ...
- css3动画应用-音乐唱片旋转播放特效
css3动画应用-音乐唱片旋转播放特效 核心点: 1.设置图片为圆形居中,使图片一直不停旋转. 2.文字标题(潘玮柏--反转地球)一直从左到右不停循环移动. 3.点击图标,音乐暂停,图片停止旋转:点击 ...
- CSS3动画制作
CSS3动画制作 rotate 绕中心旋转 fadeInPendingFadeOutUp 先渐现,停留2s,再向上滑动并逐渐消失 fadeInUp2D 向上滑动并渐现, 因Animate.css的fa ...
- 用CSS3动画,让页面动起来
以前就听说过有个库,叫animate.css,但是自己并没有在实际项目中使用过,这次正好要做个招聘页面,得以利用一下这个库,在经常会卡顿的UC浏览器中也能流畅执行. 扫描下面的二维码,可以看到在线的d ...
- 用CSS3动画特效实现弹窗效果
提示:如果大家觉得本篇实现的弹窗效果有用,可持续关注.接下会添加更多效果并且封装成插件,这样使用就方便了.效果查看: https://heavis.github.io/hidialog/index.h ...
随机推荐
- 【JAVA、C++】 LeetCode 008 String to Integer (atoi)
Implement atoi to convert a string to an integer. Hint: Carefully consider all possible input cases. ...
- 【python】lamda表达式,map
一个很好的博客:http://blog.csdn.net/mathboylinlin/article/details/9413551 博客不让转载,我只摘抄了里面几个例子,更多内容到博客里去看 lam ...
- [Android Pro] Android Support 包里究竟有什么
reference to : http://www.2cto.com/kf/201411/350928.html 随着 Android 5.0 Lollipop 的发布,Android 又为我们提供了 ...
- July 18th, Week 30th Monday, 2016
Truth needs no color; beauty, no pencil. 真理不需要色彩,美丽无需涂饰. Most of the time, giving some color to trut ...
- input框颜色修该
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- linux rdsktop 运程管理 windows
[root@ok ISO]# yum list |grep rdesktop rdesktop.x86_64 1.7.1-1.el6 base [root@ok ISO]# yum install r ...
- Javascript模块化编程之路——(require.js)
转自:http://www.ruanyifeng.com/blog/2012/10/javascript_module.html Javascript模块化编程(一):模块的写法 随着网站逐渐变成&q ...
- jquery学习笔记---插件开发模式和结构
JQuery插件开发http://www.cnblogs.com/damonlan/archive/2012/04/06/2434460.html github教程:https://github.co ...
- java基础知识回顾之java Thread类学习(十二)-- 线程中断
官方文档翻译: 如果本线程是处于阻塞状态:调用线程的wait(), wait(long)或wait(long, int)会让它进入等待(阻塞)状态,或者调用线程的join(), join(long), ...
- NGITOSS
https://sourceforge.net/projects/ngnms/files/?source=navbar http://stackoverflow.com/questions/17511 ...