现在网页中流行的css3样式

1、鼠标放在圆形图片中,图片渐渐的变方形【17素材头像的特效,觉得不错就研究下来了 ———— 17sucai.com】

img{border-radius:50%;transition: all .4s ease-out;}

a:hover img{border-radius:0px;}

2、当鼠标放到菜单或者图片上时,菜单或图片会渐渐的移动  【忘记在哪看的了,不过效果确实很不错】

a{transition:all 0.3s ease-out 0s;color:#000;}

a:hover{margin-left:5px; text-decoration:none;}

3、当鼠标放到图片上,图片会旋转一定的角度,【类似天猫首页右侧的便民服务,其实原理就是相同的背景图片】

i{        background: url(../images/lobg.png) no-repeat; width:30px; height:30px;}

i:hover{         background-position: 0 -30px;       transition: all .4s ease-out;}

时间: 2025-01-14 01:57:55

现在网页中流行的css3样式的相关文章

总结网页中流行的8种css3样式

CSS样式: .f1 img{border-radius:50%;transition: all .4s ease-out;} .f1 a:hover img{border-radius:0px;} .f2 a{transition:all 0.4s ease-out 0s;color:#000;} .f2 a:hover{margin-left:10px; text-decoration:none;} .f21{ transition:All 0.4s ease-in-out; -webkit

17jquery学习笔记-------动画----图片在网页中移动,改变样式

animate:animate内部设置的多个值是同步变化的,链式的 animate是依次动画的.例子:animate({ left: 0, top: 0, width: 300, height: 300 },3000) .animate({ opacity: 0 }).animate({ opacity: 1 }).还可以指定增量,$(“#div1”).animate({ height: “+=100” });//如果 是+=.-=等增量形式要写成字符串,因为JavaScript不认识这种语法

用CSS3做网页中的小三角,以及transition的用法

自开了博客园已经有2周了吧,虽然转载了一些觉得比较有用的文章之外还没有开始写自己的一些学习记录,那就从今天开始. 目前看了妙味的不少视频,有css+html,js的基础和中级也都看完了,作业也都做了,css3的部分也看过了,但是觉得讲得不太好,全部都是点到为止.无意中找到了传智播客的视频讲了一些css3的小技巧,今天就写一下用CSS3做网页中的小三角. 大致网上关于小三角的做法无非三种: 直接用背景图片,这个没什么好说的: 用块元素设置宽高都为0,三角的高用一条边框宽度,其他三条边框用dashe

在网页中添加样式

要最大限度的发挥HTML5的功能,必须熟悉CSS标准.(初级仅作练习...大神绕道啦) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Html5 feature Detection</title> </head> <body> 有三种在网页中使用样式的方法 <br>

在网页中自带字体的方法

为了让网页更美观.更有个性,我们通常需要在网页中使用一些网上下载下来的字体,因为系统自带的字体可选择的余地早已无法满足人们对审美的要求. 怎么用?用户的电脑又没有安装你期望的那种字体.做成图片是可以,不过不方便修改啊,不能大幅度使用啊,不利于SEO啊,速度也比较慢点啊等等一大堆弊端.怎么办?别急,我们用CSS.CSS有这么一种优秀的功能,就是可以自定义字体.下面正式进入正题: CSS自定义字体,让你的字体运用随心所欲! 步骤: 1.下载所需字体.字体下载站提供的字体一般为.TTF格式. 2.字体

前端开发css实战:使用css制作网页中的多级菜单

前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简单),使用css的优势显而易见,它可以使页面中的javascript变得更少. 实现逻辑: 核心:hover伪类控制子元素的显示隐藏,添加css3动画;  (没错就是这样简单) :hover伪类,适用于当用户指向一个元素时,例如用户的鼠标指向一个段落p.当用户鼠标离开元素时,恢复元素原有的样式显示

简单了解css3样式表写法和优先级

css3和css有什么区别?首先css33是css(层叠样式表)技术的升级版本,而css是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.然后是内容上css3主要包括盒子模型.列表模块.超链接方式.语言模块.背景和边框.文字特效.多栏布局等模块.而css不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化.最后在特点上css3新特征有很多,例如圆角效果.图形化边界.块阴影与文字阴影.使用RGBA实现透明效果.渐

在网页中插入百度地图(实例)

步骤 1 2 3 如何在网页中插入百度地图呢? 2.切换城市,搜索需标注位置.(如下图 方法/步骤 1.进入:http://api.map.baidu.com/lbsapi/creatmap/(创建地图-百度地图API所见即所得工具,百度官方地址,大家放心使用) 切换城市,搜索需标注位置.(如下图:) 设置地图:大家可以对网站显示地图的宽高进行设置,其余选项不动. 添加标注:点击第一个图标后,在右侧找到自己的位置,单击鼠标左键可定位.标记图标处可更换图标形状,名称和备注填入位置相关信息.(如下图

html中滚动栏的样式

DIV滚动栏设置 (CSS)2008/09/26 03:07div 中滚动栏的控制2008年01月06日 星期日 01:181)隐藏滚动栏<body style="overflow-x:hidden;overflow-y:hidden">(2)怎样在单元格或图层中出现滚动栏<div style="width:200px;height:200px;overflow-x:auto;overflow-y:auto;"></div>(3)