旋转的小黄人(每天进步一点点)

今天看到一个有点炫酷的效果，于是学习了下。

旋转的小黄人(萌翻了）

代码也很简单，一起来看看是怎么实现的吧。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .roll{
            background:url(author.jpg) no-repeat center;
            height:220px;
            width:220px;
            border-radius:110px;
            transition: transform 2s;
        }
        .roll:hover{
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
    <div class="roll"></div>
</body>
</html>

图片随便挑一张自己喜欢的吧！

每天一博，记录每天的学习成果，加油！

时间： 2024-10-28 15:46:04

旋转的小黄人(每天进步一点点)的相关文章

微信小程序相关三、css写小黄人

小程序上课第三天,因为今天院里有活动,所以没去上课,第四天上午又因为要召开入党转正大会,又耽误了一上午,下午去上课,要了资料.这两天讲了一些零零碎碎的东西,做的实例有上面这个小黄人都是用的css,基本上都是用border,transform:rotate(),animation,和一些细节做的,左边的对话框那里的小尖头也是一个重点细节下面附上代码: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset=&quo

【推荐】纯CSS3画出小黄人并实现动画效果

前言前两天我刚发布了一篇CSS3实现小黄人动画的博客,但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片,并自己用PS抠出需要实现动画的部分,最后才完成的动画效果.但是,其实我的初衷是想体验一下用图片做动画的赶脚,但是找不到素材,才无奈用了最笨的方法来满足自己的需求,本想勉强能看就行了.可是呢,还是抵不住自己内心的完美,于是乎,用了一个晚上用CSS3画出了小黄人再实现类似的动画效果. 正题 OK,大家看一下下面两张图有什么不同: 当然,很多人会说,明显大小不同,嘴巴,头发也

纯CSS3画出小黄人并实现动画效果

原文出处: 郭锦荣前言前两天我刚发布了一篇CSS3实现小黄人动画的博客,但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片,并自己用PS抠出需要实现动画的部分,最后才完成的动画效果.但是,其实我的初衷是想体验一下用图片做动画的赶脚,但是找不到素材,才无奈用了最笨的方法来满足自己的需求,本想勉强能看就行了.可是呢,还是抵不住自己内心的完美,于是乎,用了一个晚上用CSS3画出了小黄人再实现类似的动画效果. 正题 OK,大家看一下下面两张图有什么不同: 当然,很多人会说,明显大

Quartz2D练习 -- 小黄人

Main.storyboard <?xml version="1.0" encoding="UTF-8" standalone="no"?> <document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="5053" systemVers

css3实现小黄人

效果就像这样: 不废话,直接上代码! hrml代码: <!DOCTYPE html> <html> <head lang="zh"> <meta charset="UTF-8"> <title>纯CSS3画出小黄人并实现动画效果</title> <Link href="index.css" type="text/css" rel="styl

iOS开发 - Quartz2D绘制小黄人

Quartz2D绘制小黄人 - (void)drawRect:(CGRect)rect { // 1.上下文 CGContextRef ctx = UIGraphicsGetCurrentContext(); // 2.身体 drawBody(ctx, rect); // 3.嘴(微笑) drawMouth(ctx, rect); // 4.画眼睛 drawEyes(ctx, rect); } /** * 眼睛 */ void drawEyes(CGContextRef ctx, CGRect

小绿人小红人和小黄人

(2016/4/14 看了昨天的锵锵三人行继续谈王小波,子东提到一个有趣的观点.路遥和王小波的对照.一个返乡农村青年为成为城市人的奋斗,一个下放青年以普通人的姿态谈自由. 两位都是我喜欢的作家.王小波更是我最喜欢的作家.子东的对照让我想起平等和自由,路遥的苦苦追求能够理解为底层人向往的平等,王小波戏谑地展示的则是一个精神贵族觉得的最可贵的东西,自由.由两者的关系又引发了以下的想象.当然,路遥追求的平等绝不是以下小红人理解的那种. ) 从前有个国家,那里的人分为两种:一种是小绿人,一种是小红人.

小黄人

宝宝今天不开心,用CSS画了个小黄人,源码如下 html部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>小黄人</title> <link rel="stylesheet" href="main.css" /> </head> &l

小黄人这步棋，vivo怎么下？

9月13日<小黄人大眼萌>在国内首映,vivo.Uber也跟着凑起了热闹.12.13日两天,在世贸天阶,vivo联手Uber邀请大家与小黄人手机图标合影.只要上传照片上传照片至微博并@Uber优步北京@vivo智能手机,现场获得活动参与代码,在指定时间打开Uber输入,即有机会赢取小黄人神秘首映礼邀请函. 夏末秋初的凉爽日,却被小黄人"搅黄"了,"小黄人黄"(Minion Yellow)甚至还被定为2015年的流行色. 凭借着讨喜的性格.呆萌的造型.满满