CSS实现简单Hover动画

最新推荐文章于 2024-07-29 16:38:29 发布

YannC97

最新推荐文章于 2024-07-29 16:38:29 发布

阅读量8.4k

点赞数 2

分类专栏：前端文章标签： CSS hover transform transition css动画

本文链接：https://blog.csdn.net/Chen_yang123/article/details/81592049

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

#CSS实现简单Hover动画

这是第二次制作网页相关的东西，是跟着慕课教程上做的。总之看来看来还有很长一条路要走啊。先看今天的成果：
这里写图片描述

代码部分，css样式我就放在了html文件里面了：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>	CSS效果</title>
</head>
<style>
  body{background:#CCC;}
  .demo ,.mask ,.img ,.border{width:500px;height:500px;border-radius:50%;margin:0 auto;}
  .demo{display:block;position:relative;}
  .img{position:absolute;top:0;left:0;background-image:url(image/1.jpg);background-size:cover;backgroud-position:50% 50%;}
  .mask,.border{position:absolute;transition:all 0.5s ease-out;}
  .mask{text-align:center;color:rgba(0,0,0,0);}
  .info{margin-top:50%;transform:translateY(-50%);}
  .border{border:10px solid #FFF;border-top-color:#06F;border-left-color:#06F;box-sizing:border-box;}
  .demo:hover .mask{background-color:rgba(6,6,6,0.5);color:rgba(225,225,225,1);}
  .demo:hover .border{transform:rotate(180deg);border-top-color:#009;border-left-color:#009;}
  .demo:hover .img{background-image:url(image/2.jpeg);}
</style>
<body>
<a href="#" class="demo">
  <div class="img"></div>
  <div class="mask">
    <div class="info">
      <h1>Beautiful Day</h1>
      <p>Learn CSS Hover</p>
    </div>
   </div>
    <div class="border"></div>
</a>
</body>
</html>

代码很简单，主要是以下几个点。
a:hover{...}表示鼠标放在某个元素上面时的css样式，它可以用在所有元素上，不只是链接。链接a元素相关的有关的：
a:link{...}链接未访问时的样式
a:visited{...}链接访问后的样式
a:active{...}链接被选中时候的样式
注释：为了产生预期的效果，在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后！！
注释：为了产生预期的效果，在 CSS 定义中，a:active 必须位于 a:hover 之后！！