一、利用阴影画一个月亮

说明：画月亮，需要先画一个圆，然后利用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. VBoxNetAdpCtl: Error while adding new interface: failed to open /dev/vboxnetctl: No such file or directory.

    macOS VirtualBox Bridged Adapter 不能用 I'm running macOS High Sierra 10.13.1 and VirtualBox 5.2.2. Thi ...

  2. download links

    1 anaconda https://mirrors.bfsu.edu.cn/anaconda/archive/

  3. 【翻译】了解Flink-概览 -- Learn Flink-Overview

    了解Flink: 上手手册 目录 手册目标和范围 流处理 并行数据流 及时的流处理 有状态流处理 通过状态快照进行容错 翻译来源 Learn Flink:Overview , Learn Flink: ...

  4. ssl 导入和配置

    https://blog.csdn.net/qq_23663693/article/details/121698553

  5. JDBC之Statement

    Statement 目录 Statement Statement Statement概述 要执行的SQL分为两类 查询 增删改 Statement继承体系 SQL注入问题 SQL注入问题解决 获取得到 ...

  6. Node.js实现国密算法

    一.node.js环境安装 1 去官网下载压缩包,并放置到/usr/local/bin文件夹下 2 进行环境变量配置 vim /etc/profile 在环境变量文件的末尾添加 export NODE ...

  7. HTTP请求报文（请求行，请求头，请求体）

    HTTP协议 1.简介 HTTP协议(Hyper Text Transfer Protocol,超文本传输协议),是用于从万维网(WWW:World Wide Web )服务器传输超文本到本地浏览器的 ...

  8. 手写简单call、apply、bind

    1.call ~function(){ function call_1(context, ...args){ context = context == undefined ? window : con ...

  9. 在vue js中for循环使用

    在线免费图片压缩工具 前端技术站 1.for(let item of response.data.result) { 用item操作每一条数据. } item:定义的每一条的变量 response.d ...

  10. springboot-mybatis集成pagehelper分页插件

    1.引入jar包(示例) implementation group: 'com.github.pagehelper', name: 'pagehelper-spring-boot-starter', ...