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