html制作跳动的心注释比较全

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style>
       /*设置body的背景颜色*/
       body{
           background-color: #ffa5a5;
       }
           .cen{
               width: 200px;
               height: 200px;
               background-color: #d5093c;

               /*加阴影，阴影四个值*/
               /*水平偏移0 垂直偏移0 模糊度70，值越大越模糊阴影颜色*/
               /*向方框添加阴影*/
               box-shadow: 0px 0px 70px #d5093c;
               /*执行动画百分百为1秒，无限循环*/
               animation: 1s aj infinite;
           }
           .lef{
               /*倒圆角指令*/
               /*radius半径范围*/
               border-radius: 100px;
               /*上右下左顺时针*/
               /*border-radius: 10px 20px 30px 40px;*/
               /*左上右下10像素，坐下右上20像素*/
               /*border-radius: 10px 20px;*/

               /*定位*/
               position: absolute;
               top: 200px;
               left: 200px;
           }
           .rig{
               border-radius:100px;
               position: absolute;
               top: 200px;
               left: 341px;
           }
           .c{
               /*旋转角度 45度*/
               /*transform转换变换*/
               /*rotate旋转*/
               transform: rotate(45deg);
               position: absolute;
               top: 269px;
               left: 271px;
           }
           /*div:hover{
               /*放大倍数*/
               /*transform: scale(1.3);*/
               /*X：水平位移 Y：垂直位移负数向上*/
               /*transform: translate(0px,-5px);*/
               /*2D角度的旋转 X Y可单指定X*/
               /*transform: skew(40deg,45deg);*/
           /*}*/

           /*动画的设置将一秒切成三部分，0.5秒放大一下*/
           @keyframes aj{
               0%{transform: scale(1)rotate(45deg);}
               50%{transform: scale(1.1)rotate(45deg);}
               100%{transform: scale(1)rotate(45deg);}
           }
       </style>
   </head>
   <body>
       <div class="cen lef"></div>
       <div class="cen c"></div>
       <div class="cen rig"></div>
   </body>
</html>

html制作跳动的心注释比较全相关推荐

使用css制作跳动的心
利用css动画制作跳动的心代码如下: <!DOCTYPE html> <html lang="en"><head><meta chars ...
c语言编程16个点阵跳动的心,Arduino点阵制作跳动的心
这次介绍的是使用8×8点阵(没有用到驱动模块,直接用Ardunio IO口控制)制作跳动的心.差不多用完所有IO口了,才能控制64个LED灯. 点阵说明一般数码管有出厂信息:比如型号为LG5011A ...
HTML和CSS制作跳动的心
首先做两个圆,给两个圆添加定位使一部分重叠其形成如下形状. 在做一个正方形,给它做旋转和定位,与上面两个圆组合成如下形状. 最后给这个心添加动画就可以了. 具体代码如下: <!DOCTYPE h ...
用matlab跳动的心,[ 教程 ] 用Arduino制作一个跳动的心
步骤4: 连接点阵屏的第二部分这里分2部分 Arduino引脚: 13 12 11 10 点阵屏下面一排引脚: 1 2 3 4 接下来 Arduino引脚: A2 A3 A4 A5 点阵屏下面一排引 ...
android 心形上漂动画,PowerPoint Viewer制作一个漂亮心形飞出动画的操作教程
各位使用PowerPoint Viewer的同学们,你们知道怎么制作一个漂亮心形飞出动画吗?在这篇教程内小编就为各位呈现了PowerPoint Viewer制作一个漂亮心形飞出动画的操作教程. Pow ...
python绘制表情包笑脸_用micro：bit学Python ——阵列显示表情符号“笑脸跳动的心”...
本节任务要求使用Microbit LED阵列显示表情符号 "笑脸跳动的心" 题目分析这是一个使用Python语言完成MicroBit板载LED阵列编程的入门进阶题目,属于入门阶 ...
笛卡尔心形函数表达式_几何画板制作笛卡尔心形函数的详细操作方法
朋友们或许不知道几何画板怎样制作笛卡尔心形函数的详细操作,那么今天绿软吧就讲解几何画板制作笛卡尔心形函数的详细操作方法哦,希望能够帮助到大家呢. 1.新建参数.右键绘图区空白处,"新建参数& ...
html靶心制作,用PS单色填充制作一个靶心
使用单色填充的方法制作一个靶心,属于Photoshop的入门课程,好了,喜欢的朋友可以参考本文! 步骤 1.新建图像文档.选择"文件-新建"命令,在弹出的对话框中设置"预 ...
css 跳动的心_如何用纯CSS为您的情人打造一颗跳动的心
css 跳动的心 Each year on February 14th, many people exchange cards, candies, gifts or flowers with thei ...

html制作跳动的心注释比较全

html制作跳动的心注释比较全相关推荐

最新文章

热门文章