一、利用阴影画一个月亮

说明：画月亮，需要先画一个圆，然后利用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. ABAP 指定字符替换为空格

    上代码 DATA:str1 TYPE string VALUE '小红##爱#six##小绿#666'. *******DATA(str1) = '小红##爱#six##小绿#666'. " ...

  2. 吴恩达老师机器学习课程chapter01——序言+回归

    吴恩达老师机器学习课程01--序言+线性回归 本文是非计算机专业新手的自学笔记,欢迎指正与其他任何合理交流. 本文仅作速查备忘之用,对应吴恩达(AndrewNg)老师的机器学期课程第一章.第二章.第四 ...

  3. C语言printf输出32位十六进制

    long c = 0X1DAB83; //十六进制数字 printf("c=%lx\n", c); //以十六进制形式输出(字母小写) printf("c=%lX\n&q ...

  4. Lecture 2. Fundamental Concepts and ISA - Carnegie Mellon - Computer Architecture 2015 - Onur Mutlu

    并不只有冯诺依曼模型,按照控制流顺序执行指令 还有 data flow 模型,按照数据流顺序执行指令 冯诺依曼模型和数据流模型的编程语言的一个对比 Control-driven 编程模型和 data- ...

  5. nodejs+koa 后台框架结构、demo学习地址

    框架结构例子 https://github.com/bayi-lzp/koa-template 官网例子(有很多 示例) https://github.com/koajs/examples <K ...

  6. 微信防红页面JS代码

    将Js代码复制粘贴到你网站所需要的页面,保存即可,完美实现防红,具体未测试,如果需要可以自己测试效果. <meta charset="utf-8″> <meta name= ...

  7. Java jar打包成exe应用程序，可在无JDK/JRE环境下运行

    转载自 https://blog.csdn.net/hao65103940/article/details/106494964 前期准备 一个jar包,没有bug能正常启动的jar包 exe4j,一个 ...

  8. tomcat的安装以及环境配置

    1.Tomcat的下载地址:http://tomcat.apache.org/ Tomcat是开放源代码的WEB服务器,安装时,只需解压压缩包即可 2.环境变量的配置 1>新建系统变量CATAL ...

  9. 拓展django-haystack全文检索的样式和搜索频率限制

    一.样式: django-haystack在utils模块中封装了HighHighlighter用于配置搜索结果的样式展示.想要更改结果的样式,可以写个子类重写相应的方法达到效果 1.关键字高亮: H ...

  10. JavaScript 调用Bomb后端云

                                                     用简单的代码 展示代码的魅力 Bmob 是后端云 全方位一体化的后端服务平台 提供可靠的 Server ...