css的动画

css的动画是作用于div,给div加css动画  例如div旋转动画

css部分

.zhuan1{
/*动画名字为转1   0.3秒一次  执行一次 停止*/
    animation:zhuan1 0.3s ease both;
/*等待0s开始*/
    animation-delay:0s;
/*过程匀速进行*/
    animation-timing-function: linear;
}
/*转动画 0%的时候执行角度为0deg 100%执行角度为180deg*/
@-webkit-keyframes zhuan1{
    0%{
        transform: rotate(0deg);
    }
    100%{transform: rotate(180deg);}
}
.zhuan2{
/*动画名字为转 0.3秒一次  执行一次 停止*/
    animation:zhuan2 0.3s ease both;
/*等待0s开始*/
    animation-delay:0s;
/*过程匀速进行*/
    animation-timing-function: linear;
}
/*转动画 0%的时候执行角度为180deg 100%执行角度为0deg*/
@-webkit-keyframes zhuan2{
    0%{
        transform: rotate(180deg);
    }
    100%{transform: rotate(0deg);}
}

js部分

//导航字体移入移出显示变色
function xianshibianse(){
    $(".li_").mouseenter(function(){
        $(this).css(‘color‘,‘#108EE9‘);
        //自定义了一个bs变量,bs是自定义属性bs的值
        //下拉框显示隐藏
        var bs = $(this).attr(‘bs‘);
        $("#daohangxiala"+bs).css("display","block");
        //自定义一个class属性样式:动画zhuan1和zhuan2,鼠标移入执行动画1,删除动画2
        $(".abc"+bs).removeClass("zhuan2");
        $(".abc"+bs).addClass("zhuan1");
    })
    $(".li_").mouseleave(function(){
        $(this).css(‘color‘,‘white‘);
        var bs = $(this).attr(‘bs‘);
        $("#daohangxiala"+bs).css("display","none");
        //自定义一个class属性样式:动画zhuan1和zhuan2,鼠标移入执行动画2,删除动画1
        $(".abc"+bs).removeClass("zhuan1");
        $(".abc"+bs).addClass("zhuan2");
    })

原文地址:https://www.cnblogs.com/-dashu/p/9276730.html

时间: 2024-11-05 15:58:13

css的动画的相关文章

如何使用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"

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

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

第四十二课:基于CSS的动画引擎

由于低版本浏览器不支持css3 animation,因此我们需要根据浏览器来选择不同的动画引擎.如果浏览器支持css3 animation,那么就使用此动画引擎,如果不支持,就使用javascript的动画引擎. 首先,我们看一下判定条件,方便切换.前面说过,浏览器把所有事件类型的构造器放在window上,只不过不可遍历.我们用Object.getOwnPropertyNames(window),可以得到window对象中的所有属性,然后再filter一下,就能得到所有的事件构造器了.最后,我们

CSS波纹动画

波纹动画 在此运用到css的动画属性,以及背景等相关属性. 值得一说的是下面代码中一直写到的这样一行代码:filter: alpha(opacity=0~100) ,这是考虑到浏览器兼容的问题. IE使用私有属性filter:alpha(opacity),Moz Family使用私有属性-moz-opacity,而标准的属性是opacity(CSS 3, Moz Family部分支持CSS3).后面的数值是透明度,使用百分比或者小数(alpha(opacity))使用大于0小于100的数值,其实

css的动画和过渡

一.过渡: transition    简写属性,用于在一个属性中设置四个过渡属性. transition-property   规定应用过渡的 CSS 属性的名称. transition-duration    定义过渡效果花费的时间.默认是 0. transition-timing-function   规定过渡效果的时间曲线.默认是 "ease". transition-delay         规定过渡效果何时开始.默认是 0. eg: div { transition: w

CSS过渡动画之transition

O(∩_∩)O~ 这两天在看看CSS的相关内容,关于transition动画感觉很有意思,分享一下. CSS负责给html加效果,自然少不了各种动画,今天介绍一下transition. 概述 看一段比较学术的定义:transition主要负责页面的过渡效果,transition可以使css的属性值在一定时间内平滑地过渡.这种效果可以在鼠标划过.点击.获得焦点或者对元素的任何改变中触发,并平滑地以动画效果改变css的属性值. transition的几个常用属性 1.transition-prope

CSS--使用Animate.css制作动画效果

一 使用Animate.css动画 // 通过@import引入外部CSS资源; // 引入线上图片及JS文件; // 通过更改CSS类名生成不同类型的CSS3动画;   1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 </head> 6 <style> 7 /* Animate.css GitHu

转发-css(动画,过渡,转换)

此文章仅为转发,非原创,原文http://www.cnblogs.com/zhuanggege/p/5754543.html 请支持原创 css3动画 @keyframes 规定动画,必须定义动画的名称,动画时长的百分比,一个或多个css样式属性 以百分比来规定改变发生的时间,或者通过关键词"from"和"to",等价于0%和100% 语法:@keyframes animationname {keyframes-selector {css-styles;}} ani