众所周知，在CSS3中产生了诸多优秀的特性，现在就来分享一下我这段时间对于这些特性的效果实践，希望对大家有所启发。

挑战1: 画一个对话框

要画一个对话框，首先来学习做一个三角形。其实非常的简单。

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <style>

    .triangle{

      width: 0;

      height: 0;

      border: 50px solid;

      border-color: #f00 #0f0 #ccc #00f;

    }

  </style>

</head>

<body>

  <div class="triangle"></div>

</body>

</html>

复制代码

出现如下效果：

估计你已经知道border的构成原理，然后只需改一行代码：

// 四个参数对应 ：上 右 下 左

border-color: transparent transparent #ccc transparent;

复制代码

于是就只剩下面的三角形部分啦！

现在来利用三角形技术做对话框：

web/web前端学习群244-五百-143，有不懂的可以群里交流在线分享课程。

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <style>

    .dialog {

      position: relative;

      margin-top: 50px;

      margin-left: 50px;

      padding-left: 20px;

      width: 300px;

      line-height: 2;

      background: lightblue;

      color: #fff;

    }

    .dialog::before {

      content: '';

      position: absolute;

      border: 8px solid;

      border-color: transparent lightblue transparent transparent;

      left: -16px;

      top: 8px;

    }

  </style>

</head>

<body>

  <div class="dialog">这是一个对话框鸭！</div>

</body>

</html>

复制代码

效果如下：

挑战2: 画一个平行四边形

利用skew特性，第一个参数为x轴倾斜的角度，第二个参数为y轴倾斜的角度。

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <style>

    .parallel {

      margin-top: 50px;

      margin-left: 50px;

      width: 200px;

      height: 100px;

      background: lightblue;

      transform: skew(-20deg, 0);

    }

  </style>

</head>

<body>

  <div class="parallel"></div>

</body>

</html>

复制代码

大家可以自己动手试试。 效果如下：

挑战3: 用一个div画五角星

对于这个五角星而言，我们可以拆分成三个部分，想一想是不是这样？

那我们现在就来实现这三个部分。 对于最上面的三角，我们在第一个部分已经实现了三角形，这个不难。但是下面的两个如何实现呢？

其实也非常的简单，想一想，下面这两个是不是就是一个向上的三角形旋转而来呢？明白了这一点，就可以动手实现啦！

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <style>

    #star {

      position: relative;

      margin: 200px auto;

      width: 0;

      height: 0;

      border-style: solid;

      border-color: transparent transparent red transparent;

      border-width: 70px 100px;

      transform: rotate(35deg);

    }

    #star::before {

      position: absolute;

      content: '';

      width: 0;

      height: 0;

      top: -128px;

      left: -95px;

      border-style: solid;

      border-color: transparent transparent red transparent;

      border-width: 80px 30px;

      transform: rotate(-35deg);

    }

    #star::after {

      position: absolute;

      content: '';

      width: 0;

      height: 0;

      top: -45px;

      left: -140px;

      border-style: solid;

      border-color: transparent transparent red transparent;

      border-width: 70px 100px;

      transform: rotate(-70deg);

    }

  </style>

</head>

<body>

  <div id="star"></div>

</body>

</html>

复制代码

效果如下：

你没看错，这就是CSS3的威力！

挑战4: 画一个爱心

