jQuery和css3控制箭头丝滑旋转
问题: 我们经常会遇见点击一个小三角使之丝滑的旋转180度上下旋转,怎么实现呢,需要css3搭配jq 来处理
如图:1.点击前 2.点击后(效果丝滑旋转)
1.html 页面内容
<div class="user-list-title">标准点播-<small>体验版</small>
<img src="http://i1.letvimg.com/lc07_lecloud/201610/09/11/32/userCenter/jiantoublue1.png" class="user-arrow">
</div>
2.css 内容
.user-arrow{//这是箭头的样式
width:12px;
position:absolute;
right:26px;
margin-top: 8px;
cursor:pointer;
display:inline-block;//放箭头的标签一定是块级元素
}
.rotate{
transform-origin:center center; //旋转中心要是正中间 才行
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transition: transform 0.2s; //过度时间 可调
-moz-transition: -moz-transform 0.2s;
-moz-transition: -moz-transform 0.2s;
-o-transition: -o-transform 0.2s;
-ms-transition: -ms-transform 0.2s;
}
.rotate1{
transform-origin:center center;
transform: rotate(0deg); //返回原点
-webkit-transform: rotate(0deg);
-moz-transform: rotate(deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transition: transform 0.2s;
-moz-transition: -moz-transform 0.2s;
-moz-transition: -moz-transform 0.2s;
-o-transition: -o-transform 0.2s;
-ms-transition: -ms-transform 0.2s;
}
3.jq 处理方法
$(function() {
var usercenter = {
init:function(){
this.modal();
},
modal: function() {
$(".user-arrow").click(function(){
if($(this).hasClass("rotate")){ //点击箭头旋转180度
$(this).removeClass("rotate");
$(this).addClass("rotate1");
}else{
$(this).removeClass("rotate1"); //再次点击箭头回来
$(this).addClass("rotate");
}
})
}
}
usercenter.init();
})
jQuery和css3控制箭头丝滑旋转的更多相关文章
- 基于jQuery和CSS3炫酷图片3D旋转幻灯片特效
在线预览 源码下载 iPresenter是一款效果非常炫酷的jQuery和CSS3 3D旋转幻灯片特效插件.你可以使用它来制作产品展示.图片画廊或者各种幻灯片和轮播图特效.这款幻灯片插件的特点有: ...
- 性能优化 | Go Ballast 让内存控制更加丝滑
关于 Go GC 优化的手段你知道的有哪些?比较常见的是通过调整 GC 的步调,以调整 GC 的触发频率. 设置 GOGC 设置 debug.SetGCPercent() 这两种方式的原理和效果都是一 ...
- 一款基于jQuery和CSS3炫酷3D旋转画廊特效插件
这是一款效果炫酷的jQuery和CSS3 3D旋转画廊特效插件.该3D画廊插件可以通过前后导航按钮来切换图片,效果就像旋转木马一样.它还带有点击放大图片,显示图片标题和用键盘操作等功能. 在线预览 ...
- 使用 CSS3 打造一组质感细腻丝滑的按钮
CSS3 引入了众多供功能强大的新特性,让设计和开发人员能够轻松的创作出各种精美的界面效果.下面这些发出闪亮光泽的按钮,很漂亮吧?把鼠标悬停在按钮上,还有动感的光泽移动效果. 温馨提示:为保证最佳的效 ...
- css3+jq--小箭头旋转180度案例
html: <aside class="tea_getBtn"> <div class="w"> <span class=&quo ...
- jQuery.smoove — jQuery和CSS3炫酷滚动页面内容元素动画特效插件
插件介绍: jQuery-smoove是一款jQuery和CSS3炫酷滚动页面内容元素动画特效插件.该内容元素动画插件在页面滚动到指定位置时,该位置的HTML元素会执行指定的CSS3动画特效,如旋转. ...
- CSS3 skew倾斜、rotate旋转动画
css3出现之前,我们实现一个对象的一组连续动画需要通过JavaScript或Jquery编写,脚本代码较为复杂: 若需要实现倾斜.旋转之类的动画难度将更高(我还没试过用JavaScript或Jque ...
- 《你还在写sql语句吗?》人生苦短,进入MybatisPlus的丝滑体验
一.发展历程 依稀记得大学期间,类中写sql语句的日子,一个sql语句占据了大部分时间,到后来hibernate的出现算是解决了这一痛点.工作 后,我们又接触到了mybatis这样的框架,瞬间感觉这个 ...
- 纯css就能实现可点击切换的轮播图,feel起来很丝滑
前言 轮播图经常会在项目里用到,但是实际上用到的轮播图都是比较简单的,没有复杂的特效,这个时候如果去引入swiper那些库的话,未免就有点杀鸡焉用牛刀了. 所以不如自己手写一个,而今天我要分享的一种写 ...
随机推荐
- image_size must contain 3 elements[4]
今天在制作自己训练集合并且训练的时候,碰见了如下的错: image_size must contain 3 elements[4] 这是因为训练的数据集中不是所有的图片位深都是三通道的. 写一个脚本查 ...
- 编写高质量代码:Web前端开发修炼之道(四)
这一节是继上一节高质量的Javascript 7)编程实用技巧 1:弹性 从 一个标签区和内容区的实例(就是点击不同的标签菜单显示不同的内容块)来说明不需要每个tabmenu都设置onclick事件, ...
- [转]矩阵树$Matrix-Tree$定理与行列式
[https://www.cnblogs.com/zj75211/p/8039443.html][矩阵树Matrix-Tree定理与行列式]
- ActivityManager的代理模式
从官方文档的介绍可以看到ActivityManager的作用: 是与系统所有正在运行着的Acitivity进行交互,对系统所有运行中的Activity相关信息(Task,Memory,Service, ...
- Ubuntu 18.04 安装 odoo12 源码版
更新和升级 在我们进入安装过程之前,你应该更新和升级Ubuntu.打开终端窗口,发出以下命令: sudo apt-get updatesudo apt-get upgrade 注意:如果内核升级,则必 ...
- Oracle 维护数据的完整性 一 索引
简介:索引是用于加速数据存取的数据对象,合理的使用索引可以大大降低i/o 次数,从而提高数据的访问性能. 当我们从一张表中检索我们需要的数据是,oralce往往会进行全表扫描,就是遍历所有的数据行,来 ...
- selenium+Python(鼠标和键盘事件)
本篇总结了 web 页面常用的一些操作元素方法,可以统称为行为事件有些 web 界面的选项菜单需要鼠标悬停在某个元素上才能显示出来(如百度页面的设置按钮). 1 简单操作 1.点击(鼠标左键)页面按钮 ...
- 关于table-layout的用法
定义:tableLayout 属性用来显示表格单元格.行.列的算法规则. 自动表格布局:auto(默认) 在自动表格布局中,列的宽度是由列单元格中没有折行的最宽的内容设定的. 此算法有时会较慢,这是由 ...
- Class and Instance Variables In Ruby
https://github.com/unixc3t/mydoc/blob/master/blog/caiv.md
- 快手、抖音、微视类短视频SDK接入教程,7步就能搞定
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由视频咖 发表于云+社区专栏 终端部分 按照如下三步操作,可以用 XCode 或者 Android Studio 编译和调试小视频 Ap ...