不完善的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小示例的彩色进度条动画效果: 阅读本文先说说好处:对于基础不好的读者,可以直接阅读文末尾的"如何使用彩虹动画进度条"章节,然后将我封装好的这个功能模块 ...
随机推荐
- NLog在MVC中使用
NLog在MVC中使用 在site根目录新建NLog.config <?xml version="1.0"?> <configuration> <nl ...
- linux xfce4普通用户 mount usb提示: Not authorized to perform operation
问题:xfce4下,USB 硬盘能自动挂载并显示,但是普通用户操作时,提示:Not authorized to perform operation. 时间:20160928 os:gentoo + x ...
- 高效开发之SASS篇
作为通往前端大神之路的普通的一只学鸟,最近接触了一样稍微高逼格一点的神器,特与大家分享~ 他是谁? 作为前端开发人员,你肯定对css很熟悉,但是你知道css可以自定义吗?大家都知道,js中可以自定义变 ...
- 在ubuntu下设置eclipse开发STM32等嵌入式设备
之前为了能够让ROS与底层能够顺利通讯,我采用可开源开发板arduino ,因为arduino有ROS的库,能够按照ROS wiki上所给的教程就可以顺利的开发,但由于arduino的局限性,我觉得是 ...
- line-height属性详解
line-height属性详解:http://www.cnblogs.com/dolphinX/p/3236686.html
- c#弱事件(weak event)
传统事件publisher和listener是直接相连的,这样会对垃圾回收带来一些问题,例如listener已经不引用任何对象但它仍然被publisher引用 垃圾回收器就不能回收listener所占 ...
- 1、<img />标签
alt:当图片不显示时的文字说明 title:鼠标悬停在图片上的出现的文字说明
- Java笔试题目-my
1.BuildString 和 BefferedString 默认初始容量为 16 , 超出就是 16*2 + 2; 可以看源代码得知; 2.ArrayList 默认的构造方法是一个空的Ob ...
- 《CSS网站布局实录》读书笔记
从Web标准.HTML标记.CSS语法基础介绍到实用技巧,事无巨细.实体书已不印刷,只能下载电子版 书的背景: 国内第一本web标准的CSS布局书,2006年9月第一版,作者李超. 环境背景: 当时主 ...
- 安装linux工作环境
1,介绍Vagrant 我们做web开发的时候经常要安装各种本地测试环境,比如apache,php,mysql,redis等等.出于个人使用习惯,可能我们还是比较习惯用windows.虽然说在wind ...