因为临近期末,总有太多事情需要处理,间隔了好长时间没有更新博客,你们懂的~~~~
最近实训,接触了下H5,发现还挺好玩的,在此与大家分享一下~~~~
话不多说,直接上例子,对于某些属性,例子中有注释!
例子1:(由于只是小例子,就没有将css属性专门提出来,请见谅!)
<!DOCTYPE html>
<!--过渡(transition)-->
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.demo1 {
top: 200px;
width: 100px;
height: 100px;
background-color: cyan;
}
.demo1:hover {
/*translateX水平向右移动*/
/*rotate旋转360度*/
/*transform中的scale放大会无视挤压, 不是宽高的真正放大*/
transform: translateX(100px) rotate(360deg) scale(2);
/*Chrome和Safari浏览器适配*/
-webkit-transform: translateX(100px) rotate(360deg) scale(2);
/*fixfox*/
-moz-transform: translateX(100px) rotate(360deg) scale(2);
/*IE*/
-ms-transform: translateX(100px) rotate(360deg) scale(2);
/*transition是设置缓慢过渡的,all指的是所有属性都赋予过渡效果,
过渡时间延续1s,ease表示过渡类型是平滑过渡*/
transition: all 1s;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
/*阴影*/
/*横线10px 纵向10px 毛边5px*/
box-shadow: 10px 10px 5px black;
-webkit-box-shadow: 10px 10px 5px black;
}
</style>
</head>
<body>
<!--过渡:css样式之间的缓慢切换-->
<div class="demo1"></div>
</body>
</html>
效果就不截图了,大家可以复制运行看看效果。
例子2:
效果图如上,所以可以将其分为5个div,中间为按钮,四周为线。代码如下:
<!DOCTYPE html>
<!--按钮四周划线-->
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
background: black;
}
.box{
width:200px;
height: 50px;
border:3px solid white;
margin: 100px auto;
position: relative;
}
.line{
background-color: white;
position: absolute;
transition: all 0.5s;
}
.line2 p{
color: white;
font-size: 20px;
font-weight: bolder;
text-align: center;
line-height: 50px;
}
.lineTop{
width: 0;
height: 3px;
background: white;
top: -3px;
left:-200px;
}
.box:hover .lineTop{
width: 200px;
left: 0px;
transition: all 1s;
-webkit-transition: all 1s;
}
.lineBottom{
width: 0;
height: 3px;
background: white;
top:50px;
right:-200px;
}
.box:hover .lineBottom{
width: 200px;
right: 0px;
transition: all 1s;
-webkit-transition: all 1s;
}
.lineLeft{
width: 3px;
height: 0;
background: white;
top:-50px;
left: 200px;
}
.box:hover .lineLeft{
height: 50px;
top: 0px;
transition: all 1s;
-webkit-transition: all 1s;
}
.lineRight{
width: 3px;
height: 0;
background: white;
bottom:-50px;
left: -3px;
}
.box:hover .lineRight{
height: 50px;
bottom: 0px;
transition: all 1s;
-webkit-transition: all 1s;
}
</style>
</head>
<body>
<div class="box">
<div class="item">
<div class="line lineTop"></div>
<div class="line lineBottom"></div>
<div class="line2">
<p>游戏机</p>
</div>
<div class="line lineLeft"></div>
<div class="line lineRight"></div>
</div>
</div>
</body>
</html>
例子3:
相信照片墙大家都不陌生,如图所示:
鼠标滑过照片,照片旋转一定角度放大,实现效果图如下:
代码如下:
<!DOCTYPE html>
<!--照片墙-->
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
background-color: linen;
}
/*只定义图片宽度或者高度就可以按比例缩小*/
img{
width: 200px;
border: 4px solid lightyellow;
}
#img2, #img4{
transform: rotate(10deg);
}
#img1, #img3{
transform: rotate(-10deg);
}
#picture{
width: 1000px;
height: 400px;
margin: 100px auto;
}
.demo1{
position: relative;
z-index: 4;
}
/*由于本人使用 的google浏览器所以就不写适配其他浏览器的了*/
#picture .demo1 img:nth-child(1):hover,
#picture .demo1 img:nth-child(3):hover{
/*右移100px,旋转20度,放大1.5倍*/
transform: translateX(50px) rotate(-20deg) scale(1.2);
/*chrome和Safari浏览器适配*/
-webkit-transform: translateX(50px) rotate(-20deg) scale(1.2);
transition: all 1s;
-webkit-transition: all 1s;
position: relative;
/*z-index越大出现在越上面*/
z-index: 5;
/*阴影*/
/*横线5px 纵向5px 毛边2px*/
box-shadow: 5px 5px 2px lightgray;
-webkit-box-shadow: 5px 5px 2px lightgray;
}
#picture .demo1 img:nth-child(2):hover,
#picture .demo1 img:nth-child(4):hover{
/*右移100px,旋转20度,放大1.5倍*/
transform: translateX(-30px) rotate(20deg) scale(1.2);
/*chrome和Safari浏览器适配*/
-webkit-transform: translateX(-30px) rotate(20deg) scale(1.2);
transition: all 1s;
-webkit-transition: all 1s;
position: relative;
/*z-index越大出现在越上面*/
z-index: 5;
/*阴影*/
/*横线5px 纵向5px 毛边2px*/
box-shadow: 5px 5px 2px lightgray;
-webkit-box-shadow: 5px 5px 2px lightgray;
}
</style>
</head>
<body>
<!--过渡:css样式之间的缓慢切换-->
<div id="picture">
<div class="demo1">
<img id="img1" src="img/1.jpg"/>
<img id="img2" src="img/2.jpg"/>
<img id="img3" src="img/3.jpg"/>
<img id="img4" src="img/4.jpg"/>
</div>
</div>
</body>
</html>
例子4:
经常在商品展示的时候可以看到如图所示的展示方式:
鼠标移至某一商品上,该商品所占宽度会拉伸,图片也会随之放大,同时出现一些介绍话语之类。实现效果图如下:
代码如下:
<!DOCTYPE html>
<!--商品展示-->
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.box {
display: inline-block;
border: 2px solid lightgray;
}
.box .item {
width: 200px;
height: 200px;
float: left;
background-color: lightyellow;
border-right: 2px dashed lightgray;
position: relative;
transition: all 1s;
-webkit-transition: all 1s;
}
.box .item:last-child {
border-right: none;
}
/*第1个元素*/
.box .item p:nth-child(1) {
position: absolute;
color: blue;
top: 10px;
left: 10px;
}
/*第2个元素*/
.box .item p:nth-child(2) {
position: absolute;
color: red;
top: 30px;
left: 10px;
}
/*第3个元素*/
.box .item p:nth-child(3) {
position: absolute;
color: green;
top: 50px;
left: 10px;
}
/*第4个元素*/
.box .item p:nth-child(4) {
position: absolute;
color: palevioletred;
top: 70px;
left: 10px;
/*透明度*/
opacity: 0;
}
.box .item img {
position: absolute;
width: 50%;
bottom: 0;
right: 0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.box .item:hover {
width: 300px;
background-color: white;
}
.box .item:hover img {
width: 70%;
}
.box .item p {
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.box .item:hover p:nth-child(4) {
opacity: 1;
top: 150px;
}
</style>
</head>
<body>
<div class="box">
<div class="item">
<p>时装团</p>
<p>节日礼品</p>
<p>一折起</p>
<p>全场甩卖</p>
<img src="img/1.png" />
</div>
<div class="item">
<p>时装团</p>
<p>节日礼品</p>
<p>一折起</p>
<p>全场甩卖</p>
<img src="img/1.png" />
</div>
<div class="item">
<p>时装团</p>
<p>节日礼品</p>
<p>一折起</p>
<p>全场甩卖</p>
<img src="img/1.png" />
</div>
</div>
</body>
</html>
其中所有代码需要的图片,你们可以找其他图片代替,看看运行效果。
写在最后:若有错误,望指正。
写给自己:不能因为自己忙,而放弃学习,慢慢积累的过程才最重要。