div元素呈圆环排列

<style>
.path {

width: 300px;

height: 300px;

padding: 20px;

border-radius: 50%;

background: rgba(79, 11, 152, 0.5);;

margin: 50px auto;

}

.avatar {

width: 50px;

margin: 0 auto;

border-radius: 50%;

overflow: hidden;

display: block;

transform-origin:50% 150px;

    position: absolute;
}

</style>

    <div class="avatar" style="transform: rotate(0deg);">
        <img  src="https://www.baidu.com/img/bd_logo1.png" width=‘50‘ height=‘50‘ style=‘transform: rotate(0deg);‘/>
    </div>
    <div class="avatar" style="transform: rotate(72deg);">
        <img  src="https://www.baidu.com/img/bd_logo1.png" width=‘50‘ height=‘50‘ style=‘transform: rotate(-72deg);‘/>
    </div>
    <div class="avatar" style="transform: rotate(144deg);">
        <img  src="https://www.baidu.com/img/bd_logo1.png" width=‘50‘ height=‘50‘ style=‘transform: rotate(-144deg);‘/>
    </div>
    <div class="avatar" style="transform: rotate(216deg);">
        <img  src="https://www.baidu.com/img/bd_logo1.png" width=‘50‘ height=‘50‘ style=‘transform: rotate(-216deg);‘/>
    </div>
    <div class="avatar" style="transform: rotate(288deg);">
        <img  src="https://www.baidu.com/img/bd_logo1.png" width=‘50‘ height=‘50‘ style=‘transform: rotate(-288deg);‘/>
    </div>

时间: 2024-10-10 17:54:52

div元素呈圆环排列的相关文章

css如何实现让两个div在同一行排列

css如何实现让两个div在同一行排列:让两个div元素在同一行排列是基本的操作,实现也非常的简单,可能会对初学者有所帮助.一.使用功能浮动方式:代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <t

js动态删除div元素

在做用户查找时 因为要把查找的结果动态加载和显示,所以,那些html元素要由Ajax动态生成.用户打开查找界面时,有系统推荐的用户,而当用户按条件查找后,查找的结果动态加载和显示.所以考虑到用js来搞. 这个for循环就是移除已有的表单.然后根据Ajax请求过来的数据,动态生成新的表单对象.一定要注意j变量从大往小循环,否则,删除div元素后会引起serchResultLenth=serchResult.children.length;长度的变化(这个问题摸索了好久,才搞定,切记) for(va

CSS3实现的div元素水平运动指定距离

CSS3实现的div元素水平运动指定距离:本章节分享一段,它实现了利用CSS3让div元素水平运动一段距离.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</

css控制div元素旋转指定角度代码实例

css控制div元素旋转指定角度代码实例:本章节介绍一下如何利用css3实现控制元素旋转指定角度的效果.在这里咱们就不考虑低版本的浏览器,因为随着时间的推移,低版本的浏览器会被逐渐淘汰,就算是当前,低版本浏览器的用户的占比也是很少了,下面直接看代码实例: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" conten

JavaScript网站设计实践(四)编写about.html页面,利用JavaScript和DOM,选择性的显示和隐藏DIV元素

一.现在我们在网站设计(三)的基础上,来编写about.html页面. 这个页面要用到的知识点是利用JavaScript和DOM实现选择性地显示和隐藏某些DIV about.html页面在前面我们为了看导航栏菜单项高亮显示时,已经写了部分内容,只是那时写的代码没有实现div显示和隐藏,现在就在之前编写的基础上,为页面添加显示和隐藏div的效果. 没有写JavaScript之前看到的效果: 实现后的效果图: 这个就是我们现在要做的效果. 1.背景: 我们在about.html页面中写了一个ul列表

每天一个JavaScript实例-从一个div元素删除一个段落

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>每天一个JavaScript实例-从一个div元素删除一个段落</title> <style> p{ padding:20px; margin:10px 0; width:

justify-content 定义子元素在父元素水平位置排列的顺序

justify-content 定义子元素在父元素水平位置排列的顺序,需要和display:flex使用才会生效. 有五个属性: 1.flex-start(默认值)  左对齐 2.flex-end 右对齐 3.center 居中 4.sapce-between 两端对齐,子元素之间的间距相等 5.space-around 每个子元素两侧的间距相等. 代码 效果 flex-end 右对齐 代码 效果 center 居中 代码 效果 sapce-between 两端对齐,子元素之间的间距相等(个人觉

span元素和div元素的区别

span元素和div元素的区别:本章节简单介绍一下span元素和div元素的区别,因为这两个元素在布局中非常的常用,可以说几乎没有任何页面不适用这两个元素,下面就简单介绍一下它们两者的主要区别.一.元素的性质:span元素内联元素,而div元素是块级元素.关于两种类型元素的区别可以参阅什么是块级元素和内联元素一章节. 二.元素的使用方式:div元素主要是用作大的框架布局,而span元素则是主要用于对内容的修饰,比如颜色字体大小.代码如下: <!DOCTYPE html> <html>

hmtl 手机上 div元素 拖动

这是前端一个非常简单的功能,没什么复杂的原理:给div元素添加touch监听事件,然后改变div元素的位置状态. 下面是段简单的实现代码 <!doctype html> <html> <head> <meta charset="UTF-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0" name="view