首页 > 其他分享 >【css】旋转,亮度变化

【css】旋转,亮度变化

时间:2023-05-17 12:24:08浏览次数:29  
标签:brightness 50% transform 亮度 旋转 filter translate css

先定位

1 position: absolute;//绝对定位(很重要)
2     left: 124px;//定位位置,一般为盒子宽高的一半,可以是50%,50%
3     top: 102px;
4     transform: translate(-50%, -50%);//变换方向
5     //旋转
6     animation: round 10s infinite linear;
7     //亮度变化
8     animation: hightLight 2s infinite linear;

在外侧加入:

 1 //旋转:
 2 @keyframes round {
 3   0% {
 4     transform: translate(-50%, -50%) rotate(0);
 5   }
 6   100% {
 7     transform: translate(-50%, -50%) rotate(360deg);
 8   }
 9 }
10 
11 //亮度变化
12 @keyframes hightLight {
13   0% {
14     filter: brightness(0.8);
15   }
16   50% {
17     filter: brightness(2);
18   }
19   100% {
20     filter: brightness(0.8);
21   }
22 }

 

标签:brightness,50%,transform,亮度,旋转,filter,translate,css
From: https://www.cnblogs.com/Esai-Z/p/17408238.html

相关文章

  • 【css】@keyframes
    一、transform和@keyframes动画的区别:@keyframes动画是循环的,而transform只执行一遍.二、@keyframesCSS3中添加的新属性animation是用来为元素实现动画效果的,但是animation无法单独担当起实现动画的效果。承载动画的另一个属性——@keyframes。使用的时候为了兼容可加上-webk......
  • html css 实现图片扫描特效
     实现这个特效需要做3个层,所以要用到CSS绝对定位和层级z-index以及设置top、left、bottom、right的值。大体结构是一个容器,容器里放3个层,底层是4个角的边框效果容器,中间层是要扫描的图片容器,顶层是扫描线容器,这3个层通过z-index来实现层级,它们的高宽度都取父容器的高宽度inherit......
  • scss好用的方法技巧
     SCSS是CSS的超集,即所有CSS功能都将在SCSS中可用,并且包含SASS(SyntacticallyAwesomeStyleSheets)的一些功能。SCSS使任何CSS术语都有效。 &符号.dashboard{&-container{margin:30px;}&-text{font-size:30px;line-height:46px;......
  • css font 属性怎么快捷写?
    font:italicsmall-capsbold12px/1.5emarial,verdana;等效于:font-style:italic;font-variant:small-caps;font-weight:bold;font-size:12px;line-height:1.5em;font-family:arial,verdana;顺序:font-style|font-variant|font-weight|font-size|line-height|font-fami......
  • 代码随想录算法训练营第8天 | ● 344.反转字符串 ● 541. 反转字符串II ● 剑指Offer
     第四章 字符串part01  今日任务  ●  344.反转字符串●  541. 反转字符串II●  剑指Offer 05.替换空格●  151.翻转字符串里的单词●  剑指Offer58-II.左旋转字符串  详细布置   344.反转字符串  建议: 本题是字符串基础题目,就是考察......
  • 使用CSS选择器进行元素定位
          在seleniumwebdriver中,支持使用CSS选择器来进行元素定位,事实在真的投入工作,大量编辑用例和元素定位的时候,使用css和xpath才是经常需要用到的。之前有专门讲过使用xpath对元素定位的使用,下面要介绍css选择器来进行元素定位。【参见W3C官网说明】http://www.w3schoo......
  • css 样式文件中的特殊符号 - 波浪号(也叫 tilde,squiggle,twiddle)
    例子:.check:checked~.content{}~选择器实际上是后继同胞组合器(在2017年之前称为一般同胞组合器):后继同胞组合器由“波浪号”(U+007E,~)字符组成,它将两个简单选择器序列分隔开。由这两个序列表示的元素在文档树中具有相同的父级,并且由第一个序列表示的元素位于由第二个序列表......
  • 电商JD商城登录页面html+css
    这也太难了吧,怎么连抄咱也不会抄啊QAQ看了这么久的前端,总是感觉看得懂,写不出来,抄也不会抄这不,这又抄写了一个京东电商商城的登录页面,本来想好好学习一下页面的布局以及编写结构和思维,结果html代码还行,至少可以看的懂,到了css上就完全不知道怎么设置样式了,感觉有的样式完全可以不......
  • app直播源码,css宽度不固定,水平居中
    app直播源码,css宽度不固定,水平居中1.相对定位:  #box{position:relative;left:50%;float:left;} #inner{position:relative;left:-50%;} ​需考虑浮动带来的问题 2.利用diplay:table来解决: #box{display:table;margin:0auto}/*不支持ie6,ie7*/  3.CSS3fl......
  • CSS 计数器
    CSS计数器通过一个变量来设置,根据规则递增变量。使用计数器自动编号CSS计数器根据规则来递增变量。CSS计数器使用到以下几个属性:counter-reset -创建或者重置计数器counter-increment -递增变量content -插入生成的内容counter() 或 counters() 函数-将计数......