![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
demo
喵姑娘呀
一只喜欢前端的喵,正在好好学习,天天向上。
展开
-
关于CSS透视perspective的第一次”见面“
关于CSS透视perspective的第一次”见面“ 今天在看教学视频,学到CSS中的透视属性,视觉上觉得非常舒服,跟着写了个小小的demo.记录一下学习。 首先实现效果如下: 1、中间有一张图片,有两扇门,两个把手; 2、鼠标移动到整个门的时候,两扇门就向两边打开,立体显示。 HTML代码: <section> <div class="door-1"></di...原创 2019-04-23 12:02:50 · 267 阅读 · 0 评论 -
css:用css实现图片旋转轮播3d效果
CSS3的transform-style: :css3属性,在3d空间非常重要的一个属性,有两个值: flat 子元素将不保留其 3D 位置,默认值。 preserve-3d 子元素将保留其 3D 位置。 要注意的是ie不支持 transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。 效果显示效果图 思路:把六张图片放在一起,每张图片转换角度,角度自己调试,中间一张图片作为中...原创 2019-04-23 16:43:04 · 1619 阅读 · 1 评论 -
js实现canvas简单的验证码
首先,canvas:固定在浏览器上的画布,浏览器支持 Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 及其属性和方法。 canvas为我们敞开了新一扇大门。 属于HTML5中新增的一个标签,看起来与其他标签区别不大,在验证码之前,应该学习canvas相关API, 这里介绍本次用到的canvas方法 : fillStyle 设置或返回用于...原创 2019-05-04 16:53:19 · 852 阅读 · 1 评论 -
css写一个小黄人
小黄人 实现思想: 1、用一个容器装小黄人,样式定位为相对定位:<div class="wrap"></div> 2、把整个小黄人的身体做出来,然后添加头发; 3、实现小黄人的手臂; 4、小黄人的腿、脚; 5、小黄人的眼睛、眼镜、眼球部分 6、衣服部分。 我这里主要使用伪元素,CSS3的动画animation,transform; Animation:动画名称 动画时间 运...原创 2019-04-24 17:04:38 · 487 阅读 · 0 评论