CSS_跳动的心
详细教程CSS3
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
background-color: #ffa5a5;
}
.cen{
width: 200px;
height:200px;
background-color: #d5093c;
/*阴影效果： 水平方向的偏移，垂直方向的偏移，模糊度，颜色*/
box-shadow: 10px -10px 70px #D5093C;
animation: 1s aj infinite;
}
/*倒圆角指令*/
.lef{
border-radius: 100px;
position: absolute;
top: 200px;
left: 180px;
}
.rig{
border-radius: 100px;
position: absolute;
top: 200px;
left: 320px;
}
/*旋转角度*/
.c{
transform: rotate(45deg);
position: absolute;
top: 270px;
left: 250px;
}
/*div:hover{*/
/*放大原有图形*/
/*transform: scale(1.3);*/
/*2d旋转 如果只有一个数据，那么x和y相同角度，给俩个数据就是先x 后y*/
/*transform: skew(45deg);*/
/*移动 显示水平位移，然后是垂直位移 （负数就是向上）*/
/*transform: translate(0px,-5px);*/
/*}*/
/*动画标签*/
@-webkit-keyframes aj{
0%{transform: scale(1) rotate(45deg);}
50%{transform: scale(1.2) 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>
用到CSS3的标签 :
/*阴影效果： 水平方向的偏移，垂直方向的偏移，模糊度，颜色*/
box-shadow: 10px -10px 70px #D5093C;/*倒圆角指令*/
border-radius: 100px;/*旋转角度 deg就是角度的意思*/
transform: rotate(45deg);/*放大原有图形*/
transform: scale(1.3);/*动画标签*/
@-webkit-keyframes aj{
0%{transform: scale(1) rotate(45deg);}
50%{transform: scale(1.2) rotate(45deg);}
100%{transform: scale(1.) rotate(45deg);}
}/*调用动画的方法*/
animation: 1s aj infinite;针对不同的浏览器CSS3有不同的方法：
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
from {background: red;}
to {background: yellow;}
}
@-o-keyframes myfirst /* Opera */
{
from {background: red;}
to {background: yellow;}
}CSS_跳动的心的更多相关文章
- [WPF,XAML] 跳动的心
原文:[WPF,XAML] 跳动的心 没什么艺术细胞,原谅,原谅! <Canvas Width="0" Height="0"> <Canvas ...
- 使用transform属性和animation属性制作跳动的心
transform属性允许我们对元素进行旋转.缩放.移动和倾斜: animation属性允许我们对元素实现一些动画效果: 跳动的心源码 <!DOCTYPE html> <html l ...
- TurnipBit-MicroPython开发板：跟孩子一起DIY跳动的心
天是越来越热了,小心脏也是越跳越快啊,为了表达现在激动的心情,必须做个激动的心开始跳动.紧接着就开始带领大家做个激动的心. 首先说说要借助的平台,这次仅仅需要借助一块TurnipBit开发板. Tur ...
- 【ShaderToy】跳动的心❤️
写在前面 注:如果你还不了解ShaderToy,请看开篇. 作为ShaderToy系列的第一篇,我们先来点简单的.下面是效果: (CSDN目前不能传gif文件了,暂时空缺,可以看下面的原shader效 ...
- 纯CSS制作“跳动的心”demo
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- html跳动的心实现代码
<style> .box{ width: 200px; height: 400px; positio ...
- CSS3学习笔记（2）—左右跳动的红心
还在为无法表达内心澎湃的心情而着急吗?还在为制作跳动的心而烦恼吗?哈哈,今天我就把代码全部奉上,为你们追妹子添点贡献,下面来看最终的动态效果(事先说明一下:我用的截屏gif制作软件是绿色版的,所以gi ...
- 用C++画心（转）
原地址https://www.zhihu.com/topic/19613730/top-answers 首先上一个动态的心 代码如下: #include <stdio.h> #includ ...
- Android开发权威指南（第2版）新书发布
<Android 开发权威指南(第二版)>是畅销书<Android开发权威指南>的升级版,内容更新超过80%,是一本全面介绍Android应用开发的专著,拥有45 章精彩内容供 ...
随机推荐
- jquery 数字滚动方法
jquery 数字滚动方法用的是countUp.js这个插件 target = 目标元素的 ID:startVal = 开始值:endVal = 结束值:decimals = 小数位数,默认值是0:d ...
- 思科获取DHCP过程
主机如何获取DHCP的过程? 地址请求: 客户端发布一个DHCP请求信息,该信息会发给网内所有主机,非DHCP服务器会丢弃信息. 地址提供: DHCP服务端收到该信息后,会从地址池内挑选一个未被使用的 ...
- tap事件封装
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8 ...
- C#查看已下载文件大小和扩展名
FileInfo fi = new FileInfo(fullfile);//fullfile文件路径 ong Size = fi.Length;//查看已下载文件的大小 C# 获取文件名及扩展名 s ...
- nyoj 116 士兵杀敌（二）（线段树、单点更新）
士兵杀敌(二) 时间限制:1000 ms | 内存限制:65535 KB 难度:5 描述 南将军手下有N个士兵,分别编号1到N,这些士兵的杀敌数都是已知的. 小工是南将军手下的军师,南将军经常 ...
- nyoj 23-取石子（一）(博弈)
23-取石子(一) 内存限制:64MB 时间限制:3000ms Special Judge: No accepted:20 submit:33 题目描述: 一天,TT在寝室闲着无聊,和同寝的人玩起了取 ...
- var与let与const
var与let与const都是用来声明变量,但是三者之间也有一些区别 var的使用 var a;//声明变量a var a,b,c;//声明三个变量a,b,c var a,b,c=2;//声明了三个变 ...
- HTML的条件注释和hack技术
在很多时候,前端的兼容性问题,都很让人头痛!幸运的是,微软从去年声明:从2016年1月12日起,微软将停止为IE8(包括IE8)提供技术支持和安全更新.整个前端圈子都沸腾起来,和今年七月份Adobe宣 ...
- Java 添加、读取、修改、删除Word文档属性
Word文档属性包括常规.摘要.统计.内容.自定义等,其中摘要包括标题.主题.作者.经理.单位.类别.关键词.备注等项目,通过设置这些摘要信息或自定义属性可方便对文档的管理.本文中将主要介绍对文档摘要 ...
- php为什么要用swoole？
最近两个月一直在研究 Swoole,那么借助这篇文章,我希望能够把 Swoole 安利给更多人.虽然 Swoole 可能目前定位是一些高级 phper 的玩具,让中低级望而生畏,可能对一些应用场景也一 ...