四、用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>
<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制作图形以及简单动画的更多相关文章
- CSS制作图形速查表
很少会有人意识到,当浏览器绘制的border,会有一个角度的问题.我们就是得用这样的一个技巧来制作三角的效果.我们只需要保证一边的边框是有色,其他边框色为透明色,这样我们就很容易制作出三角形,然后改变 ...
- 【转】CSS制作图形速查表-存档
http://www.w3cplus.com/css/css-simple-shapes-cheat-sheet http://www.cnblogs.com/powertoolsteam/p/c ...
- 利用CSS制作图形效果
前言 关于如何使用CSS来制作图形,比如说圆形,半圆形,三角形等的相关教程还是挺多的,今天我主要想解释一下里面一些demo的实现原理,话不多说,开始吧 以下所有内容只使用一个HTML元素.任何类型 ...
- 关于fullpage.js 和animate.css制作全屏简单大方的首页
附上源码: html <!DOCTYPE html><html lang="en"><head> <meta charset=" ...
- [前端随笔][CSS] 制作一个加载动画 即帖即用
说在前面 描述 [加载中loading...] 的动画图片往往使用GIF来实现,但GIF消耗资源较大,所以使用CSS直接制作更优. 效果传送门1 效果传送门2 关键代码 @keyframes 规则 用 ...
- 纯CSS制作图形效果
下面所有的例子都是在demo.html的基础上添加相关样式实现的. <!DOCTYPE html> <html> <head> <meta charset=& ...
- CSS制作hover下划线动画
.demo1{ position: relative; text-decoration: none; font-size: 20px; color: #333; } .demo1:before{ co ...
- canvas制作简单动画
在画布元素<canvas>中,除了绘制图形.图像.文字外,还可以制作一些简单的动画,制作过程十分简单,主要分为两步操作: 1.自定义一个函数,用于图形的移动或其他动作. 2.使用setIn ...
- 如何使用纯 CSS 制作四子连珠游戏
序言:你是否想过单纯使用 CSS 也可以制作一款游戏?甚至可以双人对决!这是一篇非常有趣的文章,作者详细讲解了使用纯 CSS 制作四子连珠游戏的思路以及使用奇淫巧技解决困难问题的方法.因为案例本身比较 ...
- 【01】CSS制作的图形
[01]CSS制作的图形 绘制五角星: 通过border绘制三角形.然后通过transfrom来旋转35度. 绘制对称的图形,最后绘制顶部的三角形即可. 元素本身,加上:before和:a ...
随机推荐
- Optional中的map函数和flatMap函数的区别
今天在学scala的时候发现Option中有map和flatMap返回的都是Option,然后再java8中的Optional也存在这样两个函数,觉得有点多余.后来分析了一下,还是有存在的必要的. 1 ...
- win10系统下mysql安装
1.官网下载压缩包 2.添加环境变量到PATH 3.在bin的同级目录下,新增my.ini,内容如下(严重注意,是斜杠,千万别写成反斜杠!!!): [mysqld] basedir = D://sof ...
- ConstantBuffer
Constant Buffer的高效使用,让你码出质量 https://zhuanlan.zhihu.com/p/35830868 Unity ConstantBuffer的一些解析和注意 https ...
- Vue2 Axios简单封装
/**axios封装 * 请求拦截.相应拦截.错误统一处理 */ import axios from 'axios';import QS from 'qs'; import { Toast } fro ...
- linux kali 报错Intel VT-x
报错原因:第一次安装虚拟机intel vt-x 处于禁用状态,没有启用 分析思路:找到 Intel vt - x 位置,并打开 .(intel - x在bios) 解决方法: 联想笔记本为例:进入bi ...
- MySQL同步部分库注意的问题
同步部分库或部分库表 复制部分库:replicate_do_db 复制排除部分库:replicate_ignore_db 复制部分表:replicate_do_table 复制排除部分表:replic ...
- Joseph Problem With Passwords In Java
问题描述: 编号为1,2,......,n的n个人(每个人的信息有编号.姓名和密码三项)按照顺时针方向围坐一圈, 每个人有且只有一个密码(正整数,密码用随机方式赋值,范围1-15).一开始任选一个正整 ...
- Vue基础(2)双向绑定
双向数据绑定 通过修改标签,例:切换radio.checkbox......都会对绑定的数据有影响 通过事件触发方法,修改data中数据,反向作用于radio.checkbox...... 1.v-m ...
- antVue range-picker 限制当前时间之前的时间不可选择
<a-range-picker :format="dateFormat" size="small" :showToday="true" ...
- 光纤加速计算 383-高速信号处理板 XCKU060的双路QSFP+光纤PCIe 卡 XCKU060板卡
基于kintex UltraScale XCKU060的双路QSFP+光纤PCIe 卡 一.板卡概述 本板卡系北京太速科技自主研发,基于Xilinx UltraScale Kintex系列FPGA ...