一、利用阴影画一个月亮

说明：画月亮，需要先画一个圆，然后利用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. unity整理

    1. hashmap实现原理 Dictionary hashtable https://www.cnblogs.com/InCerry/p/10325290.html2. malloc与new3. 循 ...

  2. tfidf与bm25

    https://www.cnblogs.com/johnnyzen/p/11298273.html 前言 本文主要是对TF-IDF和BM25在公式推演.发展沿革方面的演述,全文思路.图片基本来源于此篇 ...

  3. List list = new ArrayList()为何父类引用指向子类对象（多态）

    转自--https://blog.csdn.net/Jae_Peng/article/details/80151033 不习惯用csdn,博客园没有搜到类似的,摘录过来. 多态:要有继承,方法的重写, ...

  4. JavaScript 基础学习（三）

    BOM对象 BOM(浏览器对象模型),可以对浏览器窗口进行访问和操作.使用 BOM,开发者可以移动窗口.改变状态栏中的文本以及执行其他与页面内容不直接相关的动作. 使 JavaScript 有能力与浏 ...

  5. Unity Shader实现《死亡搁浅》扫描效果！

    https://mp.weixin.qq.com/s/4YwjxScnU0zprjGekAyvsw

  6. 本地Map缓存

    package com.cars.forwardservice.controller;import org.springframework.stereotype.Controller;import o ...

  7. PaddleOCR(PaddleHub Serving)离线部署包制作

    PaddleOCR(PaddleHub Serving)离线部署包制作 环境与版本: 系统 CPU架构 Anaconda3 PaddlePaddle PaccleOCR 银河麒麟Server V10 ...

  8. 在子组件中使用$parent获取不到父组件里的变量值?

    一直用的都是this.$parent来取父组件的值,现在发现,element-UI内的组件,也是一层父组件 例如 父组件内 子组件内   console.log 打印结果

  9. ES6新增运算符 ?? || &&

    运算符(?? || &&) && 与运算符 &&左边表达式为真时执行右边表达式 let a = true let b = 0 a && ...

  10. tidb配置haproxy

    1.安装haproxy wget https://www.haproxy.org/download/2.6/src/haproxy-2.6.2.tar.gz make clean make -j 8  ...