众所周知，在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. c++学习书籍推荐《超越C++标准库:Boost库导论》下载

    <超越C++标准库Boost库导论>不仅介绍了Boost库的功能.使用方法及注意事项,而且还深入讨论了Boost库的设计理念.解决问题的思想和技巧以及待处理的问题.因此,本书是一本了解Bo ...

  2. mysql 免安装版本 与问题记录

    将文件解压到D盘, 创建 my.ini 配置文件, ------------------复制进去--------------------- [client] port=3306 default-cha ...

  3. Python线程池ThreadPoolExecutor源码分析

    在学习concurrent库时遇到了一些问题,后来搞清楚了,这里记录一下 先看个例子: import time from concurrent.futures import ThreadPoolExe ...

  4. python对Excel的读取

    在python自动化中,经常会遇到对数据文件的操作,比如添加多名员工,但是直接将员工数据写在python文件中,不但工作量大,要是以后再次遇到类似批量数据操作还会写在python文件中吗? 应对这一问 ...

  5. Java编程思想：压缩

    import java.io.*; import java.util.Enumeration; import java.util.zip.*; public class Test { public s ...

  6. py+selenium+IE 批量执行脚本10几分钟，IE会卡住【无解，提供绕过方法】

    问题:py+selenium+IE 批量执行单个脚本10几分钟,IE会卡住 一个脚本文件里有20几个用例,跑起来10多分钟,每次跑10分钟后(即第22条用例左右时)IE就会卡住,程序就会在那傻等,最后 ...

  7. UVA10375 选择与除法 Choose and divide 题解

    题目链接: https://www.luogu.org/problemnew/show/UVA10375 分析: 这道题可以用唯一分解定理来做. 什么是唯一分解定理?百度即可,这里也简介一下. 对于任 ...

  8. markdown浅谈

    markdown是啥? markdown就是一种修饰网页/博客的方法,他能使网页变得更美观. 我们先解释一下代码框: 这个没法保留,就是把键盘左上角的⋅·⋅ 切换成英文变成`. 然后``` 在隔一行` ...

  9. HHyperledger Fabric 之 TLS （fabric-java-sdk）使用grpcs方式访问fabric

    我在很多fabric的技术群中,很多使用javasdk连接fabric的同友,初始的时候很多都没有成功的使用TLS进行区块链交易: 是sdk不支持,还是我们没有找到解决方案? 其实不然,我这里使用的是 ...

  10. [leetcode] 7. Reverse Integer (easy)

    原题 水题 唯一注意的点就是数字溢出 class Solution { public: int reverse(int x) { long long MAX = ((long long)1 <& ...