文章关键词:CSS 制作 图形 以及 简单 动画

四、用CSS制作图形以及简单动画

作者:神秘网友 发布时间:2021-03-11 15:50:04

四、用CSS制作图形以及简单动画

一、利用阴影画一个月亮

说明:画月亮,需要先画一个圆,然后利用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
footer/footer
/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
footer/footer
/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
footer/footer
/html

四、彩色弹跳球

html
header/header

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

footer/footer

本文章教程介绍完毕,更多请访问跳墙网其他文章教程!

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

  1. CSS的基本用法

    转: CSS的基本用法 **CSS的基本用法 css样式 样式是css最小单元语法,每个样式包括两部分内容:选择器和声明。 选择器(Selector):选择器告诉浏览器该样式将作用于页面中的哪些对象,这些对象可以是某个标签、所有网页对象、指定class或ID值等。浏览器在

  2. element 树形 el-tree 修改小三角箭头图标CSS

    可根据需要添加/deep/ ::v-deep 等权重 .el-tree .el-tree-node__expand-icon.expanded { -webkit-transform: rotate(0deg); transform: rotate(0deg);}.el-tree .el-tree-node__expand-icon.expanded { -webkit-transform: rotate(0deg); transform: rotate

  3. 将面向列存储和查询处理技术集成到图形数据库管理系统中(CS DB)

    我们回顾了当代图形数据库管理系统(GDBMS)中面向列的存储和查询处理技术。与面向列的RDBMS类似,GDBMS支持读取繁重的分析工作负载,而这些工作负载与传统的分析工作负载有着根本不同的数据访问模式。我们首先根据GDBMS的访问模式,推导出一套优化GDBMS存储和

  4. ppt显示无法插入视频 解决方案

    在制作ppt的过程中,为了使得我们的ppt更加完善具体,我们需要往其中插入视频。 但是现在版本的ppt往往不支持视频插入,如显示: “ 无法从所选文件插入视频,请检查路径个文件名是否正确 ” 以及 “ 无法从所选文件插入视频,验证此媒体格式所必须的64位编

  5. SCSS循环遍历数组

    1.问题背景 在项目中需要实现下面这样的tab列表效果。每一项都有不同的颜色样式,用css写七个样式的话非常的麻烦~ 2.解决方法 用SCSS的变量和循环方法可以非常简单的实现效果,非常的方便~, 代码: //结构div class="bottomNav" div class="item" v-for="(i

  6. webgl变换:深入图形平移

    在以前的文章里,不管是绘制图形,绘制点亦或者是改变色值,所有的内容都是静态的。 在 webgl 里,图形的运动分为 平移、旋转、缩放 三种类型。 接下来,我们会从零基础开始,一点一点来深入了解图形如何进行运动。 首先来从零开始了解下图形的平移 1. 图形

  7. css+div实现各种常见边框

    css+div实现各种常见边框 一、效果图如下 二、实现代码 div { width: 120px; height: 100px; margin: 10px; float: left; text-align: center; line-height: 100px; font-size: 18px; color: #999999; border: 4px solid #797979; } .rounded { border-radiu

  8. 用原生CSS编写-怦怦跳的心

    !DOCTYPE htmlhtml head meta charset="utf-8" title怦怦跳爱心/title link rel="stylesheet" type="text/css" href="index.css"/ /head body label input type="checkbox" / svg viewBox="0 0 532 532" path id="heart" transform="translate(10, 10)" d="M

  9. css常用选择器总结

    前言:我们在码代码的时候,经常会遇到需要给第一个或者最后一个元素添加或删除样式,还有一些比较特殊的是选取第几个元素添加或删除样式,下面记录css选择器中常见的选择器:相邻兄弟选择器(+)、子选择器()、兄弟选择器(~)、first-child、:last-child

  10. CSS3新增属性clip-path裁剪

    clip-path 直译过来就是裁剪路径,使用SVG或形状定义一个HTML元素的可见区域的方法。想象一下你在Photoshop中勾勒路径的场景。MDN上是这样介绍 clip-path的: clip-path属性可以防止部分元素通过定义的剪切区域来显示,仅通过显示的特殊区域。剪切区域是被UR

每天更新java,php,javaScript,go,python,nodejs,vue,android,mysql等相关技术教程,教程由网友分享而来,欢迎大家分享IT技术教程到本站,帮助自己同时也帮助他人!

Copyright 2020, All Rights Reserved. Powered by 跳墙网(www.tqwba.com)|网站地图|关键词