一些用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= ...
随机推荐
- C#控制台下测试多线程的源码
下边代码是关于C#控制台下测试多线程的的代码,应该是对小伙伴有所用. class Program { static void Main(string[] args) { ThreadStart num ...
- rediscluster安装
Redis 3.2.1集群搭建 一.概述 Redis3.0版本之后支持Cluster. 1.1.redis cluster的现状 目前redis支持的cluster特性: 1):节点自动发现 2) ...
- Linux下如何查看进程准确启动时间
- suList() 和 asList()
String[] arr = { "a", "b", "c" }; List<String> aslist = Arrays.a ...
- c# 操作word写入特殊字符
在word中插入特殊字符(word 2010): 插入-符号-选择特殊符号,如图: c#操作 :首先要得到插入符号的字符代码,在上图中有显示,然后word模板改为相应的字体,具体插入代码如下 ...
- C语言排序算法学习笔记——交换类排序
交换类排序:根据序列中两个元素关键字的比较结果来交换他俩在序列中的位置. 冒泡排序:假设待排序表长为n,从后往前(或从前往后)两两比较相邻元素的值,若为逆序(即A[i-1]>A[i])则交换他们 ...
- google chrome 浏览器去掉 XHR finished loading....
每次Ajax请求,Chrome浏览器控制台提示如图XHR finished loading信息. 要去掉 这些信息显示 ,点击上图的Settings ,在打开的面板中取消 Log XMLHttpReq ...
- Java进程&线程（整理）
Java进程&线程 程序:程序员写的代码,就是代码,不运行好像不会发生什么: 进程:一个进程可以理解为"运行的"一个程序,当我们启动一个java程序后,对应的jvm就会创建 ...
- Exp4 恶意代码分析 20164313 杜桂鑫
1.实践目标 1.1是监控你自己系统的运行状态,看有没有可疑的程序在运行. 1.2是分析一个恶意软件,就分析Exp2或Exp3中生成后门软件:分析工具尽量使用原生指令或sysinternals,sys ...
- WEB日志分析工具（Webslizer和AWstats）
https://www.cnblogs.com/xiaowenshu/p/10030139.html#top