Css3 - 动画旋转

常用的css动画旋转

<!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;
    }
</style>
<body>
    <div id="box">Lee</div>
</body>
</html>

时间： 2024-07-29 16:07:21

Css3 - 动画旋转的相关文章

css3动画使用技巧之—border旋转时的应用。

<html> <head> <title>css3动画border旋转时的应用.</title> <meta charset="UTF-8"/> <style type="text/css"> body{ background: #ccc; } .he{ width: 100px; height: 100px; margin: 200px auto; border: 10px solid bla

css3动画应用-音乐唱片旋转播放特效核心点: 1.设置图片为圆形居中,使图片一直不停旋转. 2.文字标题(潘玮柏--反转地球)一直从左到右不停循环移动. 3.点击图标,音乐暂停,图片停止旋转:点击图片,音乐播放,图片开始旋转. 1.动设置图片为圆形居中,使图片一直不停旋转. 核心代码: #xuanzhuan{ -webkit-animation: play 10s linear infinite; -moz-animation: play 10s linear infinite; anima

css3动画--边框线条动画

网上看到一个css3动画,地址最开始思路是,里面一个DIV方块,右上角一个同样大小的div1,向上,向右平移8px,设div1的border-top,border-right值形成,如图所示再用clip截取一半,形成半折角. 同理左下角建一个div,向左.向下平移8px,设border-left,border-bottom值,用clip截取形成 <div class="cont"> <div class="bb"></div>

css3动画animate.css的使用

简介 animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake).闪烁(flash).弹跳(bounce).翻转(flip).旋转(rotateIn/rotateOut).淡入淡出(fadeIn/fadeOut)等多达 60 多种动画效果,几乎包含了所有常见的动画效果. 虽然借助 animate.css 能够很方便.快速的制作 CSS3 动画效果,但还是建议看看 animate.css 的代码,也许你能从中学到一些东西. 在使用animate.css的时候通常都会搭配

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

css3动画

css3动画教程 CSS Transition (转换) transition的作用在于,指定状态变化所需要的时间. transition-property transition-duration transition-delay transition-timing-function transition-timing-function 状态变化速度: ease 逐渐放慢 linear 匀速 ease-in 加速 ease-out 减速 cubic-bezier函数:自定义速度模式.工具网站为:

css3动画的实现

css3动画有哪些实现方式?Transitions .transforms和 AnimationsTransitions特点:平滑的改变CSS的值transforms特点:变换主要实现(拉伸,压缩,旋转,偏移)Animations特点:适用于CSS2,CSS3