主题

由于最近比较忙,自己也没有很充裕的时间可以去做比较丰富的分享。今晚我挤出时间来制作这几个很常用的CSS3网页小效果。最近写JS的时间比例比较多,不过我还是比较钟情于CSS3。所以我还是坚持分享一些实用的CSS3小例子。这次由于时间有限,就做了几个相对比较简单的例子。看一下吧!

正文

第一种效果:

由于录制gif图片会掉帧,所以看起来不流畅,很卡,但其实实际效果还是不错的,有弹性一些。

html代码:

<span class="shake">弹</span>

css代码:

.shake{
width:40px;
height:40px;
display:block;
background:lightgreen;
border-radius:50%;
margin:5px;
color:#fff;
font-size:24px;
text-align:center;
line-height:40px;
cursor:pointer;
-webkit-transition:all 0.25s;
}
.shake:hover{
-webkit-animation:shake 0.25s;
background: lightblue;
}
@-webkit-keyframes shake{
0%,10%,55%,90%,94%,98%,100%{
-webkit-transform:scale(1,1);
}
30%{
-webkit-transform:scale(1.14,0.86);
}
75%{
-webkit-transform:scale(0.92,1.08);
}
92%{
-webkit-transform:scale(1.04,0.96);
}
96%{
-webkit-transform:scale(1.02,0.98);
}
99%{
-webkit-transform:scale(1.01,0.99);
}
}

昨晚看到某人的个人博客网站的回到顶部按钮悬浮效果就是这样子的,还是比较有趣的,不过人家的效果可能比我的好一些,大家不妨试一下。

第二种效果:

这种效果其实目前线上很多网站都在用了,不管是使用CSS3,还是jQuery,都是可以实现的。那这里我只是简单地使用CSS3来实现。

html代码:

<input class="search" type="text" placeholder="搜索...">

CSS代码:

.search{
width:80px;
height:40px;
border-radius:40px;
border:2px solid lightblue;
position: absolute;
right:200px;
outline:none;
text-indent:12px;
color:#666;
font-size:16px;
padding:;
-webkit-transition:width 0.5s;
}
.search:focus{
width:200px;
}

一般旁边都会有一个按钮,这里我就不做了。

第三种效果:

这种效果也是很常用,比较多还是个人网站偏多。

html代码:

<div class="banner">
<a href="javascript:;">博</a>
<span>这是我的个人博客</span>
</div>

css代码:

.banner{
width:234px;
height:34px;
border-radius:34px;
position:absolute;
top:400px;
left:200px;
}
.banner a{
display:inline-block;
width:30px;
height:30px;
line-height:30px;
border-radius:50%;
border:2px solid lightblue;
position:absolute;
left:0px;top:0px;
background:lightgreen;
color:#fff;
text-align:center;
text-decoration:none;
cursor:pointer;
z-index:;
}
.banner a:hover + span{
-webkit-transform:rotate(360deg);
opacity:;
}
.banner span{
display:inline-block;
width:auto;
padding:0 20px;
height:34px;
line-height:34px;
background:lightblue;
border-radius:34px;
text-align: center;
position:absolute;
color:#fff;
text-indent:25px;
opacity:;
-webkit-transform-origin:8% center;
-webkit-transition:all 1s;
}

第四种效果:

这种提示效果就更常用了,很多网站都用。

html代码:

<div class="banner1">
<a href="javascript:;">博</a>
<span>这是我的个人博客</span>
</div>

css代码:

.banner1{
width:234px;
height:34px;
border-radius:40px;
position:absolute;
top:400px;
left:600px;
}
.banner1 a{
display:inline-block;
width:30px;
height:30px;
line-height:30px;
border-radius:50%;
border:2px solid lightblue;
position:absolute;
left:0px;top:0px;
background:lightgreen;
color:#fff;
text-align:center;
text-decoration:none;
cursor:pointer;
z-index:;
}
.banner1 a:hover + span{
-webkit-transform:translateX(40px);
opacity:;
}
.banner1 span{
display:inline-block;
width:auto;
padding:0 20px;
height:30px;line-height:30px;
background:lightblue;
border-radius:30px;
text-align: center;
color:#fff;
position:absolute;
top:2px;
opacity:;
-webkit-transition:all 1s;
-webkit-transform:translateX(80px);
}

最后一种效果

估计这种就是不常用了,自己做着玩,有兴趣看一下咯:

html结构:

<div class="wrapper">
<div class="round">
<span>东邪</span>
<span>西毒</span>
<span>南乞</span>
<span>北丐</span>
</div>
</div>

css代码:

.wrapper{
width:100px;
height:100px;
background:lightblue;
border-radius:50%;
border:2px solid lightgreen;
position: absolute;
top:200px;
left:400px;
cursor:pointer;
}
.wrapper:after{
content:'你猜';
display:inline-block;
width:100px;
height:100px;
line-height:100px;
border-radius:50%;
text-align:center;
color:#fff;
font-size:24px;
}
.wrapper:hover .round{
-webkit-transform:scale(1);
opacity:;
-webkit-animation:rotating 6s 1.2s linear infinite alternate;
}
@-webkit-keyframes rotating{
0%{
-webkit-transform:rotate(0deg);
}
100%{
-webkit-transform:rotate(180deg);
}
}
.round{
width:240px;
height:240px;
border:2px solid lightgreen;
border-radius:50%;
position: absolute;
top:-70px;
left:-70px;
-webkit-transition:all 1s;
-webkit-transform:scale(0.35);
opacity:;
}
.round span{
width:40px;
height:40px;
line-height:40px;
display:inline-block;
border-radius:50%;
background:lightblue;
border:2px solid lightgreen;
color:#fff;
text-align:center;
position:absolute;
}
.round span:nth-child(1){
right:-22px;
top:50%;
margin-top:-22px;
}
.round span:nth-child(2){
left:-22px;
top:50%;
margin-top:-22px;
}
.round span:nth-child(3){
left:50%;
bottom:-22px;
margin-left:-22px;
}
.round span:nth-child(4){
left:50%;
top:-22px;
margin-left:-22px;
}

