边框效果如下：鼠标移到下面方形，就有效果

 

要是没有效果，点这个：https://murenziwei.github.io/testGit/Untitled1.html

正如你所看到的，这边框颜色只用纯css3就做出来了，HTML忽略..

要想做出此效果，就得深入理解css3的transition过渡属性；我直接贴出代码，并注释：

<!DOCTYPE HTML>

<html>

<head>

<title>纯css竟可以做出边框这样长宽度的过渡效果</title>

<style>

  .customS{

      width:200px;height:200px;

      background-color:#ccc;

      position:relative;

  }

  .customS:before{

      content:"";

      display:block;

      position:absolute;

      left:0;

      top:0;

      border:2px solid transparent;

      width:0;

      height:0;

      box-sizing:border-box;

      /*
      css3的transition是有兼容性的，所以尽量用现代浏览器,也可以添加-webkit-、-o-、-ms-、-moz-在属性前面，例如：
      -webkit-transition:width 1s linear 2s;
      */

      /*

       我用的transition是个简化属性，值有4个。

       语法：

       transition：property duration timing-function delay

       ||(等同于四句属性)

       transition-property:val||all//注释：设置过渡效果的css属性的名称，如果设置all就是指全部css属性

       transition-duration:val//注释：完成过渡效果需要多少秒或多少毫秒，例如：transition-duration:1s或者是1000ms

       transition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-

bezier(n,n,n,n);//注释：过渡效果的速度曲线？

        linear    规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。

        ease    规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。

        ease-in    规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。

        ease-out    规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。

        ease-in-out    规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。

        cubic-bezier(n,n,n,n)    在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

       transition-delay:val//注释：定义过渡效果从何时开始

      */

      transition:border-color 0s ease-in 0.8s,width 0.2s ease-in 0.6s,height 0.2s ease-in 0.4s;

  }

  .customS:after{

      content:"";

      display:block;

      position:absolute;

      right:0;

      bottom:0;

      width:0;

      height:0;

      border:2px solid transparent;

      box-sizing:border-box;

      /*

        鼠标移开目的地，以下面的transition属性为准来过渡，请好好理解下面的属性!一旦弄懂了它，就会做了

      */

      transition:border-color 0s ease-out 0.4s,width 0.2s ease-out 0.2s,height 0.2s ease-out 0s;

  }

  .customS:hover:after,.customS:hover:before{

      width:100%;

      height:100%;

  }

  .customS:hover:before{

      border-top-color:red;

      border-right-color:red;

      transition:border-color 0s ease-out 0s,width 0.2s ease-out 0s,height 0.2s ease-out 0.2s;

  }

  .customS:hover:after{

      border-bottom-color:red;

      border-left-color:red;

      /*

        鼠标移入目的地，以下面的transition属性为准来过渡，请好好理解下面的属性!一旦弄懂了它，就会做了

      */

      transition:border-color 0s ease-out 0.4s,width 0.2s ease-out 0.4s,height 0.2s ease-out 0.6s;

  }

  </style>

</style>

</head>

<body>

<div class="bAn customS">

</div>

</body>

</html>

