动画效果，过渡效果

 1 <!doctype html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>网站首页</title>
 6     <style>
 7     .ttt{
 8         -webkit-animation:cc 15s ease-in 0 infinite alternate ;
 9         -ms-animation:cc 15s ease-in 0 infinite alternate ;
10     }
11     @-ms-keyframes cc{
12         0%{color:red;}
13         25%{color:green;}
14         50%{color:blue;}
15         75%{color:yellow;}
16         100%{color:purple;}
17     }
18
19
20     @-webkit-keyframes cc{
21         0%{color:red;}
22         25%{color:green;}
23         50%{color:blue;}
24         75%{color:yellow;}
25         100%{color:purple;}
26     }
27
28     @-webkit-keyframes aa{
29         from { color:red; }
30         to { color:green; }
31     }
32     </style>
33 </head>
34
35 <body>
36 <h1 class="ttt">文字颜色不停的变化</h1>
37 </body>
38 </html>

 1 <!doctype html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>网站首页</title>
 6     <style>
 7     h1{
 8         width:400px;
 9         height:150px;
10         text-align:center;
11         margin:0 auto;
12         line-height:150px;
13         cursor:pointer;
14         color:red;
15         -webkit-animation:yy .5s ease-in 0 infinite alternate;
16     }
17
18     h1:hover{
19         -webkit-animation-play-state:paused;
20     }
21     @-webkit-keyframes yy{
22         to{
23             color:yellow;
24             /*background-color:blue;*/
25             font-size:60px;
26         }
27         from{
28             color:red;
29             /*background-color:#fff;*/
30             font-size:1px;
31         }
32
33     }
34     </style>
35 </head>
36
37 <body>
38 <h1>标题文字效果</h1>
39 </body>
40 </html>

 1 <!doctype html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>网站首页</title>
 6     <style>
 7     img{
 8         -webkit-animation:yy .5s ease-in 0 infinite normal;
 9     }
10
11     img:hover{
12         -webkit-animation-play-state:paused;
13     }
14
15     @-webkit-keyframes yy{
16         to{
17             -webkit-transform:rotate(0);
18         }
19         from{
20             -webkit-transform:rotate(360deg);
21         }
22
23     }
24     </style>
25 </head>
26
27 <body>
28 <img src="images/circle.png">
29 </body>
30 </html>

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>网站首页</title>
    <style>
    h1{
        width:300px;

        /*background-color:red;*/
        /*border:1px solid green;*/
        -webkit-animation:yy .5s ease-in 0 infinite alternate;
    }

    h1:hover{
        -webkit-animation-play-state:paused;
    }

    @-webkit-keyframes yy{
        to{
            -webkit-transform:translate(100px,200px);
        }
        from{
            -webkit-transform:translateX(0,0);
        }

    }
    </style>
</head>

<body>
<h1>text</h1>
</body>
</html>

 1 <!DOCTYPE html>
 2 <html lang="zh-cmn-Hans">
 3 <head>
 4 <meta charset="utf-8" />
 5 <title>2D transform_CSS参考手册_web前端开发参考手册系列</title>
 6 <meta name="author" content="Joy Du(飘零雾雨), [email protected], www.doyoe.com" />
 7 <style>
 8 h1{clear:both;padding-top:10px;font-size:16px;font-family:Arial;}
 9 .test{zoom:1;width:700px;margin:0;padding:0;list-style:none;}
