5个很常用的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:0;-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:2;
}
.banner a:hover + span{-webkit-transform:rotate(360deg);opacity:1;
}
.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:0;-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:2;
}
.banner1 a:hover + span{-webkit-transform:translateX(40px);opacity:1;
}
.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:0;-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:1;-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:0;
}
.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;
}

5个很常用的CSS3网页小实例相关推荐

HTML5+CSS3+JQuery小实例：简单又令人惊艳的hover效果登录界面
今天给大家带来一个小案例,HTML5+CSS3+JQuery实现简单又令人惊艳的hover效果登录界面. 先看效果: 源代码: <div class="container"& ...
html loader使用方法,webpack中loader的使用方法，以及几个常用loader的应用小实例
loader:是webpack用来预处理模块的,在一个模块被引入之前,会预先使用loader处理模块的内容. 可能,你会遇到当你用webpack打包的时候,提示你需要一个loader来处理文件,那we ...
HTML5+CSS3+JS小实例：仿制网易云音乐网站的轮播图
实例:仿制网易云音乐网站的轮播图技术栈:HTML+CSS+JS 字体图标库:font-awesome 效果: 源码: <!DOCTYPE html> <html><he ...
HTML5+CSS3+JS小实例：始终飞向鼠标的纸飞机
实例:始终飞向鼠标的纸飞机技术栈:HTML+CSS+JavaScript 效果: 源码: <!DOCTYPE html> <html><head><meta ...
HTML5+CSS3+JS小实例：旋转的圣诞树
实例:旋转的圣诞树技术栈:HTML+CSS+JS 效果: 源码: <!DOCTYPE html> <html><head><meta http-equiv ...
HTML5+CSS3+JS小实例：倒计时动画特效
实例:倒计时动画特效技术栈:HTML+CSS+JS 效果: 源码: [html] <!DOCTYPE html> <html><head><meta htt ...
本人常用的一些编码小Tips(虽然不多，但很好用)
本人常用的一些编码小Tips 我是可爱的目录本人常用的一些编码小Tips 一.概述二.Windows的一些常用的快捷键 (一).Win + others 类型 (二).Alt + others 类 ...
Pits - CSS3+JS网页小游戏
src="http://www.sfg.name/apps/pits/" width="600" height="300"> 玩游戏 ...
HTML5 + css3 + js 网页设计作业网页小游戏
用HTML5 + css3 + js 做的一个翻图片的网页小游戏,挺有意思的吧! 因为上网页课要交一个个人的网页设计作业,时间挺紧的,记得以前玩游戏偶尔看到一个翻转图片的小游戏,就想模仿着做一个! 目 ...

5个很常用的CSS3网页小实例

5个很常用的CSS3网页小实例

第一种效果：

第二种效果：

第三种效果：

第四种效果：

第五种效果

5个很常用的CSS3网页小实例相关推荐

最新文章

热门文章