自开了博客园已经有2周了吧，虽然转载了一些觉得比较有用的文章之外还没有开始写自己的一些学习记录，那就从今天开始。

目前看了妙味的不少视频，有css+html，js的基础和中级也都看完了，作业也都做了，css3的部分也看过了，但是觉得讲得不太好，全部都是点到为止。无意中找到了传智播客的视频讲了一些css3的小技巧，今天就写一下用CSS3做网页中的小三角。

大致网上关于小三角的做法无非三种：

  1. 直接用背景图片，这个没什么好说的；
  2. 用块元素设置宽高都为0，三角的高用一条边框宽度，其他三条边框用dashed以及颜色透明即可，这个会形成一个完整的实心三角形；
  3. 参照2的方法，用两个三角重叠并且一个往上动几个像素，然后设置颜色和背景一致，就会形成一个条状，没有底边的三角

第二种三角： 

<style>
div{
;
border-width: 10px;
border-color: black transparent transparent transparent;
border-style: solid dashed dashed dashed;//这步是为了兼容ie6，因为ie6还不支持边框颜色transparent
}
</style>
<body>
<div></div>
</body>

第三种三角：顺便加入了鼠标移入时旋转功能，使用了transition 

<style>
ul,li{
list-style: none;
}
li{
border: 1px solid black;
overflow: hidden;
line-height: 32px;
}
a{
text-decoration: none;
float: left;
}
i{
float: left;
5px;
position: relative;
width: 6px; //需要给2个三角包一个i标签，这样转动的时候不会偏移
height: 6px;
}
li:hover i{
transform: rotate(180deg);
}
em,span{
border: 3px solid black;
border-color: transparent transparent transparent transparent;
border-style: solid dashed dashed dashed;
;
;
position: absolute;
}
span{
border-top-color: white; //span写在后面，所以同样和em有了position之后，它就能覆盖在em上面，而把它上边宽改成和背景一样的颜色，再往上移动一个像素就能形成一条线框的三角形，当然也可以让em往下移动1px
}
em{
top: 1px;
border-top-color: gray;
}
</style>
</head>
<body>
<ul> //用em和span分别做2个三角
<li><a href="#">我的淘宝</a><i><em></em><span></span></i></li>
</ul>
</body>

上面这个例子还用到了transition，顺便复习一下。

transition的简写方式一般放4个参数

  1. 需要运动的属性，这点要注意，一般是写hover里的那个，上面这个例子就是写了transform，如果hover里的都要运动，可以直接写all
  2. 运动花的时间，单位是秒s
  3. 运动方式linear匀速，ease, ease-in, ease-out, ease-in-out
  4. 何时开始，单位是秒s

transition还要注意的地方有：

  1. 一般都是和hover配合使用；
  2. 能用css3来写的动画就不要用js来写了；
  3. transition是写在要运动的那个元素里，而不是写在它的hover里

下面这个简单的例子是用transition和雪碧图来改变元素背景图

i{
width: 50px;
height: 75px;
display: block;
;
transition: background-position 0.5s ease-in 0s;
//注意这里改变的是背景图的位置，起到的效果就是背景图慢慢往上移动有一个过程
}
i:hover{
-80px ;
}
</style>
<script>
</script>
</head>
<body>
<i></i>
</body>