纯css竟可以做出边框这样长宽度的过渡效果的更多相关文章

  1. 【纯css】左图右文列表，左图外框宽度占一定百分比的正方形,右上下固定，右中自动响应高度。支持不规则图片。

    查看演示 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF- ...

  2. 纯CSS实现tooltip提示框，CSS箭头及形状之续篇--给整个tooltip提示框加个边框

    在前面一篇中我们介绍了纯CSS实现tooltip提示框,通俗的讲也就是CSS箭头及形状 不过注意一点是,他始终是一个元素,只是通过CSS实现的,今天我们要说的是给这个“tooltip提示框”整体加一个 ...

  3. 3.纯 CSS 创作一个容器厚条纹边框特效

    原文地址:3.纯 CSS 创作一个容器厚条纹边框特效 没有啥好点子呀,不爽 HTML代码: <div class="box"> <div class=" ...

  4. 纯css实现长宽等比例的div

    现代网站页面基本都需要响应式,一个div的长宽往往我们都设置为百分之多少,这个百分之是相对于父容器动态计算的 这样在浏览器宽度变化之后,我们的元素也能自动更新长宽.例如:我们在页面上摆了一个div,这 ...

  5. 纯CSS打造银色MacBook Air（完整版）

    上一篇:<selection伪元素小解> ::selection{ background:blue; color:red; }p{font-size:14px;} 作者主页:myvin 博 ...

  6. 纯CSS实现各类气球泡泡对话框效果

    原文 纯CSS实现各类气球泡泡对话框效果 一.关于纯CSS实现气泡对话框 首先,来张大图: 上边这张黄黄的,大大的,圆圆的,有个小尾巴,文字内容有些YY的图片,就是使用纯CSS实现的气泡对话框效果,一 ...

  7. 纯 CSS 实现波浪效果！

    一直以来,使用纯 CSS 实现波浪效果都是十分困难的. 因为实现波浪的曲线需要借助贝塞尔曲线. 而使用纯 CSS 的方式,实现贝塞尔曲线,额,暂时是没有很好的方法. 当然,借助其他力量(SVG.CAN ...

  8. 纯CSS实现蜂窝六边形的个性相册

    概述 纯CSS实现蜂窝六边形的个性相册 详细 代码下载:http://www.demodashi.com/demo/12804.html 此案例主要用到CSS3的 transform 和 transi ...

  9. 手把手教你打造一个纯CSS图标库

    来,干了这碗安利 写这篇文章的目的其实就是为了安利一下我的图标库:iconoo,所以,开门见山,star吧少年少妇们!(这样的我是不是应该要加个github互粉的团伙了?) 主题说完了,下面进入正题. ...

随机推荐

  1. ASP.NET Web API 框架研究 服务容器 ServicesContainer

    ServicesContainer是一个服务的容器,可以理解为—个轻量级的IoC容器,其维护着一个服务接口类型与服务实例之间的映射关系,可以根据服务接口类型获取对应的服务实例.构成ASP.NET We ...

  2. mac系统下安装Windows（7,8,10都一样的步骤）

    1.下载纯净版window10镜像文件(ISO) 注意:必须是纯净版,不是ghost版     2.打开bootcamp软件(位置:launchpad-其他) 注意:硬盘不要分区,若分过区,请合并. ...

  3. 电容器的ESR

    电容器的ESR(等效串联电阻)Equivalent Series Resistance    作为开关电源的输出整流滤波电容器,电容量往往是首要的选择,铝电解电容器的电容量完全可以满足要求,而ESR则 ...

  4. 如何在js里引用php变量

    如何在js里面引用php的变量 php代码------------------------------------------- js代码------------------------------- ...

  5. Android-Java多线程通讯(生产者 消费者)&10条线程对-等待唤醒/机制的管理

    上一篇博客 Android-Java多线程通讯(生产者 消费者)&等待唤醒机制 是两条线程(Thread-0 / Thread-1) 在被CPU随机切换执行: 而今天这篇博客是,在上一篇博客A ...

  6. nginx 访问频率控制

    Nginx访问频率控制 HTTP服务器的吞吐率(单位时间吞吐量)通常有一个上限,尤其是普通配置的机器,在带宽够的情况下,用压测工具经常能把服务器压出翔,为了线上环境稳定性,防止恶意攻击影响到其他用户, ...

  7. C# 嵌入dll

    在很多时候我们在生成C#exe文件时,如果在工程里调用了dll文件时,那么如果不加以处理的话在生成的exe文件运行时需要连同这个dll一起转移,相比于一个单独干净的exe,这种形式总归让人不爽,那么有 ...

  8. dev gridview自动列宽和单元、行、checkbox选中和多选

    #region 自动列宽 for (int I = 0; I < gridView1.Columns.Count; I++) { this.gridView1.BestFitColumns(); ...

  9. 关于C++中字符串与数字的互相转换

    方法搬自博客:  Qt数据类型转换  侵删 1. 把QString转换为double类型 //法一: QString str="123.45"; double val=str.to ...

  10. 复习 C++ 中类的函数指针

    函数指针这种东西,平时工作中基本上不会用到. 那函数指针会用在哪里? 下面是一些基本的用法,根据消息号调到对应的函数: #include <iostream> #include <m ...