一、利用阴影画一个月亮

说明：画月亮，需要先画一个圆，然后利用box-shadow属性，生成阴影，再将圆的颜色变为透明即可。

<html>

<head></head>

<body>

<style>

.moon {

    margin: auto;

    margin-top: 100px;

    width: 100px;

    height: 100px;

    /* transparent 当前背景色 */

    background-color: yellow;

    /* 圆角边框，设定大于等于50%时，正方形会变成圆 */

    border-radius: 70%;

    /* box-shadow参数：水平位移/垂直位移/模糊距离（可选）/颜色 */

    box-shadow: 50px 0px 0px orange;

}

</style>

<div class="moon"></div>

</body>

<foot></foot>

</html>

二、画一颗爱心

说明：利用before,after伪类在菱形（正方形旋转45度）两侧伸出，并设定圆形边框。

<html>

<head></head>

<body>

<style>

.heart {

    margin: auto;

    margin-top: 100px;

    width: 100px;

    height: 100px;

    transform: rotate(-45deg);

    background-color: pink;

}

/* 伪类before,after,在元素前后插入 */

.heart:before {

    /* 定位要取absolute,即相对heart类的盒子位置调整 */

    position: absolute;

    /* content 为必填字段 */

    content: "";

    width: 100px;

    height: 100px;

    /* 向上延伸 */

    top: -50px;

    left: 0px;

    border-radius: 50%;

    background-color: pink;

}

.heart:after {

    position: absolute;

    content: "";

    width: 100px;

    height: 100px;

    top: 0px;

    /* 向右延伸 */

    left: 50px;

    border-radius: 50%;

    background-color: pink;

}

</style>

<div class="heart"></div>

</body>

<foot></foot>

</html>

三、使爱心跳动起来

说明：应用了动画属性animation-name, animation-duration, animation-iteration-count,  @keyframes等，让爱心间接性变大缩小。

<html>

<head></head>

<body>

<style>

.heart {

    margin: auto;

    margin-top: 100px;

    width: 100px;

    height: 100px;

    transform: rotate(-45deg);

    background-color: pink;

    /* 对应的动作名 */

    animation-name: beat;

    /* 动作持续的时间 */

    animation-duration: 1s;

    /* 动作循环的次数，infinite表示无限次 */

    animation-iteration-count: infinite;

}

/* 帧动作 在持续时间里对应百分比 css属性的变化 */

@keyframes beat {

    0% {

        /* scale 放大倍数 */

        transform: scale(0.8) rotate(-45deg);

    }

    50% {

        transform: scale(1.1) rotate(-45deg);

    }

}

/* 伪类before,after,在元素前后插入 */

.heart:before {

    /* 定位要取absolute,即相对heart类的盒子位置调整 */

    position: absolute;

    /* content 为必填字段 */

    content: "";

    width: 100px;

    height: 100px;

    /* 向上延伸 */

    top: -50px;

    left: 0px;

    border-radius: 50%;

    background-color: pink;

}

.heart:after {

    position: absolute;

    content: "";

    width: 100px;

    height: 100px;

    top: 0px;

    /* 向右延伸 */

    left: 50px;

    border-radius: 50%;

    background-color: pink;

}

</style>

<div class="heart"></div>

</body>

<foot></foot>

</html>

四、彩色弹跳球

<html>

<head></head>

<body>

<style>

.colorful-ball {

    position: absolute;

    width: 100px;

    height: 100px;

    border-radius: 50%;

    background: linear-gradient(90deg, blue, white, yellow, orange);

    top: 50px;

    left: 300px;

    animation-name: fall-down;

    animation-duration: 1s;

    animation-iteration-count: infinite;

    /* 表示动作播放速度 ease-in:先慢后快; ease-out:先快后慢; ease-in-out：先慢后快再慢; cubic-bezier(n,n,n,n):自定义速度曲线 */

    animation-timing-function: ease-in;

}

@keyframes fall-down {

    50% {

        top: 200px;

    }

    100% {

        top: 50px;

    }

}

</style>

<div class="colorful-ball"></div>

</body>

<foot></foot>

