html跳动的心,css3跳动的心制作

心的跳动

css属性

* {

margin: 0;

padding: 0;

}

body {

width: 100%;/*如果要给背景加颜色或者图片必须把宽度设置为100%。*/

background-color: #000;

}

.heart {

margin: 100px auto;

width: 200px;

height: 200px;

position: relative;

animation-name: shake;/*为 @keyframes 动画规定一个名称*/

animation-duration: 0.5s;/*定义动画完成一个周期所需要的时间，以秒或毫秒计。*/

animation-iteration-count: infinite;/*定义动画的播放次数。infinite:无限次*/

}

.heart div {

width: 100%;

height: 100%;

position: absolute;

background: #f00;

animation-name: shadow;

animation-duration: 0.5s;

animation-iteration-count: infinite;

}

.topLeft,.topRight {

border-radius: 100px 100px 0 0;/*div左右的圆度*/

}

.topLeft {

transform: translate(-50px,0) rotate(-45deg);

/*transform：该属性允许我们对元素进行旋转、缩放、移动或倾斜。

translate:移动位置，rotate:旋转角度。*/

}

.topRight {

transform: translate(50px,0) rotate(45deg);

}

.bottom {

transform: translate(0,64px) rotate(45deg) scale(.9,.9);/*scale:定义 2D 缩放转换。*/

}

/*定义动画*/

@keyframes shake {

from {

transform:scale(.9,.9);

}

to {

transform:scale(1.1,1.1);

}

@keyframes shadow {

from {

}

to {

box-shadow:0px 0px 50px red;/*阴影*/

}

html跳动的心,css3跳动的心制作相关推荐

html css3模拟心的跳动
<!DOCTYPE html> <html> <head><meta charset="utf-8"><meta http-e ...
怎样用html制作动态心,利用html+css3制作心的跳动动画
模拟心的跳动
随心音乐，让心跟着跳动起来！
Yuan-SxMusic 项目地址:jsyjst/Yuan-SxMusic 简介: 随心音乐,让心跟着跳动起来! 更多:作者提 Bug 标签: 随心音乐,是一款基于 MVP+Retrofit+E ...
android胎心监测设计,胎心监测
胎心就是胎儿的心跳.胎心监护检查是利用超声波的原理对胎儿在宫内的情况进行监测,是正确评估胎儿宫内的状况的主要检测手段.胎儿心率受交感神经和副交感神经调节,通过信号描记瞬间的胎心变化所形成的监护图形的曲 ...
java线程画动图闪,Android中利用画图类和线程画出闪烁的心形，android心形,package com....
Android中利用画图类和线程画出闪烁的心形,android心形,package com.package com.tt.view;import android.content.Context;imp ...
java-php-python-爱心公益网站设计与制作计算机毕业设计
java-php-python-爱心公益网站设计与制作计算机毕业设计 java-php-python-爱心公益网站设计与制作计算机毕业设计本源码技术栈: 项目架构:B/S架构开发语言:Java语言 ...
王阳明心学：此心光明，夫复何言
王阳明心学:此心光明,夫复何言 <传习录>里记载了王阳明和他的门徒九川这样的一段对话: 九川卧病虔州.先生云:"病物亦难格,觉得如何?"对曰:"功夫甚难.&q ...
该收收心，静下心来苦作舟
该收收心,静下心来苦作舟前面一段时间,恰逢考驾照,拖了快两年了,好不容易有个考试指标,自然重视程度就高很多了,还好公司高层领导非常支持,练车请了不少假,前后大概持续了一周,请了3个下午,另加一个完整 ...
求知欲心有所想，心有所选
求知欲保持求知欲的两种办法.心有所想,心有所选求知欲就跟吃饭一样,小时候吃饭怎么觉得妈妈做的都是好吃的,来到外面之后发现老妈那种做法我怎么吃了那么多年,原来食物还可以更好吃.但是局限于当时的食材, ...

html跳动的心,css3跳动的心制作

html跳动的心,css3跳动的心制作相关推荐

最新文章

热门文章