基于css3的鼠标移动动画显示效果
来源:互联网 发布:windows手动更新 编辑:程序博客网 时间:2024/06/11 08:32
基于css的鼠标经过动画显示详情特效。这款实例鼠标经过的时候基于中间动画放大,效果非常不错,效果图如下:
html代码:
<html>
<head><title>基于css3的鼠标移动动画显示效果</title>
<link rel="stylesheet" href="css/demo1.css"/>
<meta charset="utf-8"/>
</head>
<body>
<ul class="blocks">
<li>Vakmanschap en ambacht<div class="popup">
<span>
<h3>Vakmanschap en ambacht</h3>
Ervaring is niet te koop, het is een kwestie van veel doen. Met aandacht en passie.
Dat staat bij ons centraal.</span></div>
</li>
<li>Begeleiding op het werk<div class="popup">
<span>
<h3>Begeleiding op het werk</h3>
Scholing of diploma’s vormen de basis voor onze collega’s. Het bewijs wordt echter
geleverd in de praktijk. Vandaar dat wij onze mensen ook begeleiden tijdens hun
werkzaamheden. Zo houden we elkaar scherp en maken we optimaal gebruik van onze
kennis, ervaring en talenten.</span></div>
</li>
<li>Leren van elkaar<div class="popup">
<span>
<h3>Leren van elkaar</h3>
Kennis en ervaring delen en vermenigvuldigen houdt ons scherp en slim. Mensen vinden
het leuk om ‘weetjes’ te delen, wij stimuleren onze mensen dit te doen, je bent
immers nooit te ervaren om te leren.</span></div>
</li>
<li>Vaste ploeg<div class="popup">
<span>
<h3>Vaste ploeg</h3>
Op elk object werken we met vaste collega’s en ploegen. Ze kennen het pand, de omgeving
en de mensen, en kunnen daardoor ‘onzichtbaar’ hun werk doen. Bovendien geeft het
uw mensen een vertrouwd gevoel dat er een bekende aan het werk is, die ze ook met
een incidenteel verzoek kunnen benaderen.</span></div>
</li>
<li>RI&E<div class="popup">
<span>
<h3>RI&E</h3>
Welzijn, vitaliteit en veiligheid van onze en uw mensen staan centraal. Bij aanvang
van ieder nieuw project voeren we samen met onze opdrachtgever een RI&E uit. Daarmee
brengen we alle risico’s in kaart, opdat we ons werk veilig en goed kunnen doen.
Desgewenst brengen wij advies uit over verbeterpunten, zodat er volgens de regels
gewerkt kan worden.</span></div>
</li>
<li>Direct contact<div class="popup">
<span>
<h3>Direct contact</h3>
Glas&Rein is een platte organisatie met korte lijnen. Zowel met onze opdrachtgevers
als met onze mensen op locatie. We zijn erop ingesteld om snel in te kunnen spelen
op wijzigende omstandigheden en aanvragen. Ons belang is en blijft iedereen tevreden
en actief te houden.</span></div>
</li>
</ul>
</body>
</html>
css代码:
html
{
font-family: 'Noto Sans' , serif;
}
.blocks
{
margin: auto;
max-width: 1070px;
padding: 0;
}
.blocks li
{
color: #fff;
background-color: #2196F3;
cursor: default;
float: left;
list-style: none;
margin: 1%;
padding: 60px 0;
position: relative;
text-align: center;
-webkit-transition: .3s cubic-bezier(.3,0,0,1.3);
transition: .3s cubic-bezier(.3,0,0,1.3);
width: 31%;
border-radius: 4px;
font-weight: bold;
}
.blocks li:hover
{
-webkit-transform: scale(.7);
-ms-transform: scale(.7);
transform: scale(.7);
z-index: 3000;
}
.popup
{
background-color: inherit;
color: #fff;
height: 100%;
width: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
padding: 15px;
border-radius: 4px;
-webkit-transition: .3s cubic-bezier(.3,0,0,1.37);
transition: .3s cubic-bezier(.3,0,0,1.37);
}
.popup span
{
font-size: 12px;
font-weight: normal;
left: 0;
padding: 15px 25px;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.popup h3
{
font-size: 13px;
margin: 0 0 5px;
padding: 0;
}
.blocks li:hover .popup
{
opacity: 1;
-webkit-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
box-shadow: 0 0 10px 2px rgba(0,0,0,.4);
}
{
font-family: 'Noto Sans' , serif;
}
.blocks
{
margin: auto;
max-width: 1070px;
padding: 0;
}
.blocks li
{
color: #fff;
background-color: #2196F3;
cursor: default;
float: left;
list-style: none;
margin: 1%;
padding: 60px 0;
position: relative;
text-align: center;
-webkit-transition: .3s cubic-bezier(.3,0,0,1.3);
transition: .3s cubic-bezier(.3,0,0,1.3);
width: 31%;
border-radius: 4px;
font-weight: bold;
}
.blocks li:hover
{
-webkit-transform: scale(.7);
-ms-transform: scale(.7);
transform: scale(.7);
z-index: 3000;
}
.popup
{
background-color: inherit;
color: #fff;
height: 100%;
width: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
padding: 15px;
border-radius: 4px;
-webkit-transition: .3s cubic-bezier(.3,0,0,1.37);
transition: .3s cubic-bezier(.3,0,0,1.37);
}
.popup span
{
font-size: 12px;
font-weight: normal;
left: 0;
padding: 15px 25px;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.popup h3
{
font-size: 13px;
margin: 0 0 5px;
padding: 0;
}
.blocks li:hover .popup
{
opacity: 1;
-webkit-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
box-shadow: 0 0 10px 2px rgba(0,0,0,.4);
}
0 0
- 基于css3的鼠标移动动画显示效果
- 用css3实现鼠标移入在原来的层上面显示另一个层的动画效果
- css3的动画效果
- CSS3的动画效果
- 【CSS3】多款炫酷鼠标悬停图文动画效果
- h5新标签和css3动画制作一个鼠标悬停的动画效果
- CSS3的动画效果实现
- CSS3的动画效果@keyframes
- IE 下VML动画的奇怪现象:GWTCanvas基于定时器的图形动画当鼠标移动时停止动画效果(直接用VML写代码效果也一样)
- CSS3动画效果,鼠标滑入时,文字放大缩小
- 6种css3鼠标滑过动画效果
- 超慢速移动动画使用CSS3实现流畅效果
- 超慢速移动动画使用CSS3实现流畅效果
- CSS3实现鼠标移动到图片上图片变大(缓慢变大,有过渡效果,放大的过程是有动画过渡的,这个过渡的时间可以自定义)
- CSS3实现鼠标移动到图片上图片变大(缓慢变大,有过渡效果,放大的过程是有动画过渡的,这个过渡的时间可以自定义)
- CSS3实现鼠标移动到图片上图片变大(缓慢变大,有过渡效果,放大的过程是有动画过渡的,这个过渡的时间可以自定义)
- css3鼠标悬停效果
- Css3基于 box-shadow的鼠标悬停
- gallery的onScroll监听
- 算法:塔防游戏中的路径寻找
- 有趣的surface函数
- 黑马程序员-运算符
- javascript高效的判断浏览器种类和版本
- 基于css3的鼠标移动动画显示效果
- 图像去雾原理【总结】
- [水题][第一阶段-简单操作][HDOJ-2003]求绝对值
- 我所理解的励志书
- C++ 结构体(三)
- 浅谈CSS的伪类与伪元素
- 3_1_奇偶个数
- 阻塞队列(BlockingQueue)
- uva1493 - Draw a Mess 并查集路径压缩