众所周知，在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. JPA自定义实体的id

    背景:继上一篇文章,已经实现客户端数据库数据,存入服务器,但是,两张表的id不一样,应该是id设置自增了,所以虽然从客户端查出的实体带id,但是存入服务器时id被抹掉,按照服务端表的id序号向上自增, ...

  2. [Python学习]错误篇二：切换当前工作目录时出错——FileNotFoundError: [WinError 3] 系统找不到指定的路径

    REFERENCE:<Head First Python> ID:我的第二篇[Python学习] BIRTHDAY:2019.7.13 EXPERIENCE_SHARING:解决切换当前工 ...

  3. NetCore + Mysql CodeFirst 生成数据库

    首先定义领域的模型类,然后配置下面的一些东西,最后执行类 1. 新建Context 继承自 DbContext public class EFProjectContext : DbContext { ...

  4. bzoj3125: CITY 题解

    3125: CITY Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 486  Solved: 213[Submit][Status][Discuss] ...

  5. WinForm控件之【MonthCalendar】

    基本介绍 日期月历控件,顾名思义用来主要用来展示月历,获取年份.月份.日期.时分秒信息等 常设置属性 FirstDayOfWeek:面板展示周期的循序,一周的第一天由从周几开始排列: MaxDate: ...

  6. 【动态规划例题-数塔问题】-C++

    描述 观察下面的数字金字塔.写一个程序查找从最高点到底部任意处结束的路径,使路径经过数字的和最大.每一步可以 从当前点走到左下方的点也可以到达右下方的点. 在上面的样例中,从13到8到26到15到24 ...

  7. 【较复杂bfs】洪水-C++

    描述 魔法森林的地图是R行C列的矩形.能通行的空地表示为'.',C君倾倒洪水的地点标记为'*',无法通行的巨石阵标记为'X',海狸的巢穴标记为'D',而画家和三只小刺猬的初始位置标记为'S'. 每一分 ...

  8. Spring Boot 整合 Shiro实现认证及授权管理

    Spring Boot Shiro 本示例要内容 基于RBAC,授权.认证 加密.解密 统一异常处理 redis session支持 介绍 Apache Shiro 是一个功能强大且易于使用的Java ...

  9. numpy表示图片详解

    我自己的一个体会,在学习机器学习和深度学习的过程里,包括阅读模型源码的过程里,一个比较大的阻碍是对numpy掌握的不熟,有的时候对矩阵的维度,矩阵中每个元素值的含义晕乎乎的. 本文就以一个2 x 2 ...

  10. Excel催化剂100+大主题功能梳理导读

    Excel催化剂历经1年4个月的开发时间,终于荣登100+个大主题功能,完成数据领域的功能大矩阵,可以说在日常的数据处理及分析上,绝大部分的共性场景已经囊括其中,是数据工作者难得一遇的优秀作品之一.因 ...