<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <style type="text/css">

 a{text-decoration: none;

     color: #EE7A23;}

         .select-self-area .select-btn .i-up-down {

             width: 8px;

             top: 0;

             left: 0; }

         .select-self-area .select-btn .i-up-down i {

             width: 5px;

             height: 2px;

             background-color: #605F5F; }

         .select-self-open .i-up-down .i-up-down-l {

             left: 0;

             -ms-transform: rotate(-40deg);

             transform: rotate(-40deg);

             transition: transform .3s ease-out; }

         .select-self-open .i-up-down .i-up-down-r {

             right: 0;

             -ms-transform: rotate(40deg);

             transform: rotate(40deg);

             transition: all .3s ease-out; }

         .select-self:hover .i-up-down-l, .up-down-btn:hover .i-up-down-l, .up-down-btn.open .i-up-down-l {

             -ms-transform: rotate(-40deg);

             transform: rotate(-40deg);

             transition: all .3s ease-out; }

         .select-self:hover .i-up-down-r, .up-down-btn:hover .i-up-down-r, .up-down-btn.open .i-up-down-r {

             -ms-transform: rotate(40deg);

             transform: rotate(40deg);

             transition: all .3s ease-out; }

         .i-up-down {

             position: relative;

             display: inline-block;

             width: 14px;

             height: 6px;

             vertical-align: middle;

             z-index: 2;

             -ms-transform: translateY(2px);

             transform: translateY(2px);

             transition: transform .3s ease-out; }

         .i-up-down i {

             position: absolute;

             top: 0;

             width: 8px;

             height: 1px;

             background: #EE7A23; }

         .i-up-down .i-up-down-l {

             left: 0;

             -ms-transform: rotate(40deg);

             transform: rotate(40deg);

             transition: transform .3s ease-out; }

         .i-up-down .i-up-down-r {

             right: 0;

             -ms-transform: rotate(-40deg);

             transform: rotate(-40deg);

             transition: transform .3s ease-out; }

     </style>

     <title>箭头显示</title>

 </head>

 <body>

 <div class="shipping-addr-more">

     <a class="addr-more-btn up-down-btn" href="#">

         more<!--利用css3样式旋转，使箭头变化-->

         <i class="i-up-down">

             <i class="i-up-down-l"></i>

             <i class="i-up-down-r"></i>

         </i>

     </a>

 </div>

 </body>

 </html>

主要是利用css3的transform的旋转变化来修改

其中transtion语法：

transition: property duration timing-function delay;
transition:  过渡效果的 CSS 属性的名称  渡效果需要多少秒或毫秒  过渡效果何时开始

ease    规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。

ease-in    规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。

ease-out    规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。

ease-in-out    规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。

css3的一个小demo（箭头hover变化）的更多相关文章

  1. java线程间通信：一个小Demo完全搞懂

    版权声明:本文出自汪磊的博客,转载请务必注明出处. Java线程系列文章只是自己知识的总结梳理,都是最基础的玩意,已经掌握熟练的可以绕过. 一.从一个小Demo说起 上篇我们聊到了Java多线程的同步 ...

  2. 模仿京东顶部搜索条效果制作的一个小demo

    最近模仿京东顶部搜索条效果制作的一个小demo,特贴到这里,今后如果有用到可以参考一下,代码如下 #define kScreenWidth [UIScreen mainScreen].bounds.s ...

  3. Visual Studio 2017 - Windows应用程序打包成exe文件（2）- Advanced Installer 关于Newtonsoft.Json，LINQ to JSON的一个小demo mysql循环插入数据、生成随机数及CONCAT函数 .NET记录-获取外网IP以及判断该IP是属于网通还是电信 Guid的生成和数据修整（去除空格和小写字符）

    Visual Studio 2017 - Windows应用程序打包成exe文件(2)- Advanced Installer   Advanced Installer :Free for 30 da ...

  4. 一周一个小demo — 前端后台的交互实例

    这一周呢,本K在大神的指导下,完成了一个利用ajax与php文件上传处理相结合的一个留言板功能的小实例,下面就让本K来带大家瞅瞅如何实现这一种功能. 一.界面概览 首先我们来看一下这个小demo的具体 ...

  5. 从一个小demo开始，体验“API经济”的大魅力

    写在前面 “API经济”这个词是越来越火了,但是"API经济"具体指的是什么,相信很多人还没有个明确的认识.不过今天我可不打算长篇大论的去讲解一些概念,我们就以“电话号码归属地查询 ...

  6. 学习react，动手实现一个小demo（仿知乎问答）

    学习react也有一周的时间,最近自己做了个仿知乎问答的小demo,项目源码在github上:https://github.com/yang302/reactQa 使用技术:bower+gulp+re ...

  7. 原生JS写了一个小demo，根据输入的数字生成不同背景颜色的小方块儿~

    昨天练习写了这个小demo,个人觉得通过设置定位元素left和top的值,来实现换行的功能,这种方法很巧妙~ 另外,如下代码中的随机颜色的获取,还请各位前辈多多指教:需要改进的地方:或者有没有更好的方 ...

  8. 环形文字 + css3制作图形 + animation无限正反旋转的一个小demo

    少啰嗦,先看效果图: (注意文字和太极图均可旋转,太极图使用css写成的!) css: /*太极图css--*/ .Taiji { margin: 100px; width: 192px; heigh ...

  9. 写一个小demo过程中遇到的各种问题 学生管理考勤系统（网页模拟）

    添加与新增一些小玩意的1.0.3版本:传送门 各位带哥,这不是你们要的c++.java.c#作业哈 课上要求做个小作业,学生管理考勤系统,原本想着是个练手的好机会,结果只证实了我还是个弟中弟. 设想的 ...

随机推荐

  1. 子窗口访问父页面iframe中的iframe，top打开的子窗口访问父页面中的iframe中的iframe

    子窗口访问父页面iframe中的iframe 子窗口访问最顶层页面中的iframe中的iframe top打开的子窗口访问父页面中的iframe中的iframe top打开的子窗口访问最顶层页面中的i ...

  2. 转载linux性能调优工具

    Linux 大牛,Netflix 高级性能架构师 Brendan Gregg 更新 Linux 性能调优工具,各种资源应有尽有,大量干货,强烈建议收藏.

  3. 【安全开发】IOS安全编码规范

    申明:本文非笔者原创,原文转载自:https://github.com/SecurityPaper/SecurityPaper-web/blob/master/_posts/2.SDL%E8%A7%8 ...

  4. Bypass D盾_IIS防火墙SQL注入防御（多姿势）

    0X01 前言 D盾_IIS防火墙,目前只支持Win2003服务器,前阵子看见官方博客说D盾新版将近期推出,相信功能会更强大,这边分享一下之前的SQL注入防御的测试情况.D盾_IIS防火墙注入防御策略 ...

  5. Selenium 节点交互

    Selenium 可以驱动浏览器来执行一些操作,也就是说可以让浏览器模拟执行一些动作 常见方法:输入文字时用 send_keys() 方法,清空文字时用 clear() 方法,点击按钮时用 click ...

  6. 《利用Python 进行数据分析》 - 笔记(4)----json

    解决方案: 读写文本格式的数据: pandas 提供了一些用于将表格型数据读取为DataFrame对象的函数 pandas 中的解析函数 函数的选项可以划分为以下几个大类 索引:将一个或多个列当做返回 ...

  7. UISegmentedControl的基本用法

    本文转载至 http://www.tuicool.com/articles/yUfURj 原文  http://blog.csdn.net/hmt20130412/article/details/38 ...

  8. 《计算机图形学》2.1.1 刷新式CRT

    图形系统一般使用显示器作为其输出设备. 大部分视频监视器的操作是基于标准的阴极射线管(cathode-ray tube,CRT)设计的,但是也已经出现了其他一些技术,并且固态监视器终究要占据主导地位. ...

  9. Android数据存储之SD卡

    为了更好的存取应用程序的大文件数据,应用程序需要读. 写SD卡上的文件.SD卡大大扩充手机的存储能力. 操作SD首先要加权限: <!--在SDCard中创建与删除文件权限 --> < ...

  10. PHP 中文字符串截取

    $str = "abcdef啊啊吧啊"; function my_sub($str, $st ,$len){ $ret = ""; for( $st; $len ...