一、利用阴影画一个月亮
说明：画月亮，需要先画一个圆，然后利用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>
