1.div由短变长
.red_banner_line{ width: 20px;height: 4px;background: #EA0000;float: right; transition:width .5s;float: right; -moz-transition:width .5s; /* Firefox 4 */ -webkit-transition:width .5s; /* Safari and Chrome */ -o-transition:width .5s; /* Opera */ } .lunbo_list_this .red_banner_line{padding-left:40px;width: 100%;} //设置宽度 2.利用伪类画下划线
.menubar_cont .top_bar{ float: left;font-size: 20px;color: #793f26;padding: 10px 0px;margin: 0px 35px;cursor: pointer; position: relative;transition: all .3s; -webkit-transition: all .3s; } .top_bar:after{ content: ""; width: 0; height:4px; background:#EA0000; position: absolute; top: calc(100% - 4px); left: 0%; transition: all .2s; -webkit-transition: all .2s; } .top_bar:hover:after{ left: 0%; width: 100%; } .top_bar_cont:after{ content: ''; top: auto; bottom: 0; width: 100%; }3.图片缩放
.six_cont img{ -webkit-transform: scale(1,1); -moz-transform: scale(1,1); transform: scale(1,1); transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; } .six_cont:hover img{ -webkit-transform: scale(1.1,1.1); -moz-transform: scale(1.1,1.1); transform: scale(1.1,1.1); }4.div位置移动
.six_cont_txt{ float: left;width: 100%;text-align: center;position: absolute;bottom: -40px; transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; } .six_cont:hover .six_cont_txt{ bottom: 20px; }5.旋转
transform:rotate(180deg);
6.声明一个函数动画
.footer_center ul li a:hover .fmenu_line{ position:relative; animation:myfooterwidth 0.5s infinite; -webkit-animation:myfooterwidth 0.5s infinite; /*Safari and Chrome*/ animation-iteration-count:1;/*动画只执行一次*/ -webkit-animation-iteration-count:1; } @keyframes myfooterwidth { from {width:0px;} to {width:20px;} } @-webkit-keyframes myfooterwidth { from {width:0px;} to {width:20px;} }后期更新中，不断学习