10 .test li{float:left;margin:20px 30px 0 0;border:1px solid #000;}
11 .test li p{width:300px;height:100px;margin:0;background:#ddd;}
12 .test .matrix{-moz-transform:matrix(0,1,1,1,10px,10px);-webkit-transform:matrix(0,1,1,1,10,10);-o-transform:matrix(0,1,1,1,10,10);-ms-transform:matrix(0,1,1,1,10,10);transform:matrix(0,1,1,1,10,10);}
13 .test .translate p{-moz-transform:translate(5%,10px);-webkit-transform:translate(10px,10px);-o-transform:translate(10px,10px);-ms-transform:translate(10px,10px);transform:translate(10px,10px);}
14 .test .translate2 p{-moz-transform:translate(-10px,-10px);-webkit-transform:translate(-10px,-10px);-o-transform:translate(-10px,-10px);-ms-transform:translate(-10px,-10px);transform:translate(-10px,-10px);}
15 .test .translateX p{-moz-transform:translateX(20px);-webkit-transform:translateX(20px);-o-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px);}
16 .test .translate3 p{-moz-transform:translate(20px);-webkit-transform:translate(20px);-o-transform:translate(20px);-ms-transform:translate(20px);transform:translate(20px);}
17 .test .translateY p{-moz-transform:translateY(10px);-webkit-transform:translateY(10px);-o-transform:translateY(10px);-ms-transform:translateY(10px);transform:translateY(10px);}
18 .test .translate4 p{-moz-transform:translate(0,10px);-webkit-transform:translate(0,10px);-o-transform:translate(0,10px);-ms-transform:translate(0,10px);transform:translate(0,10px);}
19 .test .rotate{-moz-transform:rotate(-5deg);-webkit-transform:rotate(-5deg);-o-transform:rotate(-5deg);-ms-transform:rotate(-5deg);transform:rotate(-5deg);}
20 .test .rotate2{-moz-transform:rotate(5deg);-webkit-transform:rotate(5deg);-o-transform:rotate(5deg);-ms-transform:rotate(5deg);transform:rotate(5deg);}
21 .test .scale{-moz-transform:scale(.8);-webkit-transform:scale(.8);-o-transform:scale(.8);-ms-transform:scale(.8);transform:scale(.8);}
22 .test .scale2{-moz-transform:scale(1.2);-webkit-transform:scale(1.2);-o-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2);}
23 .test .skew{-moz-transform:skew(-5deg);-webkit-transform:skew(-5deg);-o-transform:skew(-5deg);-ms-transform:skew(-5deg);transform:skew(-5deg);}
24 .test .skew2{-moz-transform:skew(-5deg,-5deg);-webkit-transform:skew(-5deg,-5deg);-o-transform:skew(-5deg,-5deg);-ms-transform:skew(-5deg,-5deg);transform:skew(-5deg,-5deg);}
25 </style>
26 </head>
27 <body>
28 <h1>矩阵变换：matrix()</h1>
29 <ul class="test">
30     <li class="matrix">
31         <p>transform:matrix(0,1,1,1,10,10)</p>
32     </li>
33 </ul>
34 <h1>平移：translate(), translateX(), translateY()</h1>
35 <ul class="test">
36     <li class="translate">
37         <p>transform:translate(5%,10px)</p>
38     </li>
39     <li class="translate2">
40         <p>transform:translate(-10px,-10px)</p>
41     </li>
42     <li class="translateX">
43         <p>transform:translateX(20px)</p>
44     </li>
45     <li class="translate3">
46         <p>transform:translate(20px)</p>
47     </li>
48     <li class="translateY">
49         <p>transform:translateY(10px)</p>
50     </li>
51     <li class="translate4">
52         <p>transform:translate(0,10px)</p>
53     </li>
54 </ul>
55 <h1>旋转：rotate()</h1>
56 <ul class="test">
57     <li class="rotate">
58         <p>transform:rotate(-15deg)</p>
59     </li>
60     <li class="rotate2">
61         <p>transform:rotate(15deg)</p>
62     </li>
63 </ul>
64 <h1>缩放：scale()</h1>
65 <ul class="test">
66     <li class="scale">
67         <p>transform:scale(.8)</p>
68     </li>
69     <li class="scale2">
70         <p>transform:scale(1.2)</p>
71     </li>
72 </ul>
73 <h1>扭曲：skew()</h1>
74 <ul class="test">
75     <li class="skew">
76         <p>transform:skew(-5deg)</p>
77     </li>
78     <li class="skew2">
79         <p>transform:skew(-5deg,-5deg)</p>
80     </li>
81 </ul>
82 </body>
83 </html>

时间： 2024-11-05 16:33:18

动画效果，过渡效果的相关文章

css3动画效果--过渡效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

