CSS实现简单Hover动画

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:linka:visited 之后!!
注释:为了产生预期的效果,在 CSS 定义中,a:active 必须位于 a:hover 之后!!

transfrom:该属性允许我们对元素进行旋转、缩放、移动或倾斜。
具体可以参考CSS3 transform 属性。这里用了transform:rotate(180deg);表示对边框进行180度的旋转。

transition:是个简写,有四个参数,表示转换时的过渡属性。具体可以参考CSS3 transition 属性。这里用了transition:all 0.5s ease-out;意思是对mask和border中的所有属相进行转换,间隔0.5秒,以慢速结束的过渡效果。

另外出现了border-sizing:border-box;参考CSS3 box-sizing 属性。这里的意思是在设定的宽高中进行边框的绘制。


洗洗睡吧!

阅读更多
个人分类: 前端
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