一些用Css实现的效果
今天写一个笔试题，其中有一个是用css实现直角梯形的效果，我给出的答案是：
<style>
.wrap{
width: 100px;
height: 50px;
border-top:90px solid transparent;
border-left:90px solid #ffff00;
} </style>
</head>
<body>
<div class="wrap">
</div>
然后顺带回顾一下设置三角形的原理
1.首先设置宽和高为0
2.然后给边框加上宽高和相应颜色
<style>
.wrap{
width: 0px;
height: 0px;
border-right:100px solid transparent;
border-left:100px solid transparent;
border-bottom:100px solid #ffff00;
} </style>
</head>
<body>
<div class="wrap">
</div>
拼多多二面让我写一个菊花的loading，我写不来，估计是凉了（心累了），先从一个css3的选择效果做起
<div></div>
@keyframes rotating{
from{transform:rotate()}
to{transform:rotate(360deg)}
}
div{
width: 100px;
height: 100px;
border: 1px solid;
animation: rotating .2s linear infinite;
}
一些用Css实现的效果的更多相关文章
- css三级菜单效果
一个简单实用的css三级菜单效果 <!doctype html> <html> <head> <meta charset="utf-8"& ...
- 利用target的特性，可以实现纯css的tab效果切换
基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1& ...
- 推荐20款基于 jQuery & CSS 的文本效果插件
jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...
- CSS 边框 阴影 效果
CSS 边框 阴影 效果 以下将css实现阴影效果,以便须要朋友们,直接上代码 #shadow1{ width: 200px; height: 100px; color: white; backgro ...
- Css实现透明效果，兼容IE8
Css实现透明效果,兼容IE8 >>>>>>>>>>>>>>>>>>>>> ...
- HTML与CSS简单页面效果实例
本篇博客实现一个HTML与CSS简单页面效果实例 index.html <!DOCTYPE html> <html> <head> <meta charset ...
- css 实现评分效果
css实现评分效果,其实是css sprites (css精灵)的延伸应用,效果的实现主要是由 background-position 属性移动图片位置.之前看到有前辈写过关于这方面的内容,在理解上 ...
- 纯 CSS 实现波浪效果！
一直以来,使用纯 CSS 实现波浪效果都是十分困难的. 因为实现波浪的曲线需要借助贝塞尔曲线. 而使用纯 CSS 的方式,实现贝塞尔曲线,额,暂时是没有很好的方法. 当然,借助其他力量(SVG.CAN ...
- React 系列教程 1：实现 Animate.css 官网效果
前言 这是 React 系列教程的第一篇,我们将用 React 实现 Animate.css 官网的效果.对于 Animate.css 官网效果是一个非常简单的例子,原代码使用 jQuery 编写,就 ...
- IE7,8纯css实现圆角效果
众所周知,IE7,8不支持border-radius效果.但我们同样有办法用css实现这个效果,方法就是用border来模拟. <!DOCTYPE html> <html lang= ...
随机推荐
- Windows7环境下Excel2010中图片超链接默认打开程序修改
在Windows7的环境下,打开Excel2010超链接图片,都是默认用IE打开.搜索了所有的中文网络,没有找到解决方案,且发现受此困扰的人不少.后来用纯英文搜索,终于找到解决方案并尝试成功. 1,操 ...
- DOM 核心
继承在DOM中的重要性: 1. Node 对象 2. Element 对象 3. Document 对象
- Ubuntu16.04下安装Hyperledger Fabric 1.0.0
系统环境 * Ubuntu: 16.04 * Go: 1.9.2 * NodeJS: v6.12.0 * Docker: 17.09.0-ce * HyperLedger Fabric: 1.0.0 ...
- android.support.v4.app.NotificationCompat引用包
在导入使用了ViewPage,ActionBar,Fragment的工程后出现错误,很有可能是没有导入4.0版本的支持包.本人也是碰到这个问题,特意搜索了一下,得到解决办法如下,记录下来,以免忘记. ...
- 事件&表达式
typeFaqs.ForEach(async p => { var results = await ; p.Results = results; }); https://stackoverfl ...
- cesium3dtiles位置改变
cesium偏移3dtiles高度var heightOffset = 20.0; var boundingSphere = tileset.boundingSphere; var cartograp ...
- SpringMvc实现的简单原理
1.浏览器发送请求 2.服务器执行servlet的(前端控制器)解析器 3.servlet通过(前端控制器)解析器拿到所有带有@Controller注解的类,并遍历类中的所有方法 4.将遍历的方法中带 ...
- 关于对CSS中超链接那部分的设置
a:link{ //正常下的超链接 color:red; //超链接的颜色 text ...
- Android开发 解决EditText与NestedScrollView 滚动冲突问题
问题简述 在将EditText套进NestedScrollView的情况下,EditText输入了多行内容后,无法触摸滚动到第一行 问题原因 在将EditText套进NestedScrollView的 ...
- docker：学习笔记
docker run -itd --net=none 22565cef72c2 /usr/sbin/sshd -Dpipework br0 5a3e7bab4c5c5260a93e153aa7fec3 ...