过渡效果的写法 -webkit-transition:all 5s ease-in 0s; 动画效果的写法: h1 { -webkit-animation: cc 10s ease-in 0 infinite alternate;} @-webkit-keyframes cc {0% {color:red;}20% {color:green;}50%{color:yellow;}75%{color:gray; }100%{color:purple;}/*紫色*/} h1:hover{ -webk

css3中的过渡效果和动画效果

一.CSS3 过渡 (一).CSS3过渡简介 CSS3过渡是元素从一种样式逐渐改变为另一种的效果. 实现过渡效果的两个要件: 规定把效果添加到哪个 CSS 属性上规定效果的时长定义动画的规则过渡transition (作用) 将元素的某个属性从“一个值”在指定的时间内过渡到“另一个值” (二).transition属性语法 : {transition: 属性名持续时间过渡方法} transition-property 属性的名字(如果是一个属性就带有这个属性的名字

IOS开发－UIView之动画效果的实现方法（合集）

http://www.cnblogs.com/GarveyCalvin/p/4193963.html 前言:在开发APP中,我们会经常使用到动画效果.使用动画可以让我们的APP更酷更炫,最重要的是优化用户体验,但取决于动画的质量.像QQ.微信.新浪微博等APP,动画效果就很好了,至少我很喜欢它们的动画,让我使用起来感觉很顺畅,心情很开朗.本文会介绍UIView效果的实现方法,非核心动画. 一.使用UIView类实现动画基本写法,代码必须放在Begin和Commit之间: [UIView beg

jquery 动画效果插件

从jQuery API 文档中可以知道,jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数: properties:一组包含作为动画属性和终值的样式属性和及其值的集合duration(可选):动画执行时间,其值可以是三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)eas

2015.12.1CSS3转换、过渡、动画效果及css盒子模型

css3转换 1.元素偏移 tranlate 通过translate()的方法元素从当前位置移动到给定的left (x坐标)和top(y坐标)位置参数代码如下: div{ transform:translate(50px,100px): -ms-transform:translate(50px,100px): /*IE9*/ -webkit-transform:translate(50px,100px): /*谷歌苹果*/ -o-transform:translate(50px,100px):

7月13号：2D的转换和过渡，动画效果设置

一.2D的转换通过transform来实现,它有4种方式: 位移:translate(x坐标,y坐标),它是以左上角为原点的位移,不影响其他元素缩放:scale(X倍数,Y倍数),它是以元素中心为原点进行缩放旋转:rotate(度数),它是以元素中心为原点进行旋转斜切(扭曲):skew(X度数,Y度数):X和Y方向同时进行扭曲拉缩二.过渡是通过transition来实现,它可以同时对元素的多个属性同事定义过渡效果(对象,时间,类型,延迟时间). 过渡的类型主要有以下几种方式 linear

想给UIVIew上控件添加一些动画效果

如果你还不知道怎样让一张图片缓缓滑动,渐渐消失,或者是在原地翻滚,不知道怎样让一个窗口弹出的时候有一点抖动的效果不那么僵硬,那正好,今儿在下总结的内容可能刚好能帮你实现你想要的效果(⊙o⊙)哦. 首先说一下什么是动画效果,动画效果有哪些好处吧: 这里所说的动画绝对不是你在电视上看到的,有剧情的那种(当然这句可能是废话),而是为了增加用户的体验感,通过对控件的属性或者layer进行一些处理达到美化界面的效果,主要是让界面看起来更加的生动,不会太枯燥.想象一下,你在用读书软件时候的翻页效果,就能被称

CSS3实现动画效果常用方法

早期在web中要实现动画效果,都是依赖于JavaScript或flash来完成,但在CSS3中新增加了一个新的模块transition,它可以通过一些简单的css事件来触发元素的外观变化,让效果显得更加细腻.简单来说,就是通过鼠标的单击.获得焦点.被点击.或对元素任何改变中触发,并平滑地以动画效果改变css属性值在css中创建简单的过渡效果可以从以下几个步骤来实现 (1)在默认样式中声明元素的初始状态样式 (2)声明过渡元素最终状态样式,比如悬浮状态 (3)在默认样式中通过添加过渡函数,添加一

弹簧动画效果（系统自带方法）

/** * 动画效果 */ [UIView animateWithDuration:0.5 // 动画时长 delay:0.0 // 动画延迟 usingSpringWithDamping:0.58 // 阻力 initialSpringVelocity:3.9 // 动力 options:UIViewAnimationOptionCurveLinear // 动画过渡效果 animations:^{ self.communityItem.center = CGPointMake(item