css 外圆角旋转,CSS3 图片圆角旋转滤镜动效

水深无声 2022-09-03 01:26 257阅读 0赞

CSS

语言：

CSSSCSS

确定

\#animation\{

width:180px;

height:180px;

background-image:url(http://www.qqttxx.com/upimg/allimg/120213/co120213120630-12.jpg);

border-radius:90px;

border:8px solid \#ffffff;

\-webkit-animation:swing 1s .2s ease both;

\-moz-animation:swing 1s .2s ease both;\}

@-webkit-keyframes swing\{

20%,40%,60%,80%,100%\{-webkit-transform-origin:center center\}

20%\{-webkit-transform:rotate(15deg)\}

40%\{-webkit-transform:rotate(-10deg)\}

60%\{-webkit-transform:rotate(5deg)\}

80%\{-webkit-transform:rotate(-5deg)\}

100%\{-webkit-transform:rotate(0deg)\}

\}

@-moz-keyframes swing\{

20%,40%,60%,80%,100%\{-moz-transform-origin:center center\}

20%\{-moz-transform:rotate(15deg) \}

40%\{-moz-transform:rotate(-10deg)\}

60%\{-moz-transform:rotate(5deg)\}

80%\{-moz-transform:rotate(-5deg)\}

100%\{-moz-transform:rotate(0deg)\}

\}

\#animation:hover\{

border-radius:90px;

border-color:\#72ae00;

border-left:8px solid \#ddcc00;

border-right:8px solid yellow;

border-top:8px solid \#9900cc;

\-webkit-animation:rotateIn 1s .2s ease both;

\-moz-animation:rotateIn 1s .2s ease both;\}

@-webkit-keyframes rotateIn\{

0%\{-webkit-transform-origin:center center;

\-webkit-transform:rotate(-200deg);

opacity:0\}

100%\{-webkit-transform-origin:center center;

\-webkit-transform:rotate(0);

opacity:1\}

\}

发表评论取消回复

表情：

评论列表（有 0 条评论，257人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS圆角大杀器，使用滤镜构建圆角及波浪效果

目录 1，border-radius实现圆角 2，filter: contrast() 配合 filter: blur() 实现圆

梦里梦外;/ 2024年02月25日 01:48/ 0 赞/ 59 阅读

相关 css边框圆角(css边框圆角实例)

用CSS制作边框圆角线 css没有这个功能，只有用背景图来实现 ![css边框圆角(css边框圆角实例)\_css边框圆角(css边框圆角实例)][css_css_cs

不念不忘少年蓝@/ 2023年09月26日 13:14/ 0 赞/ 166 阅读

相关 css圆角边框(css圆角边框无效)

纯CSS制作圆角边框的代码是什么? \xsnazzy h1, \xsnazzy h2, \xsnazzy p \{margin:0 10px; letter-spacin

野性酷女/ 2023年09月26日 13:09/ 0 赞/ 40 阅读

相关 css圆角三角形3个圆角_CSS中的圆角

css圆角三角形3个圆角 CSS | 圆角 (CSS | Rounded Corners) border-radius property is commonly use

墨蓝/ 2023年03月05日 09:57/ 0 赞/ 111 阅读

相关 css 外圆角旋转,CSS3 图片圆角旋转滤镜动效

CSS 语言： CSSSCSS 确定 \animation\{ width:180px; height:180px; background-image:url(h

水深无声/ 2022年09月03日 01:26/ 0 赞/ 258 阅读

相关 CSS3圆角详解

作者： [阮一峰][Link 1] 日期： [2010年12月 9日][2010_12_ 9] CSS3是样式表（style sheet）语言的最新版本，它的一大优点就是支

分手后的思念是犯贱/ 2022年08月21日 13:49/ 0 赞/ 248 阅读

相关 CSS3圆角详解

作者：Nicholas Zakas 译者：阮一峰原文：[http://msdn.microsoft.com/en-us/scriptjunkie/gg508841.a

妖狐艹你老母/ 2022年08月08日 13:50/ 0 赞/ 27 阅读

相关 Css3圆角边框

1行代码搞定CSS3的圆角。 webkit核心浏览器使用-webkit-border-radius，如-webkit-border-radius:10px; fire

待我称王封你为后i/ 2022年04月14日 06:07/ 0 赞/ 386 阅读

相关【CSS3】圆角

![在这里插入图片描述][2019030514481083.png] 浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号。 \-webkit- 或 -mo

Myth丶恋晨/ 2022年03月12日 06:57/ 0 赞/ 360 阅读

相关 CSS 笔记——阴影、圆角、旋转、光标

7. 阴影、圆角、旋转、光标（1）box-shadow 阴影基本语法 text-shadow: h-shadow v-shadow blur co

╰+攻爆jí腚メ/ 2022年01月12日 12:03/ 0 赞/ 448 阅读