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

 

要是没有效果，点这个：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. Maven的插件管理

    <pluginManagement> 这个元素和<dependencyManagement>相类似,它是用来进行插件管理的. 在我们项目开发的过程中,也会频繁的引入插件,所以解 ...

  2. Objective-C 对象和消息模型

    Objective-C 对象模型 首先要了解一下Objective-C中关于类和对象的定义,Cocoa中大部分对象都是NSObject的子类(NSProxy是一个例外),继承了NSObject的方法. ...

  3. 实验6 LCD接口

    1.利用单片机控制LCD1602,在LCD1602上显示字符串,并使其整屏左移. #include<reg51.h> #define uchar unsigned char #define ...

  4. 用NginX+keepalived实现高可用的负载均衡

    Table of Contents 1 规划和准备 2 安装 3 配置 3.1 配置NginX 3.2 配置keepalived 3.3 让keepalived监控NginX的状态 4 还可以做什么 ...

  5. 使用 DotNetty 实现 Redis 的一个控制台应用程序

    零:Demo 跑出来的结果如图 上图说明 图中左边蓝色的命令行界面,是用windows powershell 命令行链接的. 1.打开powershell命令行界面,输入命令[telnet   127 ...

  6. 【转】TOP10美国虚拟主机/网站空间推荐

    原文:http://www.laozuo.org 不同的站长用户需要不同的主机产品,并不是所有的站长, 所有的网站都想放置在VPS服务器中的.虚拟主机也有虚拟主机的方便和优势,下面为老左精选的10个比 ...

  7. MariaDB 存储过程与函数(10)

    MariaDB数据库管理系统是MySQL的一个分支,主要由开源社区在维护,采用GPL授权许可MariaDB的目的是完全兼容MySQL,包括API和命令行,MySQL由于现在闭源了,而能轻松成为MySQ ...

  8. Python2 指定文件编码格式需要注意的地方

    python2 中默认的编码格式是unicode, 开发人员经常需要根据需要,将python文件的编码格式设置为utf-8,我们可以在python文件的第一行进行设置,加入如下代码: # encodi ...

  9. 转---移动端 h5开发相关内容总结——CSS篇

    作者:伯乐在线专栏作者 - zhiqiang21 如有好文章投稿,请点击 → 这里了解详情 如需转载,发送「转载」二字查看说明 1.移动端开发视窗口的添加 h5端开发下面这段话是必须配置的 meta ...

  10. 几种int类型的范围

    我们在编程的过程经常会遇到数据溢出的情况,于是这个时候我们必须定义能表示更大的数的数据类型来表示这个数. 下面列出了int型的范围: unsigned   int   0-4294967295    ...