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

 

要是没有效果，点这个：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. Scala_模式匹配

    模式匹配 简单匹配 Scala的模式匹配最常用于match语句中.下面是一个简单的整型值的匹配实例 object TestMatch {  def main(args: Array[String]): ...

  2. mysql变更数据的捕获和入库

    问题:涉及状态的信息,mysql中是update的,缺少中间状态的记录.数据分析中需要这部分数据. 思路:后端服务通过监控某张表的某个字段,根据mysql的binlog文件,还原数据,发送到kafka ...

  3. 增加显示记录数的label及隐藏refresh按钮

    1. 在UniDBgrid的extEvent属性中写入以下代码: function OnAfterCreate(sender) { var toolbar=sender.getDockedItems( ...

  4. 转：iOS9的新特性以及适配方案

    2015年9月8日,苹果宣布iOS 9操作系统的正式版在太平洋时间9月16日正式推出,北京时间9月17日凌晨1点推送. 新的iOS 9系统比iOS8更稳定,功能更全面,而且还更加开放.iOS 9加入了 ...

  5. Sql Server中的表访问方式Table Scan, Index Scan, Index Seek

    1.oracle中的表访问方式 在oracle中有表访问方式的说法,访问表中的数据主要通过三种方式进行访问: 全表扫描(full table scan),直接访问数据页,查找满足条件的数据 通过row ...

  6. ASP.NET Web API + Elasticsearch 6.x 快速做个全文搜索

    最近想做个全文搜索,设想用 ASP.NET Web API + Elasticsearch 6.x 来实现. 网上搜了下 Elasticsearch 的资料,大部分是讲 linux 平台下如何用 ja ...

  7. .net core 使用 AspectCore 实现简易的AopCache。

    (第一次写博客,好紧张!!!) 源码地址:传送门 项目中有很多缓存的需求,能自己定义缓存key和时间,能根据key去清理缓存. 网上找了一圈,有很多基于aop的缓存组件,但是都不满足我的需求.故造了个 ...

  8. 重置identity值

    如果数据库在SQL2008或以上,可以参考下面方法: DBCC CHECKIDENT ( table_name [, { NORESEED | { RESEED [, new_reseed_value ...

  9. Swift5 语言指南(二十六) 内存安全

    默认情况下,Swift可以防止代码中发生不安全行为.例如,Swift确保变量在使用之前进行初始化,在取消分配后不访问内存,并检查数组索引是否存在越界错误. Swift还确保对同一内存区域的多次访问不会 ...

  10. 【xsy2272】 与运算 状压dp

    题目大意:给你一个长度为$n$的序列$a$,我们定义$f_i$表示序列$a$前i项一次进行按位与运算后的值. 我们认为一个序列的价值为$\sum_{i=1}^{n}f_i$,现在你要重新排列序列$a$ ...