结语

那么这次就分享这么几个小玩意吧,以后有时间会分享一些比较好的。最后,祝大家七夕节快乐!

若需转载,请注明出处,谢谢合作!

CSS3实现几个常用的网页小效果的更多相关文章

  1. 【前端】javascript中10常用的个小技巧总结

    javascript中10常用的个小技巧总结 本文转自:http://www.cnblogs.com/libin-1/p/6756393.html 1. new Set() 可能有人知道ES6中提供了 ...

  2. 网页3D效果库Three.js初窥

    网页3D效果库Three.js初窥 背景 一直想研究下web页面的3D效果,最后选择了一个比较的成熟的框架Three.js下手 ThreeJs官网 ThreeJs-github; 接下来我会陆续翻译 ...

  3. HTML5 CSS3 专题 :诱人的实例 3D旋转木马效果相册

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/32964301 首先说明一下创意的出处:http://www.zhangxinxu ...

  4. CSS3 @font-face实现颜色大小可控的三角效果——张鑫旭

    一.我之前介绍过的三角实现效果回顾 这里所说的三角效果之等腰直角三角形效果(等边三角形有现成字符实现,没什么好说的:还有图片实现三角众人皆知,不予以说明): 1. 字符实现三角效果关于字符实现三角我早 ...

  5. HTML5 CSS3 专题 :诱人的实例 3D旋转木马效果相冊

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/32964301 首先说明一下创意的出处:http://www.zhangxinxu ...

  6. 利用css3的text-shadow属性实现文字阴影乳白效果

    现在CSS3+html5的网页应用的越来越广泛了.很多网页中的字体同样可以用CSS3来实现炫酷的效果. 下面就介绍一下利用css3的text-shadow属性实现文字阴影乳白效果.这是在设计达人上面看 ...

  7. Material Design Reveal effect(揭示效果) 你可能见过但是叫不出名字的小效果

    Material Design Reveal effect(揭示效果) 你可能见过但是叫不出名字的小效果 前言: 每次写之前都会来一段(废)话.{心塞...} Google Play首页两个tab背景 ...

  8. weui 多网页切换效果分析

    weui的文档写的不怎么详尽,简单的来讲WeUI 为微信 Web 服务量身设计的h5框架. WeUI是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户 ...

  9. 使用chrome查看网页上效果的实现方式

    使用chrome查看网页上效果的实现方式 chrome是一个极为强大的工具,很多时候,我们不知道一个效果怎么实现的,我们完全可以找到响应的网页,然后找到其html文件,和js文件,查看源码,获得其实现 ...

随机推荐

  1. 解决Sharepoint每天第一次打开速度慢的问题

    每天第一次打开Sharepoint的网站会非常慢,下面是解决这个问题的几个方法. 添加crl.microsoft.com到Hosts文件,IP地址指向服务器本机. 允许服务器直接连接到crl.micr ...

  2. Android SDK Manager无法下载的问题

    Android SDK Manager 你无法更新了. 现在这里有一个解决方案,如下. 1.启动 Android SDK Manager ,打开主界面,依次选择「Tools」.「Options...」 ...

  3. sublime: useful commands

    CMD+R go to function in current file CMD+Option+Down find function definition in another file (from ...

  4. 安卓开发_浅谈Service

    一.Service(服务) Service是Android程序中四大基础组件之一,它和Activity一样都是Context的子类,区别在于它没有UI界面,是在后台运行的组件. public abst ...

  5. 关于停止AsyncTask和Thread的问题

    在java的线程中,没有办法停止一个正在运行中的线程.在Android的AsyncTask中也是一样的.如果必须要停止一个线程,可以采用这个线程中设置一个标志位,然后在线程run方法或AsyncTas ...

  6. UITableView删除添加和移动

    #import "RootTableViewController.h" @interface RootTableViewController () @property (nonat ...

  7. Struts2(十五)实现文件上传

    一.导入包 需要将commons-fileupload和commons-io包和struts包一起导入 实现步骤: 在Jsp页面实现客户端选择上传文件 配置Struts.xml,拦截器会自动接收上传的 ...

  8. iOS--页面间的代理传值(属性、代理(委托)、代码块、单例、通知)

    (一)属性传值 (二)代理(委托)传值 代理传值 适用于 反向传值 (从后往前传) 1.1 创建协议 及协议方法 在反向传值的页面(SecondViewController)中 1.2 创建协议类型的 ...

  9. javascript中的 cookie对象

    Cookie 对象 是一种以文件(Cookie文件)的形式保存在客户端硬盘的Cookies文件夹中的数据信息(Cookie数据).Cookie文件夹中的用户数据信息(Cookie数据).Cookie文 ...

  10. JDK中的并发bug?

    最近研究Java并发,无意中在JDK8的System.console()方法的源码中翻到了下面的一段代码: private static volatile Console cons = null; / ...