晚上不怎么想看书,做了这个心跳效果,主要用了CSS3,也顺带复习一下。

先上html结构,结构很简单
<div class="heart"> <div class="topLeft"></div> <div class="topRight"></div> <
divclass="bottom"></div> </div>
三个div的目的就是通过平移旋转调整边框变成?形~
CSS结构如下:
*{ padding:0; margin:0; } body{ background-color: black; }
/*实现缩放效果的时候对父元素操作即可*/ .heart{ margin:100px auto; width:200px; height:200px;
position: relative; animation-name: shake; animation-duration: 0.5s;
animation-iteration-count: infinite; } .heart div{ /* 通过父元素找到所有相同的子元素 */ width:
100%; height:100%; background-color: pink; position: absolute; /*
一定得配合相对的元素来进行绝对定位 */ /* 相对父元素进行绝对定位 */ /* 脱离了文档流 */ animation-name: shadow;
animation-duration: 0.5s; animation-iteration-count: infinite; } .topLeft{ /*
先平移 再旋转 */ transform: translate(-100px,0) rotate(-45deg); } .topRight{ transform
: translate(100px,0) rotate(45deg); } .bottom{ transform: translate(0,100px)
rotate(45deg); } .topLeft,.topRight{ border-radius: 105px 105px 0 0 ; /* 左上 右上
左下 右下 */ } /* 动画: 定义一个关键帧 为元素去调用这个动画 */ /* 关键帧 每一步中所执行的效果 */ @keyframes shake{
0%{ transform:scale(0.9,0.9); /* 对当前的效果进行缩放 */ } 100%{ transform:scale(1.2,1.2);
} } @keyframes shadow{ 0%{ box-shadow: 0 0 0 pink; } 100%{ box-shadow: 0 0 50px
pink; } }
<>CSS3 2D转换 transform

可以对元素进行移动、缩放、拉伸、转动、拉长

* translate() transform:translate(50px,100px)
右下为正,左上为负

* rotate() transform:rotate(50deg)
顺时针旋转

* scale() transform:scale(2,4)
按照宽高放大倍数

* skew() transform:skew(30deg,20deg)
使元素按照X轴,Y轴翻转给定的角度

* matrix()
matrix() 方法把所有 2D 转换方法组合在一起。
matrix() 方法需要六个参数,包含数学函数,允许您:旋转、缩放、移动以及倾斜元素。
<>CSS3 @keyframes 规则

在CSS3中创建动画,需要学习@keyframes规则
要使得动画能够在页面中展示,三个要点

* 动画的名称需要规定
* 动画的时长需要规定
* 元素要调用动画名称
<>动画属性

* animation 所有动画属性的简写属性
* animation-name 规定@keyframe名称
* animation-duration 规定动画完成的时间
* animation-iteration-count 规定动画被播放的次数
默认为1,infinite:无限次播放
* animation-timing-function 规定动画的速度曲线 animation-timing-function:linear;
//从头到尾速度相同animation-timing-function:easy;//默认,从低速加快,在结束前变慢
animation-timing-function:ease-in;//动画以低速开始 animation-timing-function:ease-out;
//动画以低速结束animation-timing-function:cubic-bezier(n,n,n,n)
* animation-direction定义是否应该轮流反向播放动画
normal:默认值,正常播放
alternate:轮流反向播放 div{ width:100px;height:100px; background:red; position:
relative; animation-name:myfirst;//动画名称 animation-duration:5s;//动画完成时间
animation-timing-function:linear;//动画的速度设置为匀速 animation-delay:2s;//动画从何时开始
animation-iteration-count:infinite;//动画的播放次数无限 animation-direction:alternate;
//动画轮流反向播放animation-play-state:running;//规定动画正在运行 } @keyframes myfirst{ 0%{
background:red;left:0px; top:0px} 25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px;
top:200px;} 100% {background:red; left:0px; top:0px;} }

技术
©2019-2020 Toolsou All rights reserved,
HashMap详解某东14薪变16薪,是诚意还是套路?浏览器内核(理解)java四大函数式接口(重点,简单)html写樱花树,写樱花树的作文让人意想不到的Python之樱花树(turtle库的华丽样式)os模块的简单使用