css 旋转动画

<!DOCTYPE html>
<html>

<head>
    <title>rotate</title>
    <style type="text/css">
    * {
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
        border: none;
    }

    body {
        margin: 0;
        padding: 0;
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }

    .inner {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #FF00FF;
    }

    .inner img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
    }

    .out {
        width: 210px;
        height: 210px;
        border: 1px dashed red;
        border-radius: 50%;
        padding: 5px;
        animation: spin 6s linear infinite;
    }
    </style>
</head>

<body>
    <div class="out">
        <div class="inner">
            <img src="1.jpg">
        </div>
    </div>
</body>

</html>
时间: 2024-11-05 13:34:58

css 旋转动画的相关文章

关于css旋转动画

我们可以通过css来做出动画效果,下面我为大家演示的是div的旋转,颜色过渡的动画 <!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title></title> <style> a{ text-align:center; line-height:100px; transition:a

基于animation.css实现动画旋转特效

分享一款基于animation.css实现动画旋转特效.这是一款基于CSS3实现的酷炫的动画旋转特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="wrap"> <div class="mod_bg"> <div class="bg1"></div> <div class="bg2"></div> <

CSS3 skew倾斜、rotate旋转动画

css3出现之前.我们实现一个对象的一组连续动画须要通过JavaScript或Jquery编写,脚本代码较为复杂: 若须要实现倾斜.旋转之类的动画难度将更高(我还没试过用JavaScript或Jquery怎样实现),并且即使能实现预计花的时间代价及维护难度是非常大的,非常多时候仅仅能依靠绘图工具制作此类动画文件: 有时候在想假设不用脚本语言,也不用绘图工作制作动画文件.就能在网页上实现倾斜.旋转之类的动画效果多好. 近期挤出一些业余时间学习CSS3,当中就包括非常多动画演示样例,花了点时间学习和

拒绝IE8-,CSS3 transform rotate旋转动画效果(支持IE9+/chrome/firefox)

<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.jb51.net/" /> <title>拒绝IE8-,CSS3 transform rotate旋转动画效果(支持IE9+/chrome/firefox)</title> &l

如何使用JavaScript控制CSS Animations(动画)和Transitions(过渡)

Zach邮件跟我说,上Stack Overflow这类的论坛,他经常碰到一些关于JavaScript控制CSS 动画的问题,又提供给我几个例子.我很久就打算写一些关于这方面的文章,所以很高兴让Zach提出来并促使我写了这个教程. 有时候WEB开发人员认为CSS的动画比JavaScript的动画更难理解.虽然CSS动画有其局限性,但它的性能比大多数JavaScript库更加高效,因为它可以借助硬件加速啊!其效果绝对可以超出我们的预期. CSS animations和transitions再加上点J

css实现动画功能

在CSS中动画功能其实可以说是很强大的,在网页中加载速度很快,他的功能特效可以一千变万化,做不到只有想不到的,当然前提是你要掌握在CSS3上面的各种标签,今天带来了我在课程练习中的动画的3D动态旋转.代码如下:    <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

HTML5 CSS3 诱人的实例: 3D立方体旋转动画DEMO

创意来自:http://www.html5tricks.com/demo/html5-3d-cube/index.html , 同学给我发的例子,感觉很不错,不过实在想不出来实际的用处,但是效果很炫~ 效果图: 知识点: 1.perspective ,transform 的复习 2.css3 backgroud实现格格背景,即面上的小格格 3. @-webkit-keyframes 实现动画 HTML: <body> <div class="stage"> &l

利用css3制作旋转动画

利用css3功能强大,我们可以直接完成旋转动画的制作,而跳过复杂的javascript. html代码如下:demo01.html   <!DCTYPE html>       <head>           <meta type="utf-8"/>           <title>旋转动画</title>           <link rel="stylesheet" type="t

动画原理——指针随鼠标旋转动画

书籍名称:HTML5-Animation-with-JavaScript 书籍源码:https://github.com/lamberta/html5-animation 1.window.requestAnimationFrame 一般显示器的刷新频率为16.7ms,简单的使用setTimeout(fn,10)会导致在每第三次渲染的时候正好显示器在刷新,这次渲染就会丢失. requestAnimationFrame应用可与浏览器的绘制时间间隔保持完全一致,并且仅使用适量的资源,要实现持续的动画