<!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. 【代码审计】iCMS_v7.0.7 apps.admincp.php页面存在SQL注入漏洞分析

      0x00 环境准备 iCMS官网:https://www.icmsdev.com 网站源码版本:iCMS-v7.0.7 程序源码下载:https://www.icmsdev.com/downloa ...

  2. Kafka(三)-- Kafka主要参数

    原文地址:http://debugo.com/kafka-params/ ############################# System ########################## ...

  3. [C] 如何使用头文件 .h 编译 C 源码

    在 C 语言中,头文件或包含文件通常是一个源代码文件,程序员使用编译器指令将头文件包含进其他源文件的开始(或头部),由编译器在处理另一个源文件时自动包含进来. 一个头文件一般包含类.子程序.变量和其他 ...

  4. 关于Kafka幂等producer的讨论

    众所周知,Kafka 0.11.0.0版本正式支持精确一次处理语义(exactly once semantics,下称EOS).Kafka的EOS主要体现在3个方面: 幂等producer:保证发送单 ...

  5. 【译】Kafka最佳实践 / Kafka Best Practices

    本文来自于DataWorks Summit/Hadoop Summit上的<Apache Kafka最佳实践>分享,里面给出了很多关于Kafka的使用心得,非常值得一看,今推荐给大家. 硬 ...

  6. JLINK与JTAG的区别(转)

    调试ARM,要遵循ARM的调试接口协议,JTAG就是其中的一种.当仿真时,IAR.KEIL.ADS等都有一个公共的调试接口,RDI就是其中的一种,那么我们如何完成RDI-->ARM调试协议(JT ...

  7. no matching function for call to ‘std::basic_string<char>::assign(std::string&, int)

    使用string中的assign赋值函数报错,代码为: text0.assign(line,i+); 其中text0与line都为string类型 最后发现assign函数的原型为 string &a ...

  8. 清空Cookie

    function delCookie() { ; i < cookies.length; i++) { try { document.cookie = cookies[i] + "=0 ...

  9. openlayers中利用vector实现marker的方式

    项目需要一个小型的gis.openlayers,geoserver,postgres组合是比较好的选择. openlayers的marker层好像不支持拖动操作.通过研究api发现,可以利用vecto ...

  10. vuex - 简单使用步骤梳理,轻松掌握、附源码

    -----------------------往期----------------------------- vuex - 学习日记 vuex - 辅助函数学习 vuex - 常用命令学习及用法整理 ...