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 章精彩内容供 ...
随机推荐
- 高德地图3D菱形 区域点击搜索
更新一波吧 <!doctype html> <html lang="zh-CN"> <head> <!-- 原始地址://webapi.a ...
- 【评测机】评测时报错cc1plus: fatal error: /xx/xx/main.cpp: Permission denied compilation terminated.的解决方法
事情是这亚子发生的,原本建立评测机的时候就出现过这个问题,但莫名其妙就解决了. 报错的文件路径是位于docker内的,所以本质上这个错误是docker内的没有权限执行相关文件. 原因是centos7中 ...
- fastjson 1.2.24反序列化导致任意命令执行漏洞分析记录
环境搭建: 漏洞影响版本: fastjson在1.2.24以及之前版本存在远程代码执行高危安全漏洞 环境地址: https://github.com/vulhub/vulhub/tree/master ...
- word使用指南（经常更新）
一.快捷键 Ctrl+C 复制 Ctrl+X 剪切 Ctrl+V 粘贴 Ctrl+F 查找 Ctrl+A 全选 Ctrl+Z/Y 撤销/还原撤销 Ctrl+D 打开字体对话框 Ctrl+S 另存为 C ...
- 面向对象之classmethod和staticmethod(python内置装饰器)
对象的绑定方法复习classmethodstaticmethod TOC 对象的绑定方法复习 由对象来调用 会将对象当做第一个参数传入 若对象的绑定方法中还有其他参数,会一并传入 classmetho ...
- ApplicationInsights入门到精通系列(一)
在11月9号的上海.Net Conf开发者峰会上,我做了一个对Application Insights的Persentation,本来想着快速将其转化为一篇博客无赖最近忙成
- day01_爬虫和数据
1.什么是爬虫 1.1.爬虫的定义 脚本,程序--->自动抓取万维网上信息的程序. 1.2.爬虫的分类 2.1.通用爬虫 通用网络爬虫 是 捜索引擎抓取系统(Baidu.Google ...
- linux中Nginx安装
linux中Nginx安装 编译安装 Nginx的优点太多,这里不再赘述,详情请看这篇博客深入理解nginx. Nginx的安装有rpm包安装.编译安装和docker安装.本文将介绍编译安装方 ...
- vscode vue模版
{ "Print to console": { "prefix": "vue", "body": [ "< ...
- MYSQL删除
1.使用360卸载,并强力删除相关东东 2.清理注册表: A.HKEY_LOCAL_MACHINE\SYSTEM\ControlSet001\Services\Eventlog\Application ...