四、用CSS制作图形以及简单动画的更多相关文章

  1. CSS制作图形速查表

    很少会有人意识到,当浏览器绘制的border,会有一个角度的问题.我们就是得用这样的一个技巧来制作三角的效果.我们只需要保证一边的边框是有色,其他边框色为透明色,这样我们就很容易制作出三角形,然后改变 ...

  2. 【转】CSS制作图形速查表-存档

      http://www.w3cplus.com/css/css-simple-shapes-cheat-sheet http://www.cnblogs.com/powertoolsteam/p/c ...

  3. 利用CSS制作图形效果

    前言 关于如何使用CSS来制作图形,比如说圆形,半圆形,三角形等的相关教程还是挺多的,今天我主要想解释一下里面一些demo的实现原理,话不多说,开始吧   以下所有内容只使用一个HTML元素.任何类型 ...

  4. 关于fullpage.js 和animate.css制作全屏简单大方的首页

    附上源码: html <!DOCTYPE html><html lang="en"><head> <meta charset=" ...

  5. [前端随笔][CSS] 制作一个加载动画 即帖即用

    说在前面 描述 [加载中loading...] 的动画图片往往使用GIF来实现,但GIF消耗资源较大,所以使用CSS直接制作更优. 效果传送门1 效果传送门2 关键代码 @keyframes 规则 用 ...

  6. 纯CSS制作图形效果

    下面所有的例子都是在demo.html的基础上添加相关样式实现的. <!DOCTYPE html> <html> <head> <meta charset=& ...

  7. CSS制作hover下划线动画

    .demo1{ position: relative; text-decoration: none; font-size: 20px; color: #333; } .demo1:before{ co ...

  8. canvas制作简单动画

    在画布元素<canvas>中,除了绘制图形.图像.文字外,还可以制作一些简单的动画,制作过程十分简单,主要分为两步操作: 1．自定义一个函数,用于图形的移动或其他动作. 2．使用setIn ...

  9. 如何使用纯 CSS 制作四子连珠游戏

    序言:你是否想过单纯使用 CSS 也可以制作一款游戏?甚至可以双人对决!这是一篇非常有趣的文章,作者详细讲解了使用纯 CSS 制作四子连珠游戏的思路以及使用奇淫巧技解决困难问题的方法.因为案例本身比较 ...

  10. 【01】CSS制作的图形

    [01]CSS制作的图形   绘制五角星:   通过border绘制三角形.然后通过transfrom来旋转35度. 绘制对称的图形,最后绘制顶部的三角形即可.   元素本身,加上:before和:a ...

随机推荐

  1. MulVAL攻击图的推理规则

    MulVAL ( multihost, multistage, vulnerability analysis) 是由普林斯顿大学的 Ou 等开发的 Linux 平台开源攻击图生成工具,基于 Nessu ...

  2. SAP日志表 CDHDR和CDPOS

    1. 标准日志表CDHDR 和 CDPOS OBJECTCLAS = 'INFOSATZ' 信息记录 OBJECTCLAS = 'BANF' 采购申请 OBJECTCLAS = 'EINKBELEG' ...

  3. pytorch 独热编码报错的解决办法：one_hot is only applicable to index tensor

    首先,报错原因,我认为是数据类型错误, 在文档中表示,第一个tensor参数的数据类型为LongTensor,也就是torch.int64类型的,如果你有报这个错:"one_hot is o ...

  4. 面试题-react

    对react的理解 是什么 React 是一个用于构建用户界面的 JavaScript 库. 能干什么 可以通过组件化的方式构建大型的,快速响应的大型web应用 如何做 声明式 React 使用jsx ...

  5. iview table添加input框，且校验

    方法一 render渲染 { title: "用户名", key: "stockPrice", render: (h, params) => { retu ...

  6. No.1.5

    优先级:不同选择器具有不同的优先级,优先级高的选择器样式会覆盖优先级低选择器的样式 优先级公式:!imporant>行内样式>id选择器>类选择器>标签选择器>通配符选择 ...

  7. H5在（支付宝和微信环境）使用支付

    首先是在支付宝浏览器环境   使用支付宝支付 参考链接 https://myjsapi.alipay.com/jsapi/native/trade-pay.html 支付宝订单字符串唤起支付  调用支 ...

  8. MySQL的MDL锁

    MDL锁的概念和分类 1.MDL类型 锁名称 锁类型 说明 适用语句 MDL_INTENTION_EXCLUSIVE 共享锁 意向锁,锁住一个范围 任何语句都会获取MDL意向锁, 然后再获取更强级别的 ...

  9. DDD（三）DDD实战、贫血模型与充血模型

    DDD(三)DDD实战.贫血模型与充血模型 如果觉得样式不好:跳转即可 http://www.lifengying.site/(md文件复制过来有些样式会不一样) 贫血模型与充血模型 1.贫血模型:一 ...

  10. Fastreport 如果值相同合并单元格

    在fastreport 中设置text的属性即可 效果如下