不完善的css怦然心动,有待改进...
<!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怦然心动,有待改进...的更多相关文章
- [高级软件工程教学]团队Alpha阶段成绩汇总
一.作业地址: https://edu.cnblogs.com/campus/fzu/AdvancedSoftwareEngineering/homework/1408 https://edu.cnb ...
- 团队作业4 Alpha冲刺
第一天 日期:2018/6/13 1.今日完成任务情况以及遇到的问题 许征航:实现了推荐算法的基础逻辑,并按照模块化的思想对算法进行了分步整理. 遇到的问题:现有条件无法实现协同过滤算法,需要简化模型 ...
- handsontable在线编辑excel扩展功能-踩坑篇
简述 先说一下背景,之所以封装handsontable插件,是因为公司要实现在线编辑导入excel文件的功能,然后我就找到了这个功能强大的插件handsontable. 具体功能 除了handsont ...
- (转载)记录函数 getStyle() 获取元素 CSS 样式
设置元素(element)的css属性值可以用element的style属性,例如要将element的背景色设置为黑色,可以这么做: element.style.backgroundColor = ' ...
- 2015第10周五CSS—2
经常遇到的浏览器兼容性有哪些?如何解决? 1.浏览器默认的margin和padding不同.解决方案是加一个全局的*{margin:0;padding:0;}来统一. 2.IE6双边距bug:块属性标 ...
- 谈CSS模块化【封装-继承-多态】
第一次听到“CSS模块化”这个词是在WebReBuild的第四届“重构人生”年会上,当时我还想,“哈,CSS也有模块化,我没听错吧?”事实上,我没听错,你也没看错,早就有CSS模块化这个概念了.之所以 ...
- Brackets - 强大免费的开源跨平台Web前端开发工具IDE (HTML/CSS/Javascript代码编辑器)
Brackets 是一个免费.开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具).该项目由 Adobe 创建和维护,根据MIT许可证发布,支持 Wind ...
- 团队作业三——需求改进&系统设计
需求改进&系统设计 一. 需求&原型改进 1. 针对课堂讨论环节老师和其他组的问题及建议,对修改选题及需求进行修改 老师及其他组的同学在课堂讨论时尚未提出问题及修改意见,但是课后我们有 ...
- iOS之小功能模块--彩虹动画进度条学习和自主封装改进
前言: 首先展示一下这个iOS小示例的彩色进度条动画效果: 阅读本文先说说好处:对于基础不好的读者,可以直接阅读文末尾的"如何使用彩虹动画进度条"章节,然后将我封装好的这个功能模块 ...
随机推荐
- C# 操作IIS -App & AppPools
using System; using System.DirectoryServices; using System.Management; using Microsoft.Web.Administr ...
- assert的基本用法
assertion(断言)在软件开发中是一种常用的调试方式,很多开发语言中都支持这种机制,如C,C++和Eiffel等,但是支持的形式不尽相同,有的是通过语言本身.有的是通过库函数等.另外,从理论上来 ...
- zabbix 布署实践【6 使用微信公众号-消息模版推送告警】
使用这个服务的前提是,你必须要有一个微信订阅号,或者公众号,并且是通过认证的号 因为认证过后的号才有模版消息和获取用户openid等信息的权限 ,如下,登录微信公众号的登录页后,底下有个接口权限的展示 ...
- 类型“System.Data.Objects.DataClasses.EntityObject”在未被引用的程序集中定义。
说明: 在编译向该请求提供服务所需资源的过程中出现错误.请检查下列特定错误详细信息并适当地修改源代码. 编译器错误消息: CS0012: 类型“System.Data.Objects.DataClas ...
- 【POJ2186】受牛仰慕的牛
受牛仰慕的牛(popular cows) 每头牛都有一个梦想:成为一个群体中最受欢迎的名牛!在一个有N(1<=N<=10,000)头牛的牛群中,给你M(1<=M<=50,00 ...
- Ubuntu 14.04 配置FTP
配置Ubuntu 14.04的FTP服务,通过Windows远程访问Ubuntu 14.04的同时,可以实现windows和Ubuntu之间的文件交换传输.在多用户环境下,每一个用户都可以通过自己的帐 ...
- 【实验室笔记】C#的Socket客户端接收和发送数据
采用socket发送和接收数据的实验中,服务器采用的是网络助手作为模拟服务器端. 客户端程序流程: 应用的命名空间: using System.Net; using System.Net.Socket ...
- 最近遇到的两个IE下的问题(IE兼容问题)
最近遇到了两个IE下的兼容问题(产品目前还需要兼容IE8,所以没办法,运行效果虽然不好,但是也仍然兼容着吧) 问题描述: 1, 在更改IE窗口的时候,反应非常慢,甚至卡死 2, 在chrome运行正常 ...
- angular localStorage使用方法
var YourCtrl = function($scope, localStorageService, ...) { // To add to local storage localStorageS ...
- QT自绘标题和边框
在QT中如果想要自绘标题和边框,一般步骤是: 1) 在创建窗口前设置Qt::FramelessWindowHint标志,设置该标志后会创建一个无标题.无边框的窗口. 2)在客户区域的顶部创建一个自绘标 ...