【学】CSS3基础实例1 - 用CSS3做网页中的小三角，以及transition的用法的更多相关文章

  1. 【学】CSS3基础实例2 - box-shadow, border-radius 圆形图标以及内部旋转

    首先要说一下,transition属性ie9是不支持的,从ie10才开始支持 例子是当鼠标移上div后,它会旋转180度. 要点: 用圆角制作圆形盒子,border-radius设置成50%: 用bo ...

  2. css3基础教程十三征服CSS3选择器

    :enabled选择器 在Web的表单中,有些表单元素有可用(“:enabled”)和不可用(“:disabled”)状态,比如输入框,密码框,复选框等.在默认情况之下,这些表单元素都处在可用状态.那 ...

  3. 从urllib和urllib2基础到一个简单抓取网页图片的小爬虫

    urllib最常用的两大功能(个人理解urllib用于辅助urllib2) 1.urllib.urlopen() 2. urllib.urlencode()   #适当的编码,可用于后面的post提交 ...

  4. 读书笔记之《HTML5 与 CSS3 基础教程》

    1· 读前预期 考虑到对于 Web 开发零基础,凡涉足一件未知的任务,最好先理清任务的逻辑结构,然后有目的地逐步学习.为实现我们的需求和设计,必须要学习前端.后端.服务器等一系列暂时陌生的知识,在此, ...

  5. 【前端】之CSS3基础知识

    CSS3 私有化前缀 考虑到CSS3的兼容性问题,某些属性需要添加浏览器的私有化前缀 几种主流浏览器的私有化前缀如下: Chrome.Safari:-webkit- Firefox:-moz- IE: ...

  6. 虎扯：纯css3各方向小三角的制作原理分析

    入驻博客园两个月之后的第一篇随笔,希望能够做到三个原则: One:不浪费自己的时间, Tow:不浪费读者的时间, 第三就是希望有缘的朋友们多多指教,共度前端快乐的大坑!!! 咱们今天来做一个居家旅行必 ...

  7. CSS3基础入门03

    CSS3 基础入门03 线性渐变 在css3当中,通过渐变属性实现之前只能通过图片实现的渐变效果.渐变分为线性渐变和径向渐变以及重复渐变三种.线性渐变的模式主要是颜色从一个方向过渡到另外一个方向,而径 ...

  8. css3基础教程：CSS3弹性盒模型

    今天给大家分享一篇关于CSS3基础教程 文章,主要是讲CSS3弹性盒模型.弹性布局的主要思想是让容器有能力来改变项目的宽度和高度,以填满可用空间(主要是为了容纳所有类型的显示设备和屏幕尺寸)的能力. ...

  9. css3基础教程十六变形与动画animation

    前面我们讲过的变形与动画一般都是通过鼠标的单击.获得焦点,被点击或对元素进行一定改变后以后触发效果的,那么有没有像Flash一样自动播放的动画效果呢?答案当然是肯定的,这就是我们今天要讲到的anima ...

随机推荐

  1. iOS7中的ViewController切换

    转自:https://onevcat.com/2013/10/vc-transition-in-ios7/ iOS 7 SDK之前的VC切换解决方案 在深入iOS 7的VC切换效果的新API实现之前, ...

  2. 解决ssh链接服务器超时自动断开的问题

    为了安全性:ssh默认的连接超时时间很短:经常就是发个呆就断开了:事实上是可以修改超时时间的. 示例环境: 服务器:centos6.5 1:[root@iZ28qa8jt4uZ /]cp /etc/s ...

  3. 如何在CentOS 7上安装Percona服务器

    在这篇文章中我们将了解关于 Percona 服务器,一个开源的MySQL,MariaDB的替代品.InnoDB的数据库引擎使得Percona 服务器非常有吸引力,如果你需要的高性能,高可靠性和高性价比 ...

  4. linux 实战使用，上传git 解决冲突

    Last login: Fri Dec 18 09:48:55 on ttys000lidongxiaodeiMac:~ lidongxiao$ cd /Users/lidongxiao/Docume ...

  5. KnockOut.js入门示例详解

    KnockOut框架简称KO,是微软将应用于WPF/Silverlight的MVVM模式在Web上的尝试,这是一个非常有用的JavaScript框架. KO的核心就是绑定,包括数据绑定和行为绑定: K ...

  6. 收集Github上的iOS控件和开发资料

    文章来源:http://www.mobile-open.com/2015/85017.html 动画 awesome-ios-animation 收集了iOS平台下比较主流炫酷的几款动画框架 RCTR ...

  7. [转]解决ubuntu下面putty不能连接RS232串口（USB2COM线）

    http://m.blog.csdn.net/blog/wuyanrobert_tjsd/33045255 最后还是sudo了,感觉注销后没有加入dialout组

  8. 人脸识别SDK小结

    Face++人脸识别 进入官网 Face++ 致力于研发世界最好的人脸技术,提供免费的API和SDK供企业和开发者调用,更有灵活的定制化服务满足不同需求.已有多家公司使用Face++技术服务,完成包括 ...

  9. SDR 研究

    最近终于买了一个RTL2832u 电视棒,可以软件无线电了 使用我的小米3开发板 (安卓6.0),直接在应用商店里搜索 "sdr",到豌豆荚中,就有“RTL驱动程序” 点击下载安装 ...

  10. Opencv 2.4.10 +VS2010 项目配置记录

    http://blog.csdn.net/scottly1/article/details/40978625?utm_source=tuicool 因为工作需要,小小的研究一下Opencv的图像处理, ...