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

 

要是没有效果，点这个：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. poj3253哈夫曼树

    Fence Repair Time Limit: 2000 MS Memory Limit: 65536 KB 64-bit integer IO format: %I64d , %I64u Java ...

  2. ORACLE中的FTP例子代码

    http://blog.csdn.net/mashengwang/article/details/5982663 CREATE OR REPLACE DIRECTORY my_docs AS '/u0 ...

  3. 关于使用java自动发邮件--找不到smtphost

    今天解决报的第二个异常:Unknown SMTP host: smtp.qq.com;在找了网上的一些资料后,有看到是因为使用了代理服务器,所以无法访问.我试着用了telnet去访问,确实不行.最近都 ...

  4. FFmpeg4.0笔记：rtsp2rtmp

    Github https://github.com/gongluck/FFmpeg4.0-study.git #include <iostream> using namespace std ...

  5. 动态生成html元素并为元素追加属性

    动态生成HTML元素的方法有三种: 第一种:document.createElement()创建元素,再用appendChild( )方法将元素添加到指定节点 <!DOCTYPE html> ...

  6. 基于opencv3.0下的人脸检测和检测部分的高斯模糊处理

    如题 这里将任务分解为三大部分: 1.录播放视频 2.人脸检测 3.部分高斯模糊 其中重点放在人脸检测和部分高斯模糊上 1.录播放视频(以opencv中的VideoCapture类进行实现) 首先罗列 ...

  7. Download SQL Server Management Studio (SSMS)下载地址

    Download SQL Server Management Studio (SSMS)下载地址: https://msdn.microsoft.com/en-us/library/mt238290. ...

  8. Akka（20）： Stream：异步运算，压力缓冲-Async, batching backpressure and buffering

    akka-stream原则上是一种推式(push-model)的数据流.push-model和pull-model的区别在于它们解决问题倾向性:push模式面向高效的数据流下游(fast-downst ...

  9. 学习使用Apollo配置中心

    Apollo(阿波罗)是携程框架部门研发的配置管理平台,能够集中化管理应用不同环境.不同集群的配置,配置修改后能够实时推送到应用端. Apollo官网地址 如何安装服务端可以按照上面官网的步骤. 这里 ...

  10. js 正则语法

    原文:一次性搞懂javascript正则表达式之语法 看完原文,对正则中以前一知半解的捕获组与非捕获组.零宽断言有了更深的理解.很感谢原文作者~~ 普通字符 当我们写a的时候,我们指的就是a:当我们写 ...