众所周知，在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语言接口与实现:创建可重用软件的技术》下载

    <C语言接口与实现:创建可重用软件的技术>概念清晰.实例详尽,是一本有关设计.实现和有效使用C语言库函数,掌握创建可重用C语言软件模块技术的参考指南.书中提供了大量实例,重在阐述如何用一种 ...

  2. .Net Core 学习新建Core MVC 项目

    一.新建空的Core web项目 二.在Startup文件中添加如下配置 1.  在ConfigureServices 方法中添加 services.AddMvc();MVC服务 2. app.Use ...

  3. 搭建Spring Initializr服务器

    前言 按照网上很多教程,出错特别多.首先是GitHub和maven仓库的网络环境比较差,踩了很多坑:其次是SpringInitializr更新迭代几个版本,0.7.0我也没能弄成功.索性就用了旧版本0 ...

  4. android_aidl

    好久未更新博客了.人都是这样,刚开始对某一样东东冲劲十足,时间一长,很难坚持下去了,我这博客也是.所以我要打破成规,继续更新. 本次博客谈谈adil的用法.aidl的全称叫什么来着忘了,不过不要紧,重 ...

  5. 和朱晔一起复习Java并发（五）：并发容器和同步器

    本节我们先会来复习一下java.util.concurrent下面的一些并发容器,然后再会来简单看一下各种同步器. ConcurrentHashMap和ConcurrentSkipListMap的性能 ...

  6. Excel催化剂开源第41波-网抓网络采集类库及工具分享

    在VBA开发网抓程序中,会用到xmlhttp/winHttp.winHttprequest.5.1等组件,当时笔者也是这样进入了网抓领域的,这些都是非常过时的东西,在.Net的开发中,有大量的更好用的 ...

  7. 个人永久性免费-Excel催化剂功能第35波-Excel版最全单位换算，从此不用到处百度找答案

    全球化的今天,相信我们经常可以有机会接触到外国的产品,同时我们也有许多产品出口到外国,国与国之间的度量单位不一,经常需要做一些转换运算,一般网页提供这样的转换,但没有什么比在Excel上计算来得更为方 ...

  8. 小记---idea springboot 报错没有get或者set方法

    给idea 安装一个插件即可

  9. 【CodeForces - 357B】Flag Day（水题）

    Flag Day Descriptions 小G请你对 n 个点进行染色,可选的颜色有三种:白.红.蓝,并使得给定的 m 个三元组中,每个点的颜色各不相同. 因为你可能不会三分图匹配,于是小G给出了更 ...

  10. Linux更换默认Security源

    很多时候 修改了软件源,但是发现更新还是很慢,查看一下,如下图,有一个security ,显然主源还是在ubuntu,ubuntu本身在国外,所以很慢,因此考虑替换为国内镜像. 图1 1.备份数据源列 ...