详细教程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_跳动的心的更多相关文章

  1. [WPF,XAML] 跳动的心

    原文:[WPF,XAML] 跳动的心 没什么艺术细胞,原谅,原谅! <Canvas Width="0" Height="0"> <Canvas ...

  2. 使用transform属性和animation属性制作跳动的心

    transform属性允许我们对元素进行旋转.缩放.移动和倾斜: animation属性允许我们对元素实现一些动画效果: 跳动的心源码 <!DOCTYPE html> <html l ...

  3. TurnipBit-MicroPython开发板：跟孩子一起DIY跳动的心

    天是越来越热了,小心脏也是越跳越快啊,为了表达现在激动的心情,必须做个激动的心开始跳动.紧接着就开始带领大家做个激动的心. 首先说说要借助的平台,这次仅仅需要借助一块TurnipBit开发板. Tur ...

  4. 【ShaderToy】跳动的心❤️

    写在前面 注:如果你还不了解ShaderToy,请看开篇. 作为ShaderToy系列的第一篇,我们先来点简单的.下面是效果: (CSDN目前不能传gif文件了,暂时空缺,可以看下面的原shader效 ...

  5. 纯CSS制作“跳动的心”demo

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  6. html跳动的心实现代码

    <style>         .box{             width: 200px;             height: 400px;             positio ...

  7. CSS3学习笔记（2）—左右跳动的红心

    还在为无法表达内心澎湃的心情而着急吗?还在为制作跳动的心而烦恼吗?哈哈,今天我就把代码全部奉上,为你们追妹子添点贡献,下面来看最终的动态效果(事先说明一下:我用的截屏gif制作软件是绿色版的,所以gi ...

  8. 用C++画心（转）

    原地址https://www.zhihu.com/topic/19613730/top-answers 首先上一个动态的心 代码如下: #include <stdio.h> #includ ...

  9. Android开发权威指南（第2版）新书发布

    <Android 开发权威指南(第二版)>是畅销书<Android开发权威指南>的升级版,内容更新超过80%,是一本全面介绍Android应用开发的专著,拥有45 章精彩内容供 ...

随机推荐

  1. MySQL系列：一句SQL，MySQL是怎么工作的？

    对于MySQL而言,其实分为客户端与服务端. 服务端,就是MySQL应用,当我们使用net start mysql命令启动的服务,其实就是启动了MySQL的服务端. 客户端,负责发送请求到服务端并从服 ...

  2. Hadoop4-HDFS分布式文件系统原理

    一.简介 1.分布式文件系统钢结构 分布式文件系统由计算机集群中的多个节点构成,这些节点分为两类: 主节点(MasterNode)或者名称节点(NameNode) 从节点(Slave Node)或者数 ...

  3. len、is、==、可变于不可变类型

    a="asdfghjkl;'iuygb" b="小米" c=['a','b','c'] d= {'name':1,'age':24} # len统计字符或元素的 ...

  4. 大宇java面试系列（二）：jvm组成部分

    1. 说一下 JVM 的主要组成部分?及其作用? 类加载器(ClassLoader) 运行时数据区(Runtime Data Area) 执行引擎(Execution Engine) 本地库接口(Na ...

  5. JS 原生面经从入门到放弃 篇幅较长，建议收藏

    前言 是时候撸一波 JS 基础啦,撸熟了,银十速拿 offer; 本文不从传统的问答方式梳理,而是从知识维度梳理,以便形成知识网络; 包括函数,数组,对象,数据结构,算法,设计模式和 http. 函数 ...

  6. LoadRunner具体流程

    创建负载测试场景场景目标:模拟10个用户同时登陆.搜索航班.购买机票.查看航班路线并退出打开Controller并创建一个新场景1.打开HP LoadRunner2.打开Controller在Load ...

  7. 怎样用JS给，option添加“选中”属性

    <html> <head> <script> window.onload = function(){ var opts = document.getElementB ...

  8. 微擎修改 icon.jpg 后项目主页未变

    微擎修改 icon.jpg 后项目主页Logo未变 产生原因: 设置了自定义图标,但系统未找到该图标,就选择使用默认的起始图标 解决办法: 在项目根目录位置上传一个图标名为 icon-custom.j ...

  9. js-程序结构

    程序结构: 1.顺序结构(主体结构):自上而下,逐行实行: 2.分支(选择)结构:if语句,if…else, if…else if…else,switch;     3.循环结构:重复某些代码: 分支 ...

  10. JavaScript返回格式化的时间字符串

    http://www.w3school.com.cn/jsref/jsref_getMinutes.asp 由 getMinutes() 返回的值是一个两位的数字.不过返回值不总是两位的,如果该值小于 ...