<!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8" />
         <title></title>
         <style type="text/css">
         /*创建动画名称*/
         @keyframes rotate{
             0% {
                 transform:scale(1);
                  opacity:1;
             }
             15% {
                 transform:scale(1.2);
                  opacity:0.8;
             }
             30% {
                 transform:scale(1.0);
                  opacity:1;
             }
             45% {
                 transform:scale(1.3);
                  opacity:0.8;
             }
             60% {
                 transform:scale(1.1);
                  opacity:0.6;
             }
             75% {
                 transform:scale(1.4);
                  opacity:0.8;
             }
             90% {
                 transform:scale(1.2);
                  opacity:0.9;
             }
             100%{
                 transform:scale(1.5);
                  opacity:1.2;
             }
         }
         img:hover{
             /*
             @keyframes 规定动画。
             animation 所有动画属性的简写属性，除了 animation-play-state 属性。
             animation-name 规定 @keyframes 动画的名称。
             animation-duration 完成一个周期所花费的秒或毫秒。默认是 0。
             animation-timing-function 规定动画的速度,默认是 "ease" 匀速是linear。
             animation-delay 规定动画何时开始。默认是 0。
             animation-iteration-count 规定动画被播放的次数，默认是 1,不限infinite。
             animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"，逆向alternate。
             animation-play-state 规定动画是否正在运行或暂停。默认是 "running"，停止paused。
             animation-fill-mode 规定对象动画时间之外的状态。
              * */

             /*animation-name: rotate;
             animation-duration: 2s;
             animation-timing-function: linear;
             animation-delay: 0s;
             animation-iteration-count: infinite;
             animation-direction: normal;
             animation-play-state: running;*/

             /*animation 属性值 统一语法*/
             animation:rotate 1.6s linear 0s infinite normal running;
             /*对象选择器 box-shadow:[投影方式] X轴偏移量 Y轴偏移量模糊半径 阴影半径 颜色*/
             /*对元素进行阴影其他设置*/
             text-shadow:-10px 10px 20px red;
         }
         img{
             margin:50px 0px 0px 100px;
             animation-play-state:paused;
             width: 200px;
             height: 200px;

         }
         </style>
     </head>
 <body>
     <img src="img/love2.png">
 </body>
 </html>

效果

不完善的css怦然心动，有待改进...的更多相关文章

  1. [高级软件工程教学]团队Alpha阶段成绩汇总

    一.作业地址: https://edu.cnblogs.com/campus/fzu/AdvancedSoftwareEngineering/homework/1408 https://edu.cnb ...

  2. 团队作业4 Alpha冲刺

    第一天 日期:2018/6/13 1.今日完成任务情况以及遇到的问题 许征航:实现了推荐算法的基础逻辑,并按照模块化的思想对算法进行了分步整理. 遇到的问题:现有条件无法实现协同过滤算法,需要简化模型 ...

  3. handsontable在线编辑excel扩展功能-踩坑篇

    简述 先说一下背景,之所以封装handsontable插件,是因为公司要实现在线编辑导入excel文件的功能,然后我就找到了这个功能强大的插件handsontable. 具体功能 除了handsont ...

  4. （转载）记录函数 getStyle() 获取元素 CSS 样式

    设置元素(element)的css属性值可以用element的style属性,例如要将element的背景色设置为黑色,可以这么做: element.style.backgroundColor = ' ...

  5. 2015第10周五CSS—2

    经常遇到的浏览器兼容性有哪些?如何解决? 1.浏览器默认的margin和padding不同.解决方案是加一个全局的*{margin:0;padding:0;}来统一. 2.IE6双边距bug:块属性标 ...

  6. 谈CSS模块化【封装-继承-多态】

    第一次听到“CSS模块化”这个词是在WebReBuild的第四届“重构人生”年会上,当时我还想,“哈,CSS也有模块化,我没听错吧?”事实上,我没听错,你也没看错,早就有CSS模块化这个概念了.之所以 ...

  7. Brackets - 强大免费的开源跨平台Web前端开发工具IDE (HTML/CSS/Javascript代码编辑器)

    Brackets 是一个免费.开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具).该项目由 Adobe 创建和维护,根据MIT许可证发布,支持 Wind ...

  8. 团队作业三——需求改进&系统设计

    需求改进&系统设计 一. 需求&原型改进 1. 针对课堂讨论环节老师和其他组的问题及建议,对修改选题及需求进行修改 老师及其他组的同学在课堂讨论时尚未提出问题及修改意见,但是课后我们有 ...

  9. iOS之小功能模块--彩虹动画进度条学习和自主封装改进

    前言: 首先展示一下这个iOS小示例的彩色进度条动画效果: 阅读本文先说说好处:对于基础不好的读者,可以直接阅读文末尾的"如何使用彩虹动画进度条"章节,然后将我封装好的这个功能模块 ...

随机推荐

  1. Arch安装KDE5

    plasma desktop Install the plasma-meta meta-package or the plasma group. Alternatively, for a more m ...

  2. RubyMine 2016.1 下载 附注册激活码 破解版方法

    注册破解方法: 在要求输入注册的界面选择激活码,然后粘贴以下注册码: 43B4A73YYJ-eyJsaWNlbnNlSWQiOiI0M0I0QTczWVlKIiwibGljZW5zZWVOYW1lIj ...

  3. android应用编译失败 ResXMLTree_node size 类错误，以及 android studio 项目内搜索

    今天很郁闷,又遇到个很让人崩溃的问题: ResXMLTree_node size 0 is smaller than header size 0x45. 类似这样的错误,提示中看不出任何有用的内容,网 ...

  4. 关于The requested PHP extension ext-pdo_sqlite * is missing from your system. Install or enable PHP's pdo_sqlite extension.的解决

    $ php composer.phar install Loading composer repositories with package information Installing depend ...

  5. kali客户端攻击

    浏览器攻击 browser_autpwn2 (BAP2) mkdir /test 为接受响应的服务器创建目录   use auxiliary/server/browser_autopwn2  set ...

  6. Python学习笔记——基础篇【第六周】——hashlib模块

    常用模块之hashlib模块 用于加密相关的操作,3.x里代替了md5模块和sha模块,主要提供 SHA1, SHA224, SHA256, SHA384, SHA512 ,MD5 算法 import ...

  7. Python学习笔记——基础篇【第六周】——面向对象

    Python之路,Day6 - 面向对象学习 本节内容:   面向对象编程介绍 为什么要用面向对象进行开发? 面向对象的特性:封装.继承.多态 类.方法.       同时可参考链接: http:// ...

  8. Java 并发 线程的优先级

    Java 并发 线程的优先级 @author ixenos 低优先级线程的执行时刻 1.在任意时刻,当有多个线程处于可运行状态时,运行系统总是挑选一个优先级最高的线程执行,只有当线程停止.退出或者由于 ...

  9. 史上最详细SharePoint 2013安装步骤图解新手教程

    来源:// http://www.itexamprep.com/cn/microsoft/soft/sharepoint2013/2013/0408/2866.html 文章就是SharePoint2 ...

  10. Linux Yum仓库介绍及服务端及客户端配置

    YUM服务器 适合在于内网使用,因为很多包需要国外的网站下载应用包,这样网络很不稳定 下载慢,所有为何不尝试搭建 自己内部的YUM服务器呢 YUM服务器搭建 一 创建yum仓库目录 #mkdir -p ...