css3 transition 简易动画

最新推荐文章于 2024-04-25 16:16:15 发布

zhangkeke_可可moon

最新推荐文章于 2024-04-25 16:16:15 发布

阅读量845

点赞数

分类专栏： css transition 文章标签： css3 transition 按钮动效

本文链接：https://blog.csdn.net/zhangkeke_/article/details/82222832

版权

css 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

transition

1 篇文章 0 订阅

订阅专栏

今天分享下用css3 的transition属性做的简易小demo,虽然简单，但用在一些官网类的项目中还是很实用滴哦~~~

transition属性有：

值	描述
transition-property	规定设置过渡效果的 CSS 属性的名称。
transition-duration	规定完成过渡效果需要多少秒或毫秒。（必须）
transition-timing-function	规定速度效果的速度曲线。
transition-delay	定义过渡效果何时开始。

直接上代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3鼠标悬停边框线条动画按钮DEMO演示</title>

<style>
   body{background:#F2F2F2}
   .btn{
      margin-top: 20px;
      position:relative;
      left:50%;
      margin-left:-40px;
      display: inline-block;
      width:80px;
      heigth:40px;
      line-height: 40px;
      border:none;
      background:#0f0f0f;
      text-align: center;
      color:#fff;
      opacity: 0.75; 
   }
   span.line{
      display: inline-block;
      background:red;
      position: absolute;
      bottom: 0px;
      z-index: 100;
      left: 0;
      width:0px;
      height:3px;
      transition:width 300ms ease-out;
      -webkit-transition:width 300ms ease-out;
      -o-transition: width 300ms ease-out;
      -moz-transition: width 300ms ease-out;
   }
   .btn:hover{
      opacity: 1;
      transition:opacity 500ms linear;
   }
   .btn:hover span{
      width:80px;
      transition:width 300ms ease-in;
      -webkit-transition:width 300ms ease-in;
      -o-transition:width 300ms ease-in;
      -moz-transition:width 300ms ease-in;
   }

</style>
</head>
<body>
   <div class="button_box">
      <a class="btn"></span>按钮<span class="line lineR"></span></a>
   </div>
</body>
</html>

上传不了动图，只能上代码了，直接复制下来看效果吧！

zhangkeke_可可moon

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css3 transition 简易动画

今天分享下用css3 的transition属性做的简易小demo,虽然简单，但用在一些官网类的项目中还是很实用滴哦~~~transition属性有：值描述 transition-property 规定设置过渡效果的 CSS 属性的名称。 transition-duration 规定完成过渡效果需要多少秒或毫秒。（必须） transition-timin...
复制链接

扫一扫