简单CSS3动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        body{
            font-size:12px;
            margin:0;padding:0;
        }
        #box{
            width:300px;
            height: 300px;
            margin:100px auto;
            border:1px solid #ccc;
            transition: all 0.3s;
            -webkit-transition: all 0.3s;
        }
        .inner-box{
            width:60px;
            height: 30px;
            margin:100px auto;
            border:1px solid #ccc;
            transition: all 0.3s;
            -webkit-transition: all 0.3s;
        }

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
from{transform:rotate(0deg);}
to {transform:rotate(360deg);}
}

        #box:hover{
            border-radius: 50%;
            background:#007aff;
            box-shadow: 5px 10px 10px rgba(0,0,0,.3);

            -webkit-animation: myfirst 3s;
            -webkit-animation-iteration-count:3;
            -webkit-animation-direction:alternate;

        }
    </style>
</head>

<body>
    <div id="box">
        <div class="inner-box"></div>
        <div class="inner-box"></div>
    </div>
</body>
</html>

时间： 2024-11-04 14:55:26

简单CSS3动画的相关文章

代码：一个简单css3动画效果demo

四行文字会逐次掉落: <style type="text/css"> @-webkit-keyframes fadeInDown1 { 0% { -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); opacity: 0; } 100% { -webkit-transform: none; transform: none; opacity: 1; } } .div1

css3 简单界面动画

asdasdasdasda asdasdasdasdacss3 简单界面动画,布布扣,bubuko.com

css3动画简单案例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3 动画</title> <style> body { margin: 0; padding: 0; background-color: #F7F7F7; } .box { width: 400px; margin: 100px auto;

css3动画详解

一.Keyframes介绍: Keyframes被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主要以"@keyframes"开头,后面紧跟着是动画名称加上一对花括号"{-}",括号中就是一些不同时间段样式规则. @keyframes changecolor{ 0%{ background: red; } 100%{ background: green; }} 示例:创建一个动画名叫"changecolor",在"0%&quo

css3动画由浅入深总结

回到顶部一:过渡动画---Transitions 一:过渡动画---Transitions 含义:在css3中,Transitions功能通过将元素的某个属性从一个属性值在指定的时间内平滑过渡到另一个属性值来实现动画功能. Transitions属性的使用方法如下所示: transition: property | duration | timing-function | delay transition-property: 表示对那个属性进行平滑过渡. transition-duratio

CSS3动画：transition和animation（一）

1.浏览器支持情况 transform: transition: animation: 2.分别介绍他们的用法 transform 属性向元素应用 2D 或 3D 转换.该属性允许我们对元素进行旋转.缩放.移动或倾斜,即可以改变元素的形状. 语法为transform: none|transform-functions;具体的方法参见 W3CSchool上的CSS3 transform 属性介绍 transition 属性是一个简写属性,用于设置四个过渡属性: transition-propert

CSS3——动画效果

CSS3动画在Style里面就实现了以往我们用JQ写的动画效果,着实简便了不少~ 简单Demo: html代码: <div id="dv1"></div> CSS3代码: <style type="text/css"> #dv1{width:100px;height:100px;border:1px solid blue;-webkit-animation:myfirst 3s;position:relative;} @webki

关于JS动画和CSS3动画的性能差异

本文章为综合其它资料所得. 根据Google Developer,Chromium项目里,渲染线程分为main thread和compositor thread.如果CSS动画只是改变transforms和opacity,这时整个CSS动画得以在compositor thread完成(而JS动画则会在main thread执行,然后触发compositor进行下一步操作)在JS执行一些昂贵的任务时,main thread繁忙,CSS动画由于使用了compositor thread可以保持流畅,可

CSS3动画-抛物线

CSS3动画之抛物线今天来说下CSS3动画,目标是让一个方块做抛物线运动.主要用到的CSS3属性有animation,transform,@keyframes,transition等. Animation版-0 我们先建立一个HTML文件,test.html: <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="an