css3中一些常用的动画效果
2017-11-17 16:28
741 查看
1.动画效果一:鼠标放上去,后面的背景图放大到一定程度,下面的有个内容盒子,以一定的速度从下向上运动,并且盒子的背景颜色逐渐加深。
效果二:鼠标放到盒子上有一个类似于开门的效果,并且下面的背景颜色和字体的颜色会有一个渐变的过程。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.big {
width: 500px;
height: 400px;
position: relative;
overflow: hidden;
}
.big:after,.big:before {
content: "";
display: block;
width: 50%;
height: 100%;
background: rgba(0,0,0,0.4);
position: absolute;
top: 0;
transition: all 1s;
}
.big:after {
left: 0;
}
.big:before {
right: 0;
}
a {
position: absolute;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
width: 200px;
height: 200px;
border-radius: 50%;
background: rgba(0,0,0,0.7);
color: #fff;
text-decoration: none;
transition: all 1s;
}
.small {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
span {
font-size: 16px;
color: #fff;
transition: all 1s;
}
p {
font-size: 12px;
color: #fff;
text-align: center;
transition: all 1s;
}
.big:hover:after {
left: -50%;
}
.big:hover:before {
right: -50%;
}
.big:hover a {
background: yellow;
}
.big:hover span,.big:hover p {
color: red;
}
</style>
</head>
<body>
<div class="big">
<a href="#">
<div class="small">
<span>这是一个盒子</span>
<p>摄影</p>
</div>
</a>
</div>
</body>
</html>
4000
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0; padding: 0; } .big { width: 420px; height: 372px; overflow: hidden; position: relative; border: 1px solid #000; } .bigone { position: absolute; top: 0; left: 0; } .bigone .pic { width: 100%; height: 100%; overflow: hidden; } .bigone .pic img { width: 100%; height: 100%; transition: all 0.5s; } .big:hover img { transform: scale(1.5); } .bigone .dl { position: absolute; bottom: 0; left: 0; width: 100%; height: 109px; background: rgba(0,0,0,0.4); } .bigone .dl p { font-size: 30px; color: #fff; padding: 20px; } .bigtwo { width: 100%; height: 260px; position: absolute; bottom: -120px; left: 0; background: rgba(0,0,255,0); transition: all 0.5s; } .bigtwo p { font-size: 18px; color: rgba(255,255,255,0); padding: 10px; } .big:hover .bigtwo { transform: translateY(-120px); background: rgba(0,0,255,0.7); } .big:hover p { color: rgba(255,255,255,1); } </style> </head> <body> <div class="big"> <div class="bigone"> <div class="pic"> <img src="1.jpg" alt=""> </div> <div class="dl"> <p>这是一段话</p> </div> </div> <div class="bigtwo"> <p>这是遮罩层</p> </div> </div> </body> </html>
效果二:鼠标放到盒子上有一个类似于开门的效果,并且下面的背景颜色和字体的颜色会有一个渐变的过程。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.big {
width: 500px;
height: 400px;
position: relative;
overflow: hidden;
}
.big:after,.big:before {
content: "";
display: block;
width: 50%;
height: 100%;
background: rgba(0,0,0,0.4);
position: absolute;
top: 0;
transition: all 1s;
}
.big:after {
left: 0;
}
.big:before {
right: 0;
}
a {
position: absolute;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
width: 200px;
height: 200px;
border-radius: 50%;
background: rgba(0,0,0,0.7);
color: #fff;
text-decoration: none;
transition: all 1s;
}
.small {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
span {
font-size: 16px;
color: #fff;
transition: all 1s;
}
p {
font-size: 12px;
color: #fff;
text-align: center;
transition: all 1s;
}
.big:hover:after {
left: -50%;
}
.big:hover:before {
right: -50%;
}
.big:hover a {
background: yellow;
}
.big:hover span,.big:hover p {
color: red;
}
</style>
</head>
<body>
<div class="big">
<a href="#">
<div class="small">
<span>这是一个盒子</span>
<p>摄影</p>
</div>
</a>
</div>
</body>
</html>
4000
相关文章推荐
- animate.css 一些常用的CSS3动画效果
- animate.css 一些常用的CSS3动画效果
- CSS3常用动画效果
- css3常用动画效果集合01
- iOS常用的一些动画效果,UIView封装的动画,CALayer的动画等
- CABasicAnimation学习Demo 包括了一些常用的动画效果
- CABasicAnimation学习Demo 包括了一些常用的动画效果
- CSS3一些常用动画
- CABasicAnimation学习Demo 包括了一些常用的动画效果
- Silverlight开发历程—动画(线性动画一些效果)
- css3 3D动画效果
- CSS3的动画效果实现
- css3 实现一个改变元素属性实现的动画效果
- 一款css3的标签动画效果
- 纯CSS3实现的一些酷炫效果
- 利用CSS3实现文本框的清除按钮相关的一些效果
- 用CSS3制作50个超棒动画效果教程
- css3-steps()的动画渐进效果
- [CSS3]制作50个超棒动画效果教程
- css3实现的3中loading动画效果