众所周知，在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. CORS跨域djangosetting.py 配置

    1 什么是 CORS? Cross-Origin Resource Sharing(CORS)跨域资源共享是一份浏览器技术的规范,提供了 Web 服务从不同域传来沙盒脚本的方法,以避开浏览器的同源策略 ...

  2. 关于安装了git或者小乌龟(TortoiseGit)使用之后出现红色！ 绿色√ 蓝色？的解决办法：

    在当前目录中新建文件保存为(删除git信息.bat)在其写入:for /r . %%a in (.) do @if exist "%%a\.git" rd /s /q " ...

  3. hibernate中的dialect解释

    dialect就是“方言”,因为hibernate是要把Java对象转换成关系数据库来描述的,而关系数据库虽然有一些统一的标准,如SQL-92等,但是实际上各数据库如Oracle, MySQL, MS ...

  4. c++学习书籍推荐《深度探索C++对象模型》下载

    百度云及其他网盘下载地址:点我 百度云及其他网盘下载地址:点我 编辑推荐 如果你是一位C++程序员,渴望对于底层知识获得一个完整的了解,那么这本<深度探索C++对象模型>正适合你 作者简介 ...

  5. linux系统的基础优化

    目录 前言 网络优化 在虚拟软件中配置虚拟局域网 接着可以配置自己windows主机的网络连接配置 在虚拟软件中虚拟机添加网卡 虚拟机中的系统基础优化 前言 在自己做linux的相关服务实验时,是没有 ...

  6. 剑指offer第二版-总结：排序算法

    1.排序算法比较: 2.java实现 快排: /** * 快排 * * @since 2019年2月26日 下午1:37:34 * @author xuchao */ public class Qui ...

  7. 【UVA - 10006 】Carmichael Numbers （快速幂+素数筛法）

    -->Carmichael Numbers  Descriptions: 题目很长,基本没用,大致题意如下 给定一个数n,n是合数且对于任意的1 < a < n都有a的n次方模n等于 ...

  8. HDU5521 Meeting(dijkstra+巧妙建图)

    HDU5521 Meeting 题意: 给你n个点,它们组成了m个团,第i个团内有si个点,且每个团内的点互相之间距离为ti,问如果同时从点1和点n出发,最短耗时多少相遇 很明显题目给出的是个无负环的 ...

  9. 最全面阐述WebDataBinder理解Spring的数据绑定

    每篇一句 不要总问低级的问题,这样的人要么懒,不愿意上网搜索,要么笨,一点独立思考的能力都没有 相关阅读 [小家Spring]聊聊Spring中的数据绑定 --- DataBinder本尊(源码分析) ...

  10. WePY的脱胎换骨

    对于前端来说,尤其是开发小程序的前端来说,WePY框架一定不陌生,他是一种小程序开发框架.而且是属于类Vue风格,掌握Vue再来学习WePY学习成本极低. 今天为啥要写这篇文章呢,因为在复习WePY时 ...