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 章精彩内容供 ...
随机推荐
- PHP 核心特性 - 匿名函数
提出 在匿名函数出现之前,所有的函数都需要先命名才能使用 function increment($value) { return $value + 1; } array_map('increment' ...
- Unity加载AB包
Unity制作游戏AB包 需要注意的是在游戏场景运行的情况下,不能编译AB包,不运行的情况下编译AB包需要使用Unity的扩展菜单功能,首先需要建立菜单用来编译AB包. 1.建立AB包的名字,首先选中 ...
- 设置Ubuntu下vim缩进为4个空格
输入命令编辑vim配置文件: sudo vim /etc/vim/vimrc 文件中添加如下: 保存退出即可
- java编程思想第四版第十一章习题
第一题 package net.mindview.holding.test1; import java.util.ArrayList; import java.util.List; /** * 沙鼠 ...
- 做HTML静态页面时遇到的问题总结
1. 如果所示,问题:“首页”和“闲置”文字部分位于table中部 解决方法:需要取消vertical-align:middle属性,将其设置为vertical-align:top,并将文本的高度改为 ...
- lqb 入门训练 Fibonacci数列 (循环 PS：提柜要栈溢出)
入门训练 Fibonacci数列 时间限制:1.0s 内存限制:256.0MB 问题描述 Fibonacci数列的递推公式为:Fn=Fn-1+Fn-2,其中F1=F2=1. 当n比较大时, ...
- day 26 约束、自定义异常、加密hashlib、logging
一.约束 建议使用: class BaseMessage(object): def send(self): """ 必须继承BaseMessage,然后其中必须编写sen ...
- sublimetext使用教程
图片来自网络,仅供参考 前言 随着我们编写的代码越来越复杂,DevC++以不再能满足我们的需求,所以,我们需要 一个能够进行调试,编译,运行等等功能的现代化ide,sublimetext(以下简称ST ...
- django框架简介及自定义简易版框架
web应用与web框架本质 概念 什么是web应用程序呢? Web应用程序就一种可以通过互联网来访问资源的应用程序, 用户可以只需要用一个浏览器而不需要安装其他程序就可以访问自己需要的资源. 应用软件 ...
- C数据结构（文件操作，随机数，排序，栈和队列，图和遍历，最小生成树，最短路径）程序例子
文件操作 文件打开方式 意义 ”r” 只读打开一个文本文件,只允许读数据 ”w” 只写打开或建立一个文本文件,只允许写数据 ”a” 追加打开一个文本 ...