<!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. 接口测试之JMeter初探

    1.JMeter安装配置 )登录 http://jmeter.apache.org/download_jmeter.cgi ,下载与自己的平台相对应文件: )安装JDK(.6以上),配置环境变量JAV ...

  2. Android图片的合成示例

    package com.example.demo; import android.os.Bundle; import android.app.Activity; import android.grap ...

  3. Explaining Delegates in C# - Part 2 (Events 1)

    In my previous post, I spoke about a few very basic and simple reasons of using delegates - primaril ...

  4. getopenfilename多选文件/文件夹问题和getsavefilename另存为路径

    关于使用getopenfilename多选多个文件是可以的. 以下是多选文件的代码 bool GetNeedOpenFilePath(vector<tstring>& vectFi ...

  5. luanet性能测试

    测试环境 intel-i5 双核 2.53HZ 服务器客户端均在本机运行 测试内容:echo回射,每个包的字节数在20字节内 luanet 连接数 每秒回射数 1 19,000/s 10 12,500 ...

  6. SqlServer 连接远程服务器数据库 实现跨服务器联合查询

    第一种: exec sp_addlinkedserver 'ITSV ', ' ', 'SQLOLEDB ', '远程服务器名或ip地址 ' exec sp_addlinkedsrvlogin 'IT ...

  7. 国产手机插入mac os 系统中无法被识别的解决方法

    一些国产手机插入mac os 系统中无法被识别,在命令行输入 system_profiler SPUSBDataType在, 然后将魅蓝note的vendor id 添加至 ~/.android/ad ...

  8. 2333: [SCOI2011]棘手的操作[离线线段树]

    2333: [SCOI2011]棘手的操作 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 2325  Solved: 909[Submit][Stat ...

  9. 一篇博客搞定redis基础

    redis简介 redis 一款高性能key-value数据库,实际上多用作缓存队列或者消息分发(celery),但是最常常被用来做缓存. redis安装 源码安装 $ wget http://dow ...

  10. 【黑金原创教程】【FPGA那些事儿-驱动篇I 】实验十一：PS/2模块⑤ — 扩展鼠标

    实验十一:PS/2模块⑤ — 扩展鼠标 当普通鼠标即三键鼠标再也无法满足需求的时候,扩展鼠标即滚轮鼠标就诞生了,然而实验十一的实验目的就是实现滚轮鼠标的驱动.不过,进入整体之前,先让我们来了解一下鼠标 ...