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

 

要是没有效果，点这个：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. JS中访问对象的两种方式区别

    可以使用下面两种方式访问对象的属性和方法 1.对象名.属性名 对象名.方法名() 2.对象名["属性名"] 对象名["方法名"]() var obj = { n ...

  2. TVS二极管

    TVS管命名规则: TVS管的型号由三部分组成:系列名+电压值+单/双向符号 系列名代表不同的峰值脉冲功率和封装形式     ① SMAJ.SMBJ.SMCJ.SMDJ表示贴片封装:分别代表的峰值脉冲 ...

  3. Android-Kotlin-区间与for&List&Map简单使用

    区间与for: package cn.kotlin.kotlin_base04 /** * 区间与for */ fun main(args: Array<String>) { /** * ...

  4. RGB-D数据集（SLAM的和行人检测的）

    移动机器人编程一般用mrpt,这个软件来做三维,里面封装了很多常用算法. http://www.mrpt.org/download-mrpt/ SLAM的数据集,其中包括机器人slam http:// ...

  5. 【npm】详解npm的模块安装机制

      依赖树表面的逻辑结构与依赖树真实的物理结构 依赖树表面的逻辑结构与依赖树真实的物理结构并不一定相同! 这里要先提到两个命令:tree -d(linux)和npm ls(npm) 在一个npm项目下 ...

  6. Spring Cloud实践之集中配置Spring-config

    将一个系统中各个应用的配置文件集中起来,方便管理. import org.springframework.boot.SpringApplication; import org.springframew ...

  7. Bs4 BeautifulSoup取值

    原文网址:https://blog.csdn.net/u010244522/article/details/79627073 从网页获取HTML数据后,获取对应标签.属性的值 取值方法主要有以下几种: ...

  8. 初识MQ

    [参考文章]:到底什么时候该使用MQ? 1. 什么是MQ? 消息队列(Message Quene)是一种跨进程的通信机制,用于上下游传递消息. MQ是一种非常常见的上下游“逻辑解耦+物理解耦”的消息通 ...

  9. C++ Enum 转 Lua Table工具

    C++ Enum转Lua Table工具 观察C++ Enum结构 总结结构 enum GameMessage { //******* ///****************** GM_GAMESER ...

  10. MySQL高可用架构-MMM安装教程

    安装指南: 一.架构以及服务器信息 基本安装包含至少2个数据库服务器和1个监视服务器.本例中使用2个监视服务器和5个数据库服务器(服务器系统为CentOS 7) 用途 IP 主机名 Server-id ...