趣味CSS3效果挑战小汇总的更多相关文章

  1. 精选12个时尚的 CSS3 效果【附源码下载】

    这里是精选的12个很炫的 CSS3 效果.CSS3 是对 CSS 规范的一个很大的改善和增强,它使得 Web 开发人员可以很容易的在网站中加入时尚的效果.以前很多需要编写复杂的 JavaScript ...

  2. 颗粒翻页（css3效果展示）

    用css3效果做了一个颗粒翻页效果,布局上,一张图片做底层,在这张图片上用js创建一层小的行和列各为r和c的小span,给这些span分别设置background-position:用来覆盖原来的一张 ...

  3. 前端笔记之HTML5&CSS3（中）选择器&伪类伪元素&CSS3效果&渐变背景&过渡

    一.CSS3选择器 CSS3是CSS的第三代版本,新增了很多功能,例如:强大的选择器.盒模型.圆角.渐变.动画.2D/3D转换.文字特效等. CSS3和HTML5没有任何关系!HTML5骨架中,可以用 ...

  4. 一款html5和css3实现的小机器人走路动画

    之前介绍了好多款html5和css3实现的动画,今天要给大家带来一款html5和css3实现的小机器人走路动画.该实例的人物用html5绘画的,动画效果是html5和css3实现的.一起看下效果图. ...

  5. 发现两个有趣的CSS3效果

    一.CSS3画机器猫 http://keleyi.com/keleyi/phtml/html5/3.htm 哆啦A梦效果图: 可用于浏览器对CSS3支持情况的测试 但最近有人对这个测试表示怀疑,指该测 ...

  6. 让你心动的 HTML5 & CSS3 效果【附源码下载】

    这里集合的这组 HTML5 & CSS3 效果,有的是网站开发中常用的.实用的功能,有的是先进的 Web 技术的应用演示.不管哪一种,这些案例中的技术都值得我们去探究和学习. 超炫的 HTML ...

  7. 8个前沿的 HTML5 & CSS3 效果【附源码下载】

    作为一个前沿的 Web 开发者,对于 HTML5 和 CSS3 技术或多或少都有掌握.前几年这些新技术刚萌芽的时候,开发者们已经使用它们来小试牛刀了,如今这些先进技术已经遍地开发,特别是在移动端大显身 ...

  8. 新鲜出炉的30个精美的 jQuery & CSS3 效果【附演示和教程】

    新鲜出炉的30个精美的 jQuery & CSS3 效果[附演示和教程]   作为最流行的 JavaScript 开发框架,jQuery 在现在的 Web 开发项目中扮演着重要角色,它简化了 ...

  9. 10款让你心动的 HTML5 & CSS3 效果

    这里集合的这组 HTML5 & CSS3 效果,有的是网站开发中常用的.实用的功能,有的是先进的 Web 技术的应用演示.不管哪一种,这些案例中的技术都值得我们去探究和学习. 1.超炫的 HT ...

随机推荐

  1. 致远A8任意文件写入漏洞_getshell_exp

    近期爆出致远 OA 系统的一些版本存在任意文件写入漏洞,远程攻击者在无需登录的情况下可通过向 URL /seeyon/htmlofficeservlet POST 精心构造的数据即可向目标服务器写入任 ...

  2. Excel中vlookup函数使用

    https://baijiahao.baidu.com/s?id=1594684818733205984&wfr=spider&for=pc

  3. 【带着canvas去流浪（12）】用Three.js制作简易的MARVEL片头动画（上）

    目录 一. 大作业说明 二.基本思路 三.视频纹理表面修复--UV映射 3.1 问题描述 3.2 纹理贴图的基本原理-UV映射 3.3 关键示例代码 四.小结 示例代码托管在:http://www.g ...

  4. Spring 注解编程之 AnnotationMetadata

    在上篇文章 Spring 注解编程之模式注解 中我们讲到 Spring 模式注解底层原理,依靠 AnnotationMetadata 接口判断是否存在指定元注解. 这篇文章我们主要深入 Annotat ...

  5. 万字长文：ELK（V7）部署与架构分析

    ELK(7版本)部署与架构分析 1.ELK的背景介绍与应用场景 在项目应用运行的过程中,往往会产生大量的日志,我们往往需要根据日志来定位分析我们的服务器项目运行情况与BUG产生位置.一般情况下直接在日 ...

  6. Excel催化剂开源第3波-修复ExcelCom加载项失效问题及WPS可调用Com加载项的方法

    为了还原一个干净无侵扰的网络世界,本文将不进行大规模地分发,若您觉得此文有用,不妨小范围地分享到真正有需要的人手中 功能概述 修复ExcelCom加载项常见问题,如每次需重新勾选COM加载项或COM加 ...

  7. C#后台HttpWebRequest模拟跨域Ajax请求，注册Windows服务到服务器上

    项目需求,暂且叫A.B公司吧.我们公司需要从A公司哪里读取机器上的数据,放到我们数据库中.然后再将数据库中存的数据,提供一个接口,B公司来调用,大概这个意思. 好了,言归正传.这个是之前做好的界面,用 ...

  8. C#编程之JSON序列化与反序列化

    1.在C#管理NuGet程序包中添加Json.NET 2.C#将对象序列化成JSON字符串 模型类1 /// <summary> /// JSON字符串模型.是否出错 /// </s ...

  9. 如何实现Kali linux系统下的U盘启动（小白指导）

    一.准备工作: 声明:这个“操作”并不会影响你原装的系统,真正的即插即用的哦. (1)4GB的U盘<读写速度比较快的> (2)Kali linux镜像文件 (3)软件Universal-U ...

  10. 0004. 寻找两个有序数组的中位数（Java）

    4. 寻找两个有序数组的中位数 https://leetcode-cn.com/problems/median-of-two-sorted-arrays/ 最简单的就是用最简单的,把两个数组分别抽出然 ...