css实现鼠标悬停效果

感觉css的话，原来的我认为很难学，挺生涩的，但是认真看了以后，感觉css很有意思，能写出很多好看的样式，只要多做几个例子，其中有哪个属性不明白，自己查明白，然后把做出来的东西从头到尾顺一遍，思路就会清晰一些，css基础的东西挺简单，就看你会不会利用回了。

html代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="css/鼠标悬停.css">
</head>
<body><div class="main"><div class="item"><div class="info"><h3>use what you have</h3><p>by Angela Duncan <a href="#">view on more</a></p></div></div><div class="item"><div class="info"><h3>use what you have</h3><p>by Angela Duncan <a href="#">view on more</a></p></div></div><div class="item"><div class="info"><h3>use what you have</h3><p>by Angela Duncan <a href="#">view on more</a></p></div></div></div>
</body>
</html>

css代码：

*{margin: 0;padding: 0;box-sizing: border-box;
}a{text-decoration: none;
}body,html{width: 100%;height: 100%;
}/* body{background: #f9f9f9 url(../images/bd.jpg);
} */
.main{width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;
}
.item{position: relative;width: 220px;height: 220px;margin: 10px;background: url(../images/4.jpg) no-repeat;border-radius: 50%;box-shadow: inset 0 0 0 16px rgba(255,255,255,.6),0 1px 2px rgba(0,0,0,.1);transition: all .4s ease-in-out;
}
.item:nth-child(2){background: url(../images/2.jpg) no-repeat;
}
.item:nth-child(3){background: url(../images/3.jpg) no-repeat;
}
.info{opacity: 0;transform: scale(0);position: absolute;width: 100%;height: 100%;background: rgba(63, 147, 147,.8);border-radius: 50%;text-align: center;transition: all .4s ease-in-out;
}
.info h3{height: 140px;font-size: 22px;color: #fff;margin: 0 30px;padding-top: 45px;text-transform: uppercase;letter-spacing: 2px;}
.info p{opacity: 0;font-size: 12px;color: #fff;/* 文字倾斜 */font-style: italic;margin: 0 30px;padding-top: 10px;border-top: 1px solid rgba(255,255,255,.5);transition: all .4s ease-in-out .4s;
}
.info a{display: block;color:#fff ;font-style: normal;
}
.item:hover{box-shadow: inset 0 0 0 1px rgba(255,255,255,.1),0 1px 2px rgba(0,0,0,.1);
}
.item:hover .info{opacity: 1;transform: scale(1);
}.item .info p{opacity: 1;
}
.info p a:hover{color: #fff222;
}

css实现鼠标悬停效果相关推荐

HTML+CSS鼠标悬停效果
HTML+CSS实现鼠标悬停效果 HTML: <link href="style.css" rel="stylesheet"><a class ...
CSS实现鼠标悬停图片时的边框变色效果
CSS实现鼠标悬停图片时的边框变色效果,CSSS双边框,鼠标悬停变色效果,用CSS实现的图片双边框效果,鼠标悬停经过时显示背景色,很简单的效果,网上常见,代码不复杂,用的是一些基本的CSS知识. &l ...
html css怎样让鼠标悬停延时,鼠标悬停效果csscss鼠标悬停效果怎么写
以上需要的文件及图片无标题文档 /* 公用 */ body{ margin:0; overflow:hidden;} img{ display:block;} span{ display:block ...
css 缩放_【开发小技巧】06—如何使用CSS在鼠标悬停时缩放图像？
英文 | https://www.geeksforgeeks.org/how-to-zoom-an-image-on-mouse-hover-using-css/?ref=rp翻译 | web前端开发 ...
html标题前圆圈样式,漂亮的css3圆形鼠标悬停效果实例
本文将给大家介绍一个漂亮的css3圆形鼠标悬停效果,这个效果在产品展示或列表图片中都可以应用,可以说是应用范围挺广泛的.关于鼠标悬停效果,你还可以看看另一篇文章<使用css转换和3d旋转的圆形鼠 ...
十分钟实现鼠标悬停效果，CSS3悬停效果
视频:https://www.bilibili.com/video/BV1cy4y1D7mz 十分钟实现鼠标悬停效果,CSS3悬停效果 font awesome 图标使用方法参考网站: https:/ ...
html 鼠标悬停效果,30个帅气的鼠标悬停效果
30个帅气的鼠标悬停效果 3月 26, 2015 评论 (1) Sponsor 在网页设计中,鼠标悬停效果常用于文字链接.产品图片.按钮等地方,然而随着CSS3的强大,鼠标Hover效果可以变得有更多 ...
【每日一练】109—一款炫酷按钮的鼠标悬停效果
文 | 杨小爱写在前面按钮,几乎是任何一个项目都会用到的一个组件,因此,今天,我们来练习一个好玩的鼠标效果,具体效果,请看下面的GIF截图: 我们看完了最终效果,现在,我们一起来看一下它的源码. ...
iHover鼠标悬停效果包推荐
前端开发whqet,csdn,王海庆,whqet,前端开发专家今天推荐一个鼠标悬停效果包,大家可以通过研读效果提高自己的水平,也可以直接用在自己的项目中. 1.引入 IHover是一个纯CSS3驱动 ...

css实现鼠标悬停效果

css实现鼠标悬停效果相关推荐

最新文章

